一、VUE.JS的引入。
1、下载vue.js引入。
<script src="js/vue.js"></script>
2、CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
3、命令行方式
(1). npm: 需要Node.js支持,配合前端资源打包器Webpack使用;
(2). cli: 官方提供的脚手架工具,进一步简化了vue项目创建的难度,更加智能和自动化;
二、VUE.JS的基本术语:
1. 实例: Vue.js本身就是一个构造函数,可以用来创建对象,使用Vue第一步,就是要创建一个Vue实例:new Vue();
2. 实例参数: Vue()接受一个js字面量对象做为参数,所有的功能,都以对象属性的方式进行设置;
3. 挂载点: Vue实例的作用域,本质上就是通过css选择器获取到的页面元素;
4. 模板: 带有html标签的字符串;
5. 值/变量: 挂载点中的文本内容;
6. 属性: 描述模板或html标签;
7. 事件: 模板或元素上发生的系统或用户事件,例如点击,移动等;
三、v-text,v-html变量渲染
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挂载点与变量显示</title>
</head>
<body>
<!--创建一个挂载点-->
<div id="box">
<!--以插值的方式显示内容-->
{{message1}}
<!--使用模板指令v-text显示一个变量-->
<p v-text="message1"></p>
<!--如果变量中有html标签-->
<!--v-text指定是将变量内容原样输出,不会解析文本中的html标签-->
<p v-text="message2"></p>
<!--如果想显示一个带有html标签的字符串,需要用v-html指令:类似js中的innerHTML-->
<p v-html="message2"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
// 创建Vue实例:用一个对象字面量做为参数
new Vue({
//绑定挂载点
el: '#box',
//data属性: 创建数据模型:对应MVVM设计模式中的Model层
data: {
//显示一个变量
message1: 'Vue.js开发基础',
//如果变量的内容是一个有html标签的文本
message2: '<h3 style="color:red">php中文网</h3>'
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、属性绑定v-bind和事件绑定v-on
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板,属性与事件</title>
</head>
<body>
<div>
<!--创建一个挂载点-->
<div id="box">
<!--属性绑定-->
<!--可以给模板标签绑定属性: v-bind -->
<!--之前是直接用标签写列的-->
<!--<h3 style="color:red;">{{message}}</h3>-->
<!--vue实例也可以接管模板的属性,并实现绑定,使用v-bind指令-->
<h3 v-bind:style="style">{{message}}</h3>
<!--属性绑定是常用操作,Vue提供了简写指定: 冒号-->
<h3 :style="style">{{message}}</h3>
<!--此时,:style的值"style"已经不是一个普通字符串了,而是一个表达式,可以进行运算,例如字符串拼装-->
<h3 :style="style + 'font-size:2rem;'">{{message}}</h3>
<!--3.事件绑定-->
<!--还可以给模板绑定事件: v-on:事件名称="事件方法"-->
<!--事件对应的方法必须写到Vue实例中的methods属性中,该属性也是一个对象-->
<h3 v-on:click="changeText">{{message}}</h3>
<!--由于给模板添加事件是常用操作,所以Vue提供了一个简写语法:@-->
<h3 @click="changeText">{{message}}</h3>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
new Vue({
// 绑定挂载点
el: '#box',
// 通过template属性给挂载点添加模板,它的优先级高于挂载点中的模板
// template: '<h3 style="color:red">《JavaScript权威指南》</h3>'
data: {
message: '《JavaScript权威指南》',
// 属性绑定也是写到data数据模型中
style: 'color: blue;'
},
methods: {
changeText: function () {
this.message = "《Vue.js权威指南》";
}
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、双向数据绑定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="box">
<!--input标签的特点:即可显示内容,也可以输入内容/即更新内容-->
<!--<input type="text">-->
<!--给input绑定一个属性,与数据模型中的info也进行绑定: v-bind:value="info"-->
<!--<input type="text" :value="info">-->
<!--现在我的需求是: 当input中的内容发生变化时,对应的数据模型中的数据也会同步发生变化 -->
<!--显然:v-bind指令无法完成,vue又提供一个v-model指令,可以实现模型中的数据随页面数据变化而变化-->
<input type="text" v-model="info">
<!--单向绑定: 页面中的数据内容由数据模型决定-->
<!--双向绑定: 模型中的数据内容由页面中的数据决定-->
<h3>{{info}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
new Vue({
el: '#box',
// 数据模型
data: {
info: 'html'
}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、侦听器
侦听器:实时监测页面中数据的变化,实时更新数据模型中的属性,并完成指定的动作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侦听器</title>
</head>
<body>
<div id="box">
用户名:<input type="text" v-model="username"> <br>
<h3>{{length}}</h3>
<h3 v-show="isShow" :style="warning">{{message}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#box',
data: {
username: '',
length: 0,
message: '用户名太短',
isShow: false,
warning: 'color:red'
},
// 侦听器:实时监测页面中数据的变化,实时更新数据模型中的属性,并完成指定的动作
watch: {
// Vue是面向数据编程,侦听器当然也是面数据,所以watch中侦听的属性必须是页面中的变量
username: function () {
this.length++;
if (this.length < 6) {
this.isShow = true;
} else {
this.isShow = false;
}
}
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
