一、Vue的基本使用
1. 基本格式
（1）提供标签
（2）引入Vue.js
（3）根据Vue的语法格式，创建Vue实例对象
（4）在Vue实例对象中传入数据
<body>
<!-- 1.提供标签，用来存放数据 -->
<div class="box">
<div>{{msg}}</div>
<div>{{1+1+`等于2`}}</div>
</div>
<!-- 2.导入vue.js -->
<script src="./vue.js"></script>
<!-- 3.使用vue的语法，创建vue实例对象 -->
<script>
var vm = new Vue({ el: '.box', data: { msg: 'Hello World!' } });
</script>
</body>
① {{}}：插值表达式。
② el：可以是选择器，也可以是获取的DOM元素对象。
③ data：是一个对象，里面存放数据。
二、 数据绑定的指令
1. 什么是指令
① 指令的本质就是自定义属性。
② Vue中指令都是以 v- 开头 。
2. v-cloak 指令
作用：v-cloak 指令可以防止页面加载时出现闪动问题。
（1）首先在style样式中为 [v-cloak] 指令添加样式。
<style>
[v-cloak] {
display: none;
}
</style>
（2）然后给 插值表达式 所在的标签，添加 v-cloak 指令。
<!-- 1.提供标签，用来存放数据 -->
<div class="box">
<div v-cloak>{{msg}}</div>
<div v-cloak>{{1+1+`等于2`}}</div>
</div>
3. v-text 指令
① v-text指令用于将数据填充到标签中，替代了插值表达式，并且没有闪动问题。
② 不解析HTML标签，如果数据中有HTML标签会将HTML标签一并输出。
- 注意：v-text 和 v-html 都是单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。
<div v-text="msg"></div>
4. v-html 指令
①用法和v-text 相似 ， 但是他可以解析HTML标签。
② 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上。
<div v-html="msg1"></div>
5. v-pre 指令
① 显示原始信息，跳过编译过程。
② 跳过这个元素和它的子元素的编译过程。
③ 一些静态的内容不需要编译加这个指令可以加快渲染。
<!--即使data里面定义了msg，这里仍然显示为 {{msg}} -->
<div v-pre>{{msg}}</div>
6. 数据响应式
（1）数据的变化导致页面内容的变化，就叫数据响应式。
（2）数据绑定，就是将数据填充到标签中。
（3）v-once指令，使当前标签只进行一次编译，不再具有数据响应式。
<!-- v-once指令让当前标签只编译一次，数据不再变化 -->
<div v-text="info" v-once></div>
7. v-model 指令
v-model 指令用于数据的双向绑定。限制在 <input>、<select>、<textarea>、components中使用。双向绑定就是：
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
<!-- v-model双向绑定数据 -->
<input type="text" v-model="msg">
8. MVVM
（1）m model
- 数据层 ， Vue 中 主要是指 data 中的数据（vuex等属于增强版的Model层）
（2）v view
- 视图层，Vue 中 view 指templete模版部分，也就是HTML页面
（3） vm （view-model）
- 视图模型层，连接View和Model的桥梁，负责数据绑定和DOM监听
- vue实例充当这一角色
三、v-on 事件绑定
1. v-on 指令
v-on：事件类型="具体的处理过程"
v-on：事件类型="处理函数的名称"
v-on：事件类型="处理函数的名称(参数1，参数2，$event )"
① 事件处理函数，写在vue实例对象的methods属性中。
② methods对象中的处理函数，想要获取数据必须加this，处理函数的this指向vue实例。
③ v-on：可以用 @ 代替。
参数传递说明：
① 标签只绑定 处理函数的名称 时，处理函数可在形参位置通过 event 接收事件对象。
②标签绑定的是 处理函数的调用 时，如果要传递事件对象，则必须写在最后一个参数位置写上 $event。
<!-- 1. 定义标签 -->
<div id="box">
<div>{{num}}</div>
<button v-on:click="num++">按钮1</button>
<button v-on:click="handler1">按钮2</button>
<button v-on:click="handler2(100,200,$event)">按钮3</button>
</div>
<!-- 2. 导入vue.js -->
<script src="./vue.js"></script>
<!-- 3. 使用vue语法，创建实例对象 -->
<script>
var vm = new Vue({
el: '#box',
data: { num: 0 },
methods: {
handler1: function (event) {
this.num++; //注意：处理函数获取数据，必须加this,this指向vue实例对象。
console.log(event.target.innerHTML);
},
handler2: function (x,y,event) {
this.num++;
console.log(x,y,event.target.innerHTML);
},
},
});
</script>
2. 事件修饰符
阻止事件冒泡：
<div v-on:click="handler1">
123
<button v-on:click.stop="handler">按钮4</button>
</div>
阻止默认事件：
<a href="http://www.baidu.com" v-on:click.prevent="handler">百度</a>
3. 按键修饰符
绑定enter键：
<input type="text" v-model="str" v-on:keydown.enter="handle" />
常用的按键修饰符
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
4. 自定义按键修饰符
Vue.config.keyCodes.自定义名称 = 某个按键对应的ASCll码值
<!-- 1.创建标签 -->
<form action="">
<div class="box">
<!-- 绑定enter键 -->
entet:<input type="text" v-model="str" v-on:keydown.enter="handle" />
<br />
<!-- 绑定delete键 -->
delete:<input
type="text"
v-model="str1"
v-on:keydown.delete="handle1"
/>
<!-- 绑定自定义的“a”键 -->
a:<input type="text" v-on:keydown.aaa="handle2" />
</div>
</form>
<!-- 2.引入vue.js -->
<script src="./vue.js"></script>
<!-- 3.创建vue实例对象 -->
<script>
// 自定义按键修饰符
Vue.config.keyCodes.aaa = 65;
var vm = new Vue({
el: '.box',
data: { str: '', str1: '你好' },
methods: {
handle: function () {
console.log(this.str);
},
handle1: function () {
this.str1 = '';
},
handle2: function (event) {
console.log(event.keyCode);
},
},
});
</script>
四、v-bind 属性绑定
v-bind 绑定原理：(v-text、v-html 等同理）
① 不用v-bind绑定的属性，双引号中的属性值被当做 字符串 来解析；
② v-bind绑定了属性后，双引号中的属性值被当做 变量 来解析，如果想要使用 字符串，要用 单引号包裹 起来。
1. v- bind 指令
<a v-bind:href=" data中的数据 （变量名）" > </a>
缩写形式：v-bind：可以简写为 ：
<!-- 1.创建标签模板 -->
<div class="box">
<!-- 将a标签的href属性与data数据进行绑定 -->
<a v-bind:href="url">{{name}}</a>
<!-- 点击按钮，调用函数更换href的值 -->
<button v-on:click="handle">切换</button>
</div>
<!-- 2.引入vue.js -->
<script src="./vue.js"></script>
<!-- 3.创建Vue实例对象 -->
<script>
var vm = new Vue({
el: '.box',
data: { url: 'http://baidu.com', name: '百度' },
methods: {
handle: function () {
this.url = 'http://itheima.com';
this.name = '黑马';
},
},
});
</script>
五、v-bind 样式绑定
注意，不要给一个标签多次使用 v-bind：class 进行绑定样式！！！
1. 为class绑定对象
- 我们可以给v-bind:class 一个对象，以动态地切换class。
- 注意：v-bind:class指令添加的class样式不会覆盖原有的样式。
<div v-bind:class="{one:isone,two:istwo}">第一个盒子</div>
data: {
isone: true,
istwo: true,
}
（1）标签通过v-bind绑定的class样式中，可以是一个对象，键是选择器的类名，值是data数组中的键，以is开头。
（2）data数组中，键是自定义名称，一般命名为is+选择器的类名，值是true或者false。
（3）通过控制data数组中的true或者false，动态切换标签是否添加class样式。
2. 为class绑定数组
<div v-bind:class="[threeClass,fourClass]">第二个盒子</div>
data: {
threeClass: 'three',
fourClass: 'four',
}
（1） v-bind 中支持绑定一个数组。数组中存放的是data数组中的键。
（2）data数组中，键是自定义名称，值是选择器的类名。
<style>
.one { }
.two { }
.three { }
.four { }
</style>
<body>
<!-- 1.创建标签模板 -->
<div class="box">
<!-- (1)对象形式 -->
<div v-bind:class="{one:isone,two:istwo}">第一个盒子</div>
<button v-on:click="handle1">切换1</button>
<!-- (2)数组形式 -->
<div v-bind:class="[threeClass,fourClass]">第二个盒子</div>
<button v-on:click="handle2">切换2</button>
</div>
<!-- 2.引入vue.js -->
<script src="./vue.js"></script>
<!-- 3.创建Vue实例对象 -->
<script>
var vm = new Vue({
el: '.box',
data: {
isone: true,
istwo: true,
threeClass: 'three',
fourClass: 'four',
},
methods: {
handle1: function () {
//切换类
this.istwo = !this.istwo;
},
handle2: function () {
//切换类
this.fourClass = this.fourClass ? '' : 'four';
},
},
});
</script>
</body>
3. 对象与数组的简写形式 ( 重点 ）
<div v-bind:class="objClass">第一个盒子</div>
<div v-bind:class="arrClass">第二个盒子</div>
data: {
objClass: { one: true, two: true },
arrClass: ['three', 'four'],
}
① 在标签上直接传入自定义的对象名或者数组名。
② data数据中，键是自定义对象名或者数组名，值是{选择器名称：true}或者['选择器名称1'，'选择器名称2']。
③ 简写形式下，操作数组元素，使用数组API方法。
<style>
.one { }
.two { }
.three { }
.four { }
</style>
<body>
<!-- 1.创建标签模板 -->
<div class="box">
<!-- (1)对象形式 -->
<div v-bind:class="objClass">第一个盒子</div>
<button v-on:click="handle1">切换1</button>
<!-- (2)数组形式 -->
<div v-bind:class="arrClass">第二个盒子</div>
<button v-on:click="handle2">切换2</button>
</div>
<!-- 2.引入vue.js -->
<script src="./vue.js"></script>
<!-- 3.创建Vue实例对象 -->
<script>
var vm = new Vue({
el: '.box',
data: {
objClass: { one: true, two: true },
arrClass: ['three', 'four'],
},
methods: {
handle1: function () {
console.log(this.objClass.one);
this.objClass.one = !this.objClass.one;
},
handle2: function () {
this.arrClass.splice(0, 1);
},
},
});
</script>
</body>
4. 数组与对象混合使用
<div v-bind:class="[oneClass,twoClass,{five:isfive}]">第三个盒子</div>
5. 为style绑定对象或存放对象的数组
① 直接在标签内写样式。如果value用到了变量，可以在此 直接使用变量。
注意： 如果没有用v-bind绑定style,则是直接style="width:100px"
<div v-bind:style="{width: widthStyle,height:heightStyle}">第一个盒子</div>
data: {
widthStyle: '100px',
heightStyle: '100px',
}
② 把样式放到一个对象中，标签内调用对象名。
③ 把样式放到多个对象中，标签内调用一个存放对象名的数组。
<div v-bind:style="objStyle">第二个盒子</div>
<div v-bind:style="[objStyle,fontSizeStyle]">第三个盒子</div>
data: {
objStyle: {
width: '100px',
height: '100px',
backgroundColor: 'pink',
},
fontSizeStyle: {
fontSize: '30px',
},
}
<!-- 1.创建标签模板 -->
<div class="box">
<div v-bind:style="{width: widthStyle,height:heightStyle,border:borderStyle}">第一个盒子</div>
<div v-bind:style="objStyle">第二个盒子</div>
<div v-bind:style="[objStyle,fontSizeStyle]">第三个盒子</div>
</div>
<!-- 2.引入vue.js -->
<script src="./vue.js"></script>
<!-- 3.创建Vue实例对象 -->
<script>
var vm = new Vue({
el: '.box',
data: {
widthStyle: '100px',
heightStyle: '100px',
borderStyle: '1px solid red',
objStyle: {
width: '100px',
height: '100px',
backgroundColor: 'pink',
},
fontSizeStyle: {
fontSize: '30px',
},
},
methods: {},
});
</script>
六、v-model数据双向绑定
简述：主要通过 数据劫持 结合 发布-订阅模式 来实现数据双向绑定，核心是 Object.defineProperty()。
首先遍历data对象，用 Object.defineProperty()为每一个属性设置getter和setter，并添加 依赖收集器 用来管理事件的订阅和发布。
每个v-model或者插值表达式都会生成一个 订阅者 用来监听和响应事件。
首次渲染访问数据时会触发 getter，将当前订阅者添加到依赖收集器中。
数据变更相当于 发布者，数据变化时会触发 setter，通知依赖收集器中的所有订阅者更新视图。
七、分支结构
只有符合条件的标签才会渲染到页面。
- v-if
- v-else-if
- v-else
- v-show
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=60&&score<90">一般</div>
<div v-else="score<60">不及格</div>
<div v-show="flag">我是v-show</div>
data: { flag: true, score: 75 }
<!-- 1.创建标签模板 -->
<div class="box">
<div v-if="flag">我是v-if</div>
<div v-if="score>=90">优秀</div>
<div v-if-else="score>=60&&score<90">一般</div>
<div v-else="score<60">不及格</div>
<div v-show="flag">我是v-show</div>
<button v-on:click="handle">显示与隐藏</button>
</div>
<!-- 2.引入vue.js -->
<script src="./vue.js"></script>
<!-- 3.创建vue实例对象 -->
<script>
var vm = new Vue({
el: '.box',
data: { flag: true, score: 75 },
methods: {
handle: function () {
this.flag = !this.flag;
},
},
});
</script>
2. v-show 和 v-if的区别
（1）v-show本质就是标签display设置为none，控制隐藏
- 如果标签元素需要反复进行显示与隐藏，使用v-show。
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
（2）v-if是动态的向DOM树内添加或者删除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
八、循环
1. 循环数组
<li v-for="(item,index) in star" v-bind:key="item.id">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
data: {
star: [
{id:1, name: '王祖贤', age: 18 },
{id:2, name: '吴彦祖', age: 19 },
{id:3, name: '吴磊', age: 22 },
]
}
item：数组元素。名称自定义。
index：元素的索引号。名称自定义。
2. 遍历对象
<li v-for="(value,key,index) in star">{{value+key+index}}</li>
data: {
star: {
name: '吴磊',
age: 22,
hobby: '吃',
},
}
value: 键。
key：值。
index：索引号。
3. v-bind:key的作用
Vue使用虚拟DOM来高效更新真实DOM，当data数据变化时，会生成新的虚拟DOM，并通过Diff算法进行新旧虚拟DOM的对比。key作为节点的唯一标识，可以帮助Vue识别哪些DOM节点发生了改变需要更新，哪些可以复用，提高渲染性能，维护组件状态。
