5.1. 基本指令
5.1.1. v-cloak
一般与display：none进行结合使用
作用：解决初始化慢导致页面闪动的最佳实践
上面的代码，当运行的时候，实际上是先在页面上显示v-cloak和{{msg}}，然后当运行到vue实例的时候，将{{msg}}渲染成’ 这是一段文字’，也就是说如果你的网速慢的话，你就会看到{{msg}}然后他会闪动一下渲染成’这是一段文字’，解决办法：
5.1.2. v-once
定义它的元素和组件只渲染一次
上面的msg属性，我们可以在控制台对它的数据进行修改，让它重新渲染
但是使用v-once就只让它渲染一次，也就是初始化的时候你给的那个值，当你再次修改，它将不会再去渲染
<span v-once>{{msg}}</span>
5.2. 条件渲染指令
5.2.1. v-if, v-eles-if ,v-else
v-if后接的是等号：等号后的内容必须是布尔值
v-if的基本用法：
<div id="app">
<p v-if="6<3">{{apple}}</p>
<p v-else-if="6>3">{{orange}}</p>
<p v-else>{{banner}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
apple: '苹果',
orange: '橘子',
banner: '香蕉'
}
})
</script>
v-if的弊端 : Vue在渲染元素时,出于效率考虑，会尽可能地复用已有的元素而非重新渲染，因此会出现乌龙
如：
上面的代码，当点击button时，会切换密码和姓名那个div的显示，
但是当我在姓名里面输入一个名字，点击按钮切换到密码，这个名字还是存在，也就是说这个input框并没有重新渲染，还是复用了之前的
解决办法：给你不需要复用的元素加一个唯一的key，提供key值可以来决定是否复用该元素
5.2.2. v-show
<p v-show="9>a">我被显示</p>
data: {
a: 4
}
当你将a的值改为大于9的数的时候，p隐藏了，但只是display变了
v-if和v-show的比较
v-if: 实时渲染，页面显示就渲染，不显示，我就给你移除
如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染，而v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。所以牵扯到获取数据的操作需要用v-if。
比如上面那个切换姓名和密码的案例，当前如果显示的是姓名，那么就只渲染姓名这一部分，密码就会被移除，反之，相同
v-show: v-show的元素永远存在页面中，只是改变了css的display的属性
- v-if让元素出现/不出现在页面；v-show只是style的显示和隐藏，一直在页面
- 对于一个组件来说，v-if为false的时候是不会去渲染的，也就是说只会执行beforeDestroy和destroyed钩子（如果初始化的时候是false那就什么钩子都不执行），v-if为true的时候才会去渲染，执行其他的钩子
<body>
<div id="app">
<my-a v-if="open"></my-a>
<button @click="open = !open">点我</button>
</div>
<script>
new Vue({
el: '#app',
data: {
open: false
},
components: {
'my-a': {
template: `
<div>aaa</div>
`,
beforeCreate(){
console.log('beforecreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
},
beforeDestroy(){
console.log('beforeDestory')
},
destroyed(){
console.log('destoryed')
}
}
}
})
</script>
</body>
上面的代码如果是页面初始化，就什么也不会打印，当点击按钮时v-if为true，就会打印出beforecreate/created/beforeMount/mounted，然后再次点击v-if为false就会打印出beforeDestory/destoryed
5.3. 列表渲染指令v-for
用法: 当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表渲染指令v-for。
两种使用场景：
- 遍历多个对象
- 遍历一个对象的多个属性
<div id="app">
v-for的用法：v-for一定是写在要遍历的元素上，v-for后接等号，类似于item in items
（1） 遍历多个对象（遍历数组）：
<ul>
<li v-for="todo in todos">{{todo.name}}</li>
</ul>
带索引的写法：括号的第一个是变量，代表item，第二个是index
<ul>
<li v-for="(todo,index) in todos">
{{index}}--{{todo.name}}
</li>
</ul>
（2） 遍历一个对象的多个属性：
<ul>
<li v-for="value in nvshen">{{value}}</li>
</ul>
拿到value,key,index的写法 v-k-i
<ul>
<li v-for="(value,key,index) in nvshen">
{{index}}--{{key}}--{{value}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{name: 'lin',age:21},
{name: 'yong',age:28},
{name: 'ke', age:22}
],
nvshen: {
girl1: '赵丽颖',
girl2: '迪丽热吧',
girl3: '宋祖儿'
}
}
})
</script>
v-for后面如果遍历的是一个数字，那么就代表从1到这个数字
<ul>
//这里就会有4个li，list就是1，2，3，4
<li v-for="list in 4">{{list}}</li>
</ul>
5.4. 数组更新，过滤与排序
<div id="app">
<ul>
<li v-for="num in arr">{{num}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ['one','two','three']
}
})
</script>
执行上面代码，页面显示
改变数组的一系列方法：
• push() 在末尾添加元素，返回数组当前的长度
• pop() 将数组的最后一个元素移除，返回这个元素
• shift() 删除数组的第一个元素
• unshift（）：在数组的第一个元素位置添加一个元素
splice()：可以添加或者删除，返回删除的元素
三个参数：
- 第一个参数：表示开始操作的位置
- 第二个参数表示：要删除的长度
- 第三个为可选参数：当有第三个参数的时候，若第二个参数为0就是添加一个元素
上面的代码就是删除第一个元素one
上面的代码因为第二个参数为0，所以不删除，也就是在索引值为0的位置添加一个one，因为没有删除，所以返回一个空数组
• sort（）：排序
• reverse()：颠倒
当点击数组排序按钮就会调用sort方法，按长度升序排列
点击数组翻转的时候正好反过来
两个数组变动vue检测不到:
- 改变数组的指定项
- 改变数组长度
<button @click="changeOne">改变第一个</button>
<button @click="changeLength">改变数组的长度</button>
changeOne(){
this.arr[0]='dask'
},
changeLength(){
this.arr.length = 1
}
上面的操作不会起任何作用
解决办法：
改变数组指定项：set(要操作的数组，索引号，修改的内容)
Vue.set(app.arr,1,'dask')
修改数组长度：splice
splice后面直接跟一个参数，那就是要修改的长度
app.arr.splice(1)
上面代码arr的长度变成了1
过滤filter
返回数组中含有oo的项{{matchOO}}
data: {
arr: ['pen','pencil','book']
},
computed: {
matchOO:function(){
//book参数代表要过滤的数组里的每一项
return this.arr.filter(function(book){
return book.match(/oo/)
})
}
}
最后页面显示[“book”]
5.5. 方法和事件
5.5.1. 基本用法
如果方法中传入了参数，那么调用你绑定的事件里面使用那个方法必须加括号，上面的代码，如果你没加括号，它就会默认传入了一个原生事件对象event作为参数
5.5.2.修饰符
在vue中传入event对象用 $event
向上冒泡 stop:阻止单击事件向上冒泡
<div @click="oneEvent" class="box">
<button @click.stop="twoEvent">点击按钮</button>
</div>
prevent:提交事件并且不重载页面（写在需要提交的表单form上）
<form action="" @submit.prevent>
<input type="submit" value="提交">
</form>
self:只是作用在元素本身而非子元素的时候调用
<div @click.self="oneEvent" class="box">
<button @click="twoEvent">点击按钮</button>
</div>
上面给父元素添加了self当前的事件就只作用在他自己本身，不作用它的子元素了
once: 只执行一次的方法
<button @click="handle">无限次的执行</button>
<button @click.once="handle">只执行一次</button>
加了once后handle函数只会执行一次，不加你每点击一次就会执行一次
可以监听键盘事件： ——指定的keyCode
<input type="text" @keyup.13="submitMe">
submitMe(){
alert('你按下了enter键')
}
但你input获取焦点后，你按下回车他就会执行submitMe，打印出你按下了enter键
网友评论