Vue中的指令

Vue中的指令：指的就是带v-前缀的属性

v-text：不能解析标签，跟插值表达式类似

v-html：可以解析html标签

v-once：只渲染一次，渲染玩之后，数据不在响应式改变

v-pre：添加该指令后，标签内的内容Vue不在解析

 

v-cloak：解决浏览器加载页面时插值表达式的展示问题

1.在Vue加载完之前会存在v-cloak属性

2.Vue加载完之后，v-cloak属性会移出

3.可以通过属性选择器[v-cloak]来实现隐藏与显示（display:none）

4.这种问题只有引入Vue.js方式可能会存在，后期的npm安装方式已经自动帮我们解决掉这个问题

 

v-bind：动态绑定属性及属性值 常用：class、style、src、 ...

v-bind动态绑定class类名：

1.如果绑定时直接传递一个名字 v-bind:class="className"这样的话会将className属性中的值作为类名传递进去

例：

html部分：<div id="box" v-bind:class="className"></div> Vue部分：let box = new Vue({       el:"#box",       data:{         className:"box1"       }     })

 

2.以数组形式传递值，那么在数组中如果传递的是一个名字，则会将该名字的值作为类名使用，如果传递的是一个字符串，该字符串会直接当成类名使用

html部分：<div id="box" v-bind:class="[className,'box2']"></div> 将className的值box1作为类名使用 将box2这个字符直接 Vue部分：let box = new Vue({       el:"#box",       data:{         className:"box1",         className1:"box2"       }     })

 

3.以对象形式传递值，对象的属性名就是要添加的类名，属性值是一个布尔值，如果该值为true表示添加，该值为false表示不添加

 

4.v-bind: 可以简写成一个 :

 

5.v-bind:style="{样式名:样式值}"样式名可以直接写，样式值可以识别Vue中的数据

 

v-bind修饰符

1、prop (property)：隐藏该属性不被用户看见

可以使用自定义属性保存变量，可以防止数据泄漏，防止HTML结构污染

2、sync 可以在子组件直接修改父组件的值

3、camel 特性转换

 

v-if v-else v-else-if v-show

 

1、v-if 后面的值是一个boolean值，如果是true，表示该标签会添加到DOM节点中，如果为false，会从DOM节点中删除

2、v-else 不能单独使用，前面必须有v-if 或者 v-else-if也不需要给值，如果v-if成立 则v-else所在标签会从DOM节点中删除，如果v-if不成立，则v-else所在标签会添加到DOM节点中

3、v-else-if 也不能单独出现，必须有v-if，一般在需要过两种判断情况时才会使用

4、v-show 如果值为true，则使用display进行显示，如果值为false则使用display进行隐藏，标签会一直存在，只是css的显示与隐藏

 

在标签需要频繁进行显示与隐藏的切换时 使用v-show

在标签不是很活跃，只是偶尔需要显示时，用v-if

 

v-for 循环渲染（也叫列表渲染）

1、可以循环渲染数组中的内容

v-for='(item,index) in 数组'

item表示数组的每一项 - index表示数组的索引

2、可以循环渲染对象中的内容

v-for='(value,key) in 对象'

value表示对象的属性值 - key表示对象的属性名

 

3、可以循环渲染一个字符串

v-for='(value,key) in 字符串'

value表示字符串每个字符 - key表示字符的索引

 

4、可以循环遍历一个正整数，表示从1开始循环一直到该正整数为止

v-for='item in 10'

item的值是 从1----10

 

在v-for的使用中 我们一般需要为每一个v-for后面都绑定一个:key='值' 主要作用是为了优化算法 使DOM的渲染更加高效

 

v-for 与 v-if 的同时使用：不建议同时进行使用，v-for的优先级要比v-if的高，v-if要运行在每一个循环出来的标签上，性能会很低

当你想为循环渲染中的某一些标签来设置隐藏与显示时，可以使用这种语法

 

v-on 主要作用就是监听事件

1、方法没有实参,默认会传递一个$event也就是事件对象参数,这时候我们调用这个方法的时候是不需要加括号

v-on:click='fn'

2、方法有实参，这时候$event事件对象就不会再默认传递了,如果我们需要这个时间对象，就必须在调用方法时手动转入$event才可以获取到

v-on:click="fn($event)"

 

v-on的语法糖 @ v-on可以简写成 @ v-on:click='fn'/@click='fn'

 

v-on中的修饰符：

1、stop：表示阻止事件流的产生/阻止事件冒泡

2、prevent：表示阻止浏览器默认事件

3、once：只触发一次事件

4、native：监听组件根元素的原生事件（后期讲组件时会用到）

 

v-model 作用就是用于表单的双向数据绑定

实际上v-model是一个语法糖的形式，是v-bind:value及v-on:input两个语法的结合体

v-model的修饰符：

1、lazy 表示将input事件改变成change事件响应数据

2、number 将输入的内容转换为number类型，只对纯数字有用

3、trim 表示去除用户输入内容的首尾空格

 

 Vue的响应式原理：在Vue中的数据都是响应式的数据，视图变化，数据会同步变化，数据变化，视图也会同步跟着改变

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。