目录

• • Vue模板语法
  • Vue中有2种数据绑定的方式
  • data与el的2种写法
  • 事件的基本使用：
  • 计算属性：
  • 监视属性watch：
  • vue.set()用法
  • 指令：
  • 生命周期：

Vue模板语法

1. 插值语法：
   功能：用于解析标签体内容。
   写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2. 指令语法：
   功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
   举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，
   且可以直接读取到data中的所有属性。
   备注：Vue中有很多的指令，且形式都是：v-???

Vue中有2种数据绑定的方式

1. 单向绑定(v-bind)：数据只能从data流向页面。
2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
   备注：
   1.双向绑定一般都应用在表单类元素上（如：input、select等）
   2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

data与el的2种写法

1. el有2种写法
   (1).new Vue时候配置el属性。
   (2).先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。
2. data有2种写法
   (1).对象式
   (2).函数式
   如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3. 一个重要的原则：
   由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

事件的基本使用：

4. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
5. 事件的回调需要配置在methods对象中，最终会在vm上；
6. methods中配置的函数，不要用箭头函数！否则this就不是vm了；
7. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
8. @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

计算属性：

用已有的属性经过加工计算生成一个全新的属性称作计算属性。

1. 定义：要用的属性不存在，要通过已有属性计算得来。
2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3. get函数什么时候执行？
   (1).初次读取时会执行一次。
   (2).当依赖的数据发生改变时会被再次调用。
4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5. 备注：
   1.计算属性最终会出现在vm上，直接读取使用即可。
   2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

监视属性watch：

1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2. 监视的属性必须存在，才能进行监视！！
3. 监视的两种写法：
   (1).new Vue时传入watch配置
   (2).通过vm.$watch监视
4. 深度监视：
   (1).Vue中的watch默认不监测对象内部值的改变（一层）。
   (2).配置deep:true可以监测对象内部值改变（多层）。

vue.set()用法

• vue.set使后添加的数据具有getter和setter，可以响应式
• vue.set(对谁添加属性，添加的属性名，属性值);也可以修改属性（少）
• 局限：
  • vue.set()只能给data里的某一个对象添加属性，不能给data追加属性
  • target不允许是vm和vm.data

指令：

• v-bind : 单向绑定解析表达式, 可简写为 :xxx

• v-model : 双向数据绑定

• v-for : 遍历数组/对象/字符串

• v-on : 绑定事件监听, 可简写为@

• v-if : 条件渲染（动态控制节点是否存存在）

• v-else : 条件渲染（动态控制节点是否存存在）

• v-show : 条件渲染 (动态控制节点是否展示)

• v-text指令：
  1.作用：向其所在的节点中渲染文本内容。
  2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

• v-html指令：

  1. 作用：向指定节点中渲染包含html结构的内容。
  2. 与插值语法的区别：
     (1)v-html会替换掉节点中所有的内容，{{xx}}则不会。
     (2).v-html可以识别html结构。
  3. 严重注意：v-html有安全性问题！！！！
     (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
     (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

• v-cloak指令（没有值）：
  1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

• v-once指令：
  1.v-once所在节点在初次动态渲染后，就视为静态内容了。
  2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

• v-pre指令：
  1.跳过其所在节点的编译过程。
  2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

生命周期：

1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。

2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4. 生命周期函数中的this指向是vm 或 组件实例对象。

5. 常用的生命周期钩子：
   1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
   2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

6. 关于销毁Vue实例
   1.销毁后借助Vue开发者工具看不到任何信息。
   2.销毁后自定义事件会失效，但原生DOM事件依然有效。但不会更新显示到屏幕上
   3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。