Vue-Directives
Posted bubu-sourire
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-Directives相关的知识,希望对你有一定的参考价值。
- v-cloak
- v-once
- v-if(v-else)
- v-show
- v-for
一、基本指令
v-cloak
作用:解决初始化慢导致的页面闪动,常与display:none结合使用
*加载缓慢的情况下,页面会出现如msg,加载完之后才会显示对应的内容,影响用户体验。v-cloak解决了这个问题。
v-once
作用:定义它的元素只能渲染一次,后续都不会再渲染
例:
<style> [v-cloak]: display: none </style> <div id="app"> <div v-cloak>msg</div> <span v-once>word</span> <hr> <button @click=‘changeEnglish‘>点击修改</button> </div>
new Vue( el: ‘#app‘, data: msg: ‘今天周一‘, word: ‘Today is Monday.‘ , methods: changeEnglish() this.msg = ‘今天周二‘ //中文修改 this.word = ‘Today is Tuesday‘ //v-once 使得英文不会被修改 )
二、条件渲染指令
v-if(v-else)
v-if后面接的是等号,等号后面接的是布尔值;if true显示if后面的内容,if false显示else后面的额内容。
- 真正的渲染
- v-else需要紧跟在v-if后面
- v-else-if(vue.2.1.0新增)
- key管理可复用的元素(key唯一,提供key值来决定是否复用该元素)
例:点击按钮,用户、密码框切换
<div id="app"> <template v-if="ok === ‘you‘"> 用户名:<input type="text" value="请输入用户名" key="userName"> </template> <template v-else> 密码:<input type="password" value="" key="userPass"> </template> <button @click=‘clickChange()‘>点击切换</button> </div>
new Vue( el: ‘#app‘, data: ok: ‘you‘ , methods: clickChange() if (this.ok === ‘you‘) this.ok = ‘‘ else this.ok = ‘you‘ )
这里如果不加key,会有bug
*如果想跟踪每个节点的身份,从而重用或重新排列现有元素,可使用key。
*在表单或者选框中,加上key,可以使得原先填写的内容或勾选的选项,虽有顺序或切换的变化,但是原先填写的内容或勾选处始终跟着原来对应的项。
v-show
- 简单的切换display属性
- v-show=‘条件’ 当条件为true时,则内容显现
- v-show不支持template语法
- v-show不支持v-else
<span v-show=‘3>1‘>num</span>
总结:
v-if
- 当条件不成立时,不会渲染
- 切换开销较大,适合不太变化的场景
- 实时渲染:页面显示,元素渲染;不显示,元素移除(切换用户、密码的例子可以看出,当从用户切换到密码时,页面中用户代码会被移除)
v-show
- 无论成不成立都会渲染
- 首次渲染开销较大,但切换开销较小,因此适合经常变化的场景
- 只是改变了display的属性,元素会一直在页面中
应用:
- 渲染的结果根据时间而变化,推荐v-if
- 频繁切换页面推荐v-show
三、列表渲染指令
v-for
应用:
-
当需要将一个数组遍历或枚举一个对象属性的时候循环显示时,就会用列表渲染指定v-for。
-
两种使用场景:
- 遍历多个对象
遍历多个对象,遍历的一定是数组
这里的fruit值的是 name:‘banana‘ ...
<div id="app"> <ul> <li v-for=‘fruit in fruits‘>fruit.name</li> </ul> </div>
new Vue( el: ‘#app‘, data: fruits:[ name:‘banana‘, name:‘apple‘, name:‘orange‘ ] )
带索引的写法
<div id="app"> <ul> <li v-for=‘(fruit,index) in fruits‘>index---fruit.name</li> </ul> </div>
- 遍历一个对象的多个属性
<div id="app"> <ul> <li v-for=‘value in fruits‘>value</li> </ul> </div>
new Vue( el: ‘#app‘, data: fruits: a:‘banana‘, b:‘apple‘, c:‘orange‘ )
带value key index的写法(v--k--i 顺序不可变)
<div id="app"> <ul> <li v-for=‘(value,key,index) in fruits‘>第index个是value,键是key</li> </ul> </div>
new Vue( el: ‘#app‘, data: fruits: a:‘banana‘, b:‘apple‘, c:‘orange‘ )
四、数组更新检测
<div id="app"> <div v-for="fruit in arr">fruit</div> </div>
new Vue( el: ‘#app‘, data: arr: [‘apple‘, ‘banana‘, ‘orange‘] )
以下代码均在此代码基础上修改
- 变异方法
.push() 往数组的末尾添加一个元素,返回的是添加完元素后整个数组的长度
.pop() 将数组的最后一个元素删除,返回的是删除的那个元素
.shift() 将数组的第一个元素删除,返回的是那个删除的元素
.unshift() 在数组的第一个元素位置添加一个元素,返回的是添加完元素后整个数组的长度
.splice()
含三个参数:
第一个参数表示开始操作的位置(索引)
第二个参数表示要操作的长度
第三个参数表示可选参数(可以添加一个元素,但是这个元素会自动跳到数组索引为0的位置上)
.sort() 给数组排序
.reverse() 翻转数组
<div id="app"> <div v-for="fruit in arr">fruit</div> <button @click=‘num1‘>点击排序</button> <button @click=‘num2‘>点击翻转</button> </div>
var app = new Vue( el: ‘#app‘, data: arr: [‘apple‘, ‘banana‘, ‘pizza‘], , methods: num1(a, b) this.arr.sort((a, b) => return a.length - b.length ) , num2() this.arr.reverse() )
- 修改数组的某一项内容
Vue.set(该数组,要修改的那一项的索引,替换的内容)
Vue.set(app.arr,1,"mango")
- 修改数组的长度
.splice(索引) 从哪一项开始删除后面的内容,包括这一项
app.arr.splice(1) //["banana","pizza"] 页面上还有apple
- 重塑数组(不会改变原来的数组,而是返回一个新的数组)
.filter()过滤
matchpp
computed: matchpp() return this.arr.filter(function(pro) return pro.match(/pp/) )
.concat() 合并
...... matchpp() return this.arr.concat(‘water‘,‘juice‘) //[ "apple", "banana", "pizza", "water", "juice" ] ......
.slice(开始索引,结束索引) 返回选定的元素
...... matchpp() return this.arr.slice(1,2) //[ "banana" ] ......
五、方法与事件
例:点击按钮数字加1
<div id="app"> count <button @click=‘add1(1)‘>点击加1</button> </div>
new Vue( el: ‘#app‘, data: count: 0 , methods: add1() this.count += 1 , // addNum(count) // count = count || 1 // this.count += count // )
*如果方法中带有参数,但是调用时没有加括号,默认传原生事件对象event
六、修饰符
.stop
阻止单击事件向上冒泡
<div id=‘app‘> <div @click=‘divClick‘ style=‘width:100px;height:100px;background:skyblue‘> <button @click.stop=‘btnClick‘>点击</button> </div> </div>
new Vue( el: ‘#app‘, methods: divClick() alert(‘div被点击了‘) , btnClick() alert(‘btn被点击了‘) )
.prevent
提交事件并且不重载页面
<div id=‘app‘> <form action="" @submit.prevent=‘hangle‘> <button type=‘submit‘>提交</button> </form> </div>
new Vue( el: ‘#app‘, methods: hangle() alert(‘sub提交‘) )
只是作用在元素本身而非子元素的时候调用
<div id=‘app‘> <div @click.self=‘divClick‘ style=‘width:100px;height:100px;background:skyblue‘> <button @click=‘btnClick‘>点击</button> </div> </div>
.once
<button @click.once=‘aaa‘>这个按钮只能执行一次哦</button>
可以监听键盘事件:
<input @keyup.13 = ‘submitMe‘> <input @keyup.enter = ‘submitMe‘>
submitMe() alert(‘enter被按了‘)
*vue提供了一些如enter,可以直接使用
以上是关于Vue-Directives的主要内容,如果未能解决你的问题,请参考以下文章