Vue 中的内置指令 demo
通过 demo 了解 Vue 中一些常用的内置指令。
涉及到 v-cloack / v-once / 条件循环指令(v-if / v-else-if / v-else) / v-show / 列表遍历渲染 (v-for) / 数组更新、过滤排序 / 方法和事件 (修饰符) 等...
以下是全部的 demo：
v-cloak
作用：解决初始化慢导致页面闪动的最佳实践（初始化慢时会显示未渲染好的页面，而 v-cloak 则让没有渲染好的部分隐藏起来，渲染好之后再去掉 v-cloak，让页面正常显示）
常与 display：none 搭配
<style>
[v-cloak]{
display:none;
}
</style>
<div v-cloak>{{ msg }}</div>
v-once
作用：定义它的元素和组件只渲染一次
<div v-once>{{ msg }}</div>
v-if / v-else-if / v-else
条件循环指令：
<div v-if='isActive'>{{ msg }}</div>
<div v-else-if='6>3'>{{ oncedata }}</div>
<div v-else>如果前面两个都是 false，那就显示这个</div>
<button @click='changeMsg'>点我切换</button>
JS:
data:{
msg:'this',
oncedata:'is',
isActive:true
},
methods:{
changeMsg:function(){
this.isActive = !this.isActive
}
}
v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因
此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了
解决方法：提供key值可以来决定是否复用该元素
<div v-if='type==="name"'>
用户名 ：<input type="text" placeholder="Username" key='username'>
</div>
<div v-else>
密码 ：<input type="text" placeholder="Password" key='password'>
</div>
<button @click='changeInput'>点击切换输入栏</button>
JS:
data:{
type:'name'
},
methods:{
changeInput:function(){
this.type = (this.type==='name'?'password':'name')
}
}
v-show
作用：控制元素是否显示
<div v-show='isActive'>{{ msg }}</div>
data:{
isActive:true
}
v-show 和 v-if 的区别
v-show 和 v-if 的作用同样是控制元素的显示，但是：
v-if 是将元素给移除，即 DOM 树中并不会渲染这个元素
v-show 是将元素给隐藏，即 DOM 树中渲染了这个元素，只是改变了 css 的 display 的属性
v-for
列表渲染指令
- 遍历多个对象
<ul>
<li v-for='item in objs'>{{ item.name}}</li>
</ul>
data:{
objs:[
{name:'Li'},
{name:'Wang'},
{name:'Chen'}
]
}
添加索引：
<ul>
<li v-for='(item,index) in objs'>{{index}}-{{ item.name}}</li>
</ul>
- 遍历对象属性
直接打印属性的值：
<ul>
<li v-for='value in obj'>{{ value }}</li>
</ul>
data:{
obj:{
name:'zhangsan',
age:23,
gender:'male'
}
}
添加键和索引：
<ul>
<li v-for='(value,key,index) in obj'>{{ index }}-{{ key }}-{{ value }}</li>
</ul>
数组更新、过滤和排序
<ul>
<li v-for='value in arr'>{{ value }}</li>
</ul>
data:{
arr:[213,345,3465,67,457,6,7,687,]
}
- push() 在末尾添加元素
methods:{
arrpush:function(){
this.arr.push(2334)
}
}
- pop() 将数组的最后一个元素移除
methods:{
arrpop:function(){
this.arr.pop()
}
}
- shift() 删除数组的第一个元素
methods:{
arrshift:function(){
this.arr.shift()
}
}
- unshift（）：在数组的第一个元素位置添加一个元素
methods:{
arrunshift:function(){
this.arr.unshift(234234)
}
}
- splice() ：可以添加或者删除函数—返回删除的元素
这个方法接受三个参数：
第一个参数 表示开始操作的位置
第二个参数表示：要操作的长度
第三个为可选参数：
methods:{
arrsplice:function(){
this.arr.splice(1,1,2)
}
}
// 操作数组的下标为 1 的数组成员之后的 1 个数组成员，把他的数值变为 2
- sort() ：排序
methods:{
arrsort:function(){
this.arr.sort(function(a,b){
return a > b
})
}
}
// 数组成员由大到小排列
- reverse()
数组翻转
methods:{
arrreverse:function(){
this.arr.reverse()
}
}
注意
两个数组变动vue检测不到:
-
改变数组的指定项
-
改变数组长度
解决方法：
set :
改变指定项： Vue.set(app.arr,1,”car”)
splice :
改变数组长度: app.arr.splice(1)
方法和事件
基本用法：
记得：如果方法中带有参数，但是你没有加括号，默认传原生事件对象event
data:{
cout:0
},
methods:{
handle:function(cout){
count = count || 1
this.cout = this.cout + count
}
}
html:
<button @click='handle(4)'>点击 +4</button>
修饰符：
多用于事件中：
- stop 阻止事件向上冒泡
不然他会执行完点击按钮的事件后，继续执行父元素的事件
正确做法：添加修饰符 stop：
<div @click='divClick' style='background-color:red;100px;height:100px'>
<button @click.stop='buttonClick'>点击就送</button>
</div>
- prevent 提交事件并且不重载页面
当我们页面中有表单，点击表单提交按钮 submit 时，要阻止页面重载：
<form action='' @submit.prevent='handle'>
<button type='submit'>提交表单</button>
</form>
methods:function(){
handle:function(){
alert('不需重载页面')
}
}
- self 只是作用在元素本身而非子元素的时候调用
<div @click.self='divClick' style='background-color:red;100px;height:100px'>
<button @click.stop='buttonClick'>点击就送</button>
</div>
- once 只执行一次的方法
<div @click.once='changeNum'>{{ num }}</div>
data:{
num:0
}
methods:{
changeNum:function(){
this.num = this.num + 1
}
}
还可以使用 enter 等方法监听键盘事件：
<div @enter='xxx()'>{{ num }}</div>
关于 Vue 的一些常用内置指令就整理到这里了，等接触到新的再添加~。