Vue起步知识总结

模板语法

Vue模板语法有2大类:

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

备注: Vue中有很多的指令，且形式都是: v-???，此处我们只是拿v-bind举个例子。

数据绑定的方式

1. 单向绑定(v-bind):数据只能从data流向页面。
2. 双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.

备注：
3. 双向绑定一般都应用在表单类元素上(如: input.select等)
4. v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。

事件的基本使用

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

Vue中的事件修饰符

1. prevent: 阳止默认事件（常用)
2. stop:阻止事件旨泡（常用)
3. once:事件只触发一次（常用）
4. capture:使用事件的捕获模式
5. self:只有event.target是当前操作的元素是才触发事件
6. passive:事件的默认行为立即执行，无需等待事件回调执行完毕

计算属性

1. 定义:要用的属性不存在,要通过已有属性计算得来。
2. 原理:底层借助了objcet.defineproperty方法提供的getter和lsetter.
3. get函数什么时候执行?
   (1). 初次读取时会执行一次。
   (2). 当依赖的数据发生改变时会被再次调用。
4. 优势:与methods实现相比，内部有缓存机制（复用)，效率更高，调试方便。

备注:

1. 计算属性最终会出现在vm上，直接读取使用即可。
2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生

监视属性

1. 当被监视的属性变借时,回调函数自动调用,进行相关操作
2. 监视的属性必须存在,才能进行监视!!
3. 监视的两种写法:
   (1).new Vue时传入watch配置
   (2).通过vm.Swatch监视

深度监视

1. vue中的watch默认不监测对象内部值的改变(一层)
2. 配置deep:true可以监测对象内部值改变(多层)。

备注:

1. Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
2. 使用watch时根据数据的具体结构,决定是否采用深度监视。

computed和watch之间的区别

1. computed能完成的功能,watch都可以完成。
2. watch能完成的功能,computed不一定能完成，例如: watch可以进行异步操作。两个重要的小原则

两个重要的小原则：

1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

条件渲染

v-if

写法：
(1). v-if=“表达式”
(2). v-else-if="“表达式”
(3).v-else="表达式"适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、 v-else一起使用，但要求结构不能被"打断”。

v-show

写法：v-show=“表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

v-show 只是空值 display ,而 v-if是添加或者删除节点，如果频繁的显示或不显示，使用 v-show，效率高

收集表单数据

若:，则v-model收集的是value值，用户输入的就是value值
若:，则v-model收集的是value值，且要给标签配置value值。
若:*
1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值)
2.配置input的value属性:

1. v-model的初始值是非数组，那么收集的就是checked(勾选or未勾选
2. (2)v-model的初始值是数组,那么收集的的就是value组成的数组

备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤

指令

v-html

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

v-cloak

v-cloak指令(没有值):

1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会去掉v-cloak属性。
2. 使用css配合v-cloak可以解决网速慢时典面展示出{{xXxx}}的问题。

v-once

v-once指令:

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

v-pre

v-pre指令:

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