基本指令
v-cloak
v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除 , 常和 css的 display: none;配合使用。
<div id="app" v-cloak>
{{message}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'这是一段文本'
}
})
</script>
当网速较慢Vue.js 文件还没加载完时,在页面上会显示{{message }}的字样,直到 Vue 创建实例、编译模板时, DOM 才会被替换,所以这个过程屏幕是有闪动的。只要加一句 css 就可以解决这个问题。
[v-cloak]{
display:none;
}
在一般情况下, v-cloak 是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用,但是在具有工程化的项目里,比如webpack 和 vue-router 中,项目的 HTML结构只有一个空的 div 元素,剩余的内容都是由路由去挂载不同组件完成的,所以不再需要 v-cloako。
v-once
v-once 也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容。
<div id="app">
<span v-once>{{message}}</span>
<div v-once>
<span v-once>{{message}}</span>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'这是一段文本'
}
})
</script>
条件渲染指令
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>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
status:1
}
})
</script>
如果一次判断的是多个元素,可以在 Vue.js内置的<template>元素上使用条件指令,最终渲染的结果不会包含该元素
<div id="app">
<template v-if="status===1">
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
</template>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
status:1
}
})
</script>
Vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,如果你不希望这样做,可以使用 Vue扣提供的 key 属性,它可以让你自己决定是否要复用元素, key 的值必须是唯一的
<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="handleToggleClick">切换输入类型</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
type:'name'
},
method:{
handleToggleClick:function(){
this.type = this.type==='name'?'mail':'name';
}
}
})
</script>
v-show
v-show 的用法与 v-if 基本一致,只不过 v-show 是改变元素的 css 属性 display。当 v-show 表达式的值为 false 时, 元素会隐藏,查看 DOM 结构会看到元素上加载了内联样式 display : none;
<div id="app">
<p v-show="status===1">当status为1时显示该行</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
status:2
}
})
</script>
<!--渲染结果-->
<p style="display:none;">当status为1时显示该行</p>
列表渲染指令 v-for
基本用法
<div id="app">
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
books:[
{name:'《西游记》'},
{name:'《三国演义》'},
{name:'《红楼梦》'},
{name:'《水浒传》'}
]
}
})
</script>
<!-- v-for 的表达式支持一个可选参数作为当前项的索引-->
<div id="app">
<ul>
<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
books:[
{name:'《西游记》'},
{name:'《三国演义》'},
{name:'《红楼梦》'},
{name:'《水浒传》'}
]
}
})
</script>
<!-- v-for 也可以用在内置标签<template>上 ,将多个元素进行渲染-->
<div id="app">
<ul>
<template v-for="book in books">
<li>书名:{{book.name}}</li>
<li>作者:{{book.author}}</li>
</template>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
books:[
{name:'《西游记》',author:'吴承恩'},
{name:'《三国演义》',author:'罗贯中'},
{name:'《红楼梦》',author:'曹雪芹'},
{name:'《水浒传》',author:'施耐庵'}
]
}
})
</script>
<!-- 对象的属性也是可以遍历的 -->
<div id="app">
<span v-for="value in user">{{value}}</sapn>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
user:{
name:'Aresn',
gender:'男’,
age:20
}
})
</script>
<!--遍历对象属性时,有两个可选参数,分别是键名和索引-->
<div id="app">
<span v-for="(value,key,index) in user">{{value}}</sapn>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
user:{
name:'Aresn',
gender:'男’,
age:20
}
})
</script>
<!--v-for 迭代整数-->
<div id="app">
<span v-for="n in 10">{{n}}</span>
</div>
<script>
var app = new Vue({
el:'#app'
})
</script>
数组更新
Vue 的核心是数据与视图的双向绑定,当我们修改数组时,Vue 会检测到数据变化,所以用v-for 渲染的视图也会立即更新。 Vue 包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新:
• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
• filter()
• concat()
• slice()
<div id="app">
<ul>
<template v-for="book in books">
<li>书名:{{book.name}}</li>
<li>作者:{{book.author}}</li>
</template>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
books:[
{name:'《Vue.js实战》',author:'梁灏'},
{name:'《JavaScript语言精粹》',author:'Douglas Crockford'},
{name:'《JavaScript高级程序设计》',author:'Nicholas C.Zakas'}
]
}
});
app.books = app.books.filter(function(item){
return item.name.match(/JavaScript/);
});
</script>