一、基本指令
1､v-cloak
解决初始化慢，页面闪动，一般与display: none 进行结合使用
2､v-once
只渲染一次，后续都不会重新渲染
【Demo 实例 https://jsbin.com/hirage/edit?html,output】
二、条件渲染指令
1､v-if | v-else-if | v-else
v-if 的 弊端：
vue 在渲染元素时 ，复用已有的元素而非重新渲染， 只会渲染变化的元素
解决方法：
加key（唯一的key ），提供key值可以来决定是否复用该元素
2､v-show
只改变了css 属性 display
3､v-if 和 v-show 区别
v-if: 实时渲染，页面显示就渲染，不显示，我就给你移除
v-show: 永远存在 html 文档中，只是改变了 css 的 display 属性
【Demo 实例 https://jsbin.com/kazokob/edit?html】
三、列表渲染指令 v-for
1､场景
遍历多个对象（一定是遍历的数组） or 遍历一个对象的多个属性
2､用法
当要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到v-for
其中v-for 一定是写在要遍历的元素上，类似于 item in items
2.1､ 遍历多个对象 (一定是数组)
<ul> // item:自已定义的变量, items: data中定义的数组，对应了3个对象
<li v-for="item in items">{{ item.name }}</li>
</ul>
//带索引的写法: 括号的第一个变量，代表item，第二个代表 index
<ul>
<li v-for="(item, index) in items">{{index}}--{{ item.name}}</li>
</ul>
2.2､ 遍历一个对象的多个属性
<span v-for="value in items"> {{ value }}</span>
<br>
//拿到value ，key, index 的写法 v-k-i--外开
<div v-for="(value,key,index) in items"> 第{{index}}个女神: -是：{{key}}-{{value}}</div>
【Demo 实例 https://jsbin.com/kazokob/3/edit?html,console,output 】
四、数组更新、过滤与排序
1､push() 在末尾添加元素
2､pop() 将数组的最后一个元素移除
3､shift() 删除数组的第一个元素
4､unshift() 在数组的第一个元素位置添加一个元素
5､splice() 可以添加或者删除函数—返回删除的元素
6､sort() 排序
7､reverse() 倒序
8､filter() 过滤
其中 2个 数组变动 ，vue 检测不到
1､改变数组的指定项
2､改变数组长度
解决
1､ set 可以 改变指定项，如： Vue.set(app.arr,1,”car”)
2､ splice 可以 改变数组长度 ，如：app.arr.splice(1)
附：Vue.set(app.arr,1,”car”)
// 第一个参数 app.arr 是： 要拿到的元素
// 第二个参数 1 是：要改变的数组 index
// 第三个参数 car 是：插入的内容,即赋的值
【Demo 实例 https://jsbin.com/wahocif/1/edit?html,output】
五、方法与事件
v-on绑定的事件类似于原生 的onclick等写法
如果方法中带有参数，调用它时没有加括号，默认传原生事件对象event
//html
<button @click="handle">点我加1</button> // 没加的话，结果是[object MouseEvent]
<button @click="handle()">点我加1</button> // 调用handle时，handle后面的括号一定要加
//js
....
methods:{
handle:function (count) {
count = count || 1;
this.count += count;
}
}
【Demo 实例 https://jsbin.com/becebic/1/edit?html,output】
六、修饰符
在vue中传入event对象用 $event
A、向上冒泡
1､stop 阻止单击事件向上冒泡
2､prevent 提交事件并且不重载页面
3､self 只是作用在元素本身而非子元素的时候调用
4､once 只执行一次的方法
B、监听键盘事件 （指定的keyCode）
vueJS为我们提供了：.enter | .tab |.delete
网友评论