Vue.js的指令
指令(Directives)是vue.js模板中最常用的一项功能,它带有前缀v-,指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上,他主要包括13种系统指令分别为:v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-pre、v-cloak、v-once。
1.v-model:
<div id="app">
<input type="text" v-model="name" placeholder="your name">
<h3>hellow, {{ name }}</h3>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
name:''
}
})
</script>
v-model就是双向数据绑定
2.v-if:
<div id="app">
<p v-if="show">显示</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
show:true
}
})
</script>
当数据show为true时,p元素会被插入,为false时就会被移除。数据驱动DOM是vue.js的核心理念,所以不到万不得已,
不要主动操作DOM,只需要维护好数据,DOM的事vue会自己处理好的
3.v-bind:
<div id="app">
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
url:'https://www.github.com',
imgUrl:'http://xxx.xxx.xx/img.png'//本地图片路径或者网页图片路径
}
})
</script>
v-bind的基本用途是动态更新HTML元素上的属性,比如id,class等
4.v-on
<div id="app">
<p v-if="show">点击隐藏,我就消失咯~点击出现,我就出现咯~</p>
<button v-on:click="close">隐藏</button>
<button v-on:click="textShow">出现</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
show:true
},
methods:{
close:function(){
this.show = false;
},
textShow:function(){
this.show = true;
}
}
})
</script>
在button按钮上,使用v-on:click给该元素绑定了一个点击事件,在普通元素上,v-on可以监听原生的DOM事件
,除了click外,还有dblclick,keyup,mousemove等。表达式可以是一个方法名,这些方法都写在Vue实例的methods
属性内,并且是函数的形式,函数内的this指向的是当前Vue实例本身,所以可以直接使用this.xxx的形式来访问或者修改
数据,如上例中的this.show=false和this.show=true,把数据show修改为了false,点击隐藏按钮,文本p元素就被隐藏了
吧数据修改为true,点击出现按钮,文本p元素就被展示出来了。
5.v-cloak:
<div id="app" v-cloak>
{{message}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'随便一段话'
}
})
</script>
v-cloak其实是不需要表达式的,在这里我们添加了指令v-cloak,但是并没有起到作用,当网速比较慢,vue.js
文件还没有加载完成时,在页面会显示{{message}}的字样,直到Vue创建实例,编译模板时,DOM才会被替换
所以这个过程屏幕是有闪动的,只需要加一句css就可以解决.
[v-cloak]{
display:none;
}
6.v-once:
<div id="app">
<span v-once>{{message}}</span>
<div v-once>
<span>{{message}}</span>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message:'随便一段话'
}
})
</script>
v-once也是一个不需要表达式的命令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点
。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容,v-once在业务中也很少用到,当你需要进一步优化
性能时,可能会用到。
7. v-if,v-else-if,v-else
<div id="app">
<p v-if="status===1">当status为1显示</p>
<p v-else-if="status===2">当status为2显示</p>
<p v-else>否则显示这行</p>
//注意,vue.js中判断相等是===而不是==也不是=
</div>
<script>
var app = new Vue({
el: '#app',
data: {
status:1//这里可以根据上面条件来写
}
})
</script>
需要注意的是:v-else-if要紧跟v-if,v-else要紧跟c-else-if或v-if
Vue在渲染元素时,出于效率考虑,会尽可能的复用已有的元素而不是重新渲染,比如:
<div id="app">
<template v-if="type==='name'">
<label>用户名:</label>
<input placeholder="请输入用户名" key="name-input">
</template>
<template v-else>
<label>邮箱:</label>
<input placeholder="请输入邮箱" key="mail-input">
</template>
<button @click="change">切换</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
type:'name'
},
methods:{
change:function(){
this.type = this.type==='name'?'mail':'name';
}
}
})
</script>
切换前的图:
切换后的图:
如图所示,输入内容后,点击切换时输入的内容也会被删除,不过label的元素仍然是被复用的,因为没有添加key属性
8.v-show:
<div id="app">
<p v-show="status===1">当status为1时显示</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
status:1
}
})
</script>
需要注意的是:v-show不能在<template>上使用!!!
v-show的用法与v-if基本一致,只不过v-show是改变元素的css属性display。当v-show表达式的
值为dalse时,元素会被隐藏,查看DOM结构会看到元素上加载了内联样式display:none。
扩展(v-if与v-show的选择):
v-if和v-show具有类似的功能,不过v-if才是真正的条件渲染,他会根据表达式适当的销毁或重建元素及绑定事件或子组件。
若表达式的初始值为false,则一开始元素/组件并不会被渲染,只有当条件第一次变为真时才开始编译。而v-show只是简单的
css属性切换,无论条件真与否,都会被编译。相比之下,v-if更适合条件不经常改变的场景,因为他切换开销相对较大,而
v-show适用于频繁的切换条件。
9.v-for
<div id="app">
<ul>
<li v-for="text in texts">{{text.name}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
texts:[
{name:'Hello word!'},
{name:'java'},
{name:'vue.js'}
]
}
})
</script>
当需要将一个数组遍历或枚举一个对象循环实现时,就会用到列表渲染指令 v-for。它的表达式需结合in来
使用,类似 item in items的形式。
10.v-text:
<div id="app">
<p>{{message}}</p>
<p v-text="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message:'Hello word!'
}
})
</script>
从上面代码不难看出,v-text和{{}}是一个等价的,即这俩种方法都可以实现获取到data里面的数据。
唯一的区别就是{{}}叫模板,而v-text叫做指令。
11.v-html:
<div id="app">
<div v-html='html'></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
html:'<p style="color:#ff6666;">Hello Word!</p>'
}
})
</script>
v-html插入的是html代码,如上面代码p标签中,用style定义了颜色,显示的文本就是Hello word!所带
的颜色,说白了就是可以添加一些样式。
12.v-pre:
<div id="app">
<p v-bind:align="message" v-pre>v-pre指令</p>
</div>
<script>
app = new Vue({
el: '#app',
data: {
message:'center',
}
})
</script>
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有
指令的节点会加快编译。