1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性
(1) 每一个HTML标签都有自己的原生默认属性
HTML标签的每一个属性都有自己独特的功能
例如 img标签的src属性，a标签的href属性
(2) Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能
2.在Vue中每一个指令都是以v-开头 （用于区分HTML标签原生属性）
语法 ： 指令名=“指令值” 例如 v-text = msg
3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。
v-text指令
作用: 设置元素的innerText
语法: v-text="值"
注意点: v-text与插值{{}}区别
v-text: 替换整个innerText
插值{{}}: 只能替换大括号的部分,局部替换
v-html指令
作用: 设置元素的innerHTML
语法: v-HTML="值"
注意点: v-text与插值{{}}区别
v-text: 不能识别字符串中的标签
v-html: 可以识别字符串中的标签
v-on指令（绑定事件）
作用: 给元素绑定事件
语法:
标准语法 v-on: 事件类型='事件处理函数'
简洁语法 @事件类型='事件处理函数'
注意点:
(1)事件类型不要on click mouseenter
(2)事件处理函数写在vue实例的methods对象中
vue事件修饰符
作用: 修饰事件(阻止冒泡 默认跳转)
语法: @事件类型.修饰符 = '事件处理方法'
常用:
.stop: 阻止冒泡
.prevent: 阻止默认form和a跳转
.enter: 监听enter按键
vue方法中的this
1.vue事件方法中的this指向 ： vue实例
2.vue事件方法中访问data对象中的成员 : this.属性名
vue会将data对象与methods对象中的成员 平铺到 vue实例中
3.注意点： 如果事件处理代码没有写到methods中，而是写在行内则不需要this 就可以访问data对象中的成员
vue事件传参
1.vue中每一个事件方法都有一个默认参数 ， 就是事件对象
2.如果主动给事件传参，则传递的参数 会 覆盖默认参数
3.如果希望同时传入事件对象 + 自定义参数，则可以使用 $event
v-on:click="doClick($event,自定义参数)"
语法: @事件名='事件处理函数(参数)'
注意点:
如果事件处理函数没有传参,默认参数是事件对象
如果事件处理函数有传参,则会覆盖默认的事件对象
如果同时获取 传参+事件对象 ,则可以使用 $event
v-bind指令 (绑定标准属性的值)
默认情况下，HTML标签原生属性无法获取vue中的数据
如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令
v-bind作用: 原生的属性也可以使用vue的数据
v-bind语法:
标准语法 v-bind:原生属性名="值"
简写语法 :原生属性名="值"
vue样式绑定
v-bind样式绑定: 如果属性名为true,则加载类名,否则不加载
:class="{类名1:属性名,类名2:属性名}"
注意点: 如果类名有-,则需要添加 引号
v-for指令(列表渲染)
v-for作用: 根据数组长度 重复渲染数据
v-for语法(列表渲染):
v-for="(item,index) in 数组名"
v-for注意点: v-for写在哪个标签上面,就会重复生成哪个标签
v-model指令(双向数据绑定)
1.v-model作用 ： 双向数据绑定
2.双向绑定:
2.1 修改表单的值，data中的数据会自动变化
2.2 修改data中的数据，表单的值也会改变
3.语法： v-model="变量名"
4.注意点：
a.v-model只能用于表单元素
b.变量名要定义在data对象中
5.v-model双向绑定意义: 可以快速 获取/设置 表单的值
v-if指令
1.v-if指令作用: 根据条件渲染元素
2.语法:
2.1 单分支: v-if="布尔值"
2.2 双分支: v-else
2.3 多分枝: v-else-if="布尔值"
3.注意点: v-else前面一定要有v-if或者v-else-if
v-show指令
1.v-if指令作用: 设置元素的display实现
2.语法: v-show="布尔值"
3.注意点: v-if与v-show的区别
v-if: 根据条件渲染. 如果条件成立才会渲染,条件不成立不渲染
v-show: 一定会渲染. 只是设置元素的样式display
v-cloak指令(了解)
1.v-cloak指令作用: 设置元素在vue渲染之前的样式
2.语法:
2.1 给元素添加v-cloak指令: v-cloak
2.2 写css样式: [v-cloak]{初始样式}
3.注意点: 就是属性选择器
vue在完成加载后会移除这个行内属性
v-once指令(了解)
1.v-once指令作用: 让元素只被vue渲染一次
2.语法: v-once
3.场景: 商品显示原价和折扣价,当价格变化的时候,原价始终不变(只需要渲染一次)
v-pre指令(了解)
1.v-pre指令作用: 让元素不被vue渲染
2.语法: v-pre
3.场景: vue即使博客类网页,希望告诉读者vue语法.就希望vue语法不需要渲染
vue的key值作用
1.key值作用: 相当于给元素一个身份证,可以让vue虚拟算法更好识别并渲染元素
*在同一个父元素中,子元素的key值必须是唯一的(key值最好是字符串或数字)
2.场景:
2.1 v-if指令: 切换盒子的是谷歌,如果盒子内部dom结构一致,vue算法可能不会更新dom
2.2 v-for: 写v-for指令最好添加key值(推荐字符串或者数字)
在vue中有以下几种常用修饰符
1. 事件修饰符 - 处理 DOM 事件细节
2. 按键修饰符 - 为 v-on 在监听键盘事件时添加按键修饰符
3. 系统修饰键 - 实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
4. 鼠标按钮修饰符 - 限制处理函数仅响应特定的鼠标按键
5. 表单修饰符 - v-model增强的修饰符
一、事件修饰符
1. .stop - 阻止单击事件继续传播, 也就是阻止冒泡
2. .prevent - 提交事件不再重新加载页面, 可以用来阻止表单提交的默认行为
注意点: .stop和.prevent可以串联在一起使用,都会生效
3. .capture - 内部元素触发的事件先在此处理，然后才交由内部元素进行处理
4. .self - 只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的
注意点: 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
5. .once - 点击事件将只会触发一次, 不只能对原生DOM时间生效,还可以用在自定义组件上
6. .passive - 立即触发默认行为,能够提升移动端性能,和.prevent一起使用时.prevent会被忽略并警告
7. .native - 使用时将被当做原生的HTML标签看待,绑定事件可以生效
二、按键修饰符
1. .keyup - 键盘抬起
2. .keydow - 键盘按下
3. 按键码 - 在按键修饰符后面添加,用于监听键盘按下哪个键
常用按键码:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
三、系统修饰键
.ctrl
.alt
.shift
.meta
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
注意点: 修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。
.exact 修饰符 - 使用系统修饰符时使用可以单击系统修饰键触发,不适用系统修饰符时使用
四、鼠标按键修饰符
.left - 只有鼠标左键点击触发
.right - 只有鼠标右键点击触发
.middle - 只有鼠标中键点击触发
五、表单修饰符
1. .lazy - 在表单输入时不会马上显示在页面,而是等输入完成失去焦点时才会显示在页面
2. .trim - 过滤表单输入时前后的空格
3. .number - 限制输入数字或将输入的数据转为数字
双向数据绑定
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
具体步骤：
第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步： Watcher(订阅者)是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
数据代理
数据代理：通过一个对象代理对另一个对象属性的操作
案例：通过操作obj2的属性来操作obj1的属性
<script>
let obj1 = {x:18}
let obj2 = {y:20}
Object.defineProperty(obj2, "x", {
//简写
get(){
return obj.x
},
//简写
set(value){
obj.x = value
}
})
</script>
3. Vue为什么要做数据代理?
1. 假设Vue没做数据代理
因为data不能被访问，所以必须通过vm身上的_data 来访问data中的数据
_data中的数据就是data中的数据
<body>
<div id="root">
<!--如果不做数据代理-->
<h2>名字:{{_data.name}}</h2>
<h2>地址:{{_data.address}}</h2>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name: 'shaka',
address: '辽宁东北'
}
})
</script>
2. 实例情况(Vue做了数据代理)
Vue让vm代理对data对象中属性的操作（读/写），因此vm身上出现了data中的数据
目的：简化编码，能够通过vm直接访问data中的数据
vm: Vue实例对象
<body>
<div id="root">
<!--如果不做数据代理-->
<h2>名字:{{name}}</h2>
<h2>地址:{{address}}</h2>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name: 'shaka',
address: '辽宁东北'
}
})
</script>
4. Vue2实现数据代理的原理
通过Object.defineProperty()把data对象中所有属性添加到Vue实例对象上
为每一个添加到Vue实例对象上的属性，都指定一个getter/setter(也在Vue实例对象上)
在getter/setter内部去操作（读/写）data中对应的属性
vue2对defineProperty方法进行了增强