title: 第五章.内置指令
tags: 2019-11-20
notebook: Vue
5.1 内置指令
5.1.1 v-clock
- v-cloak是一个不需要表达式的指令
- 在一般情况下,v-cloak是一个解决初始化慢导致页面闪动的最佳实践
- 使用webpack或vue-router时,都是由路由去挂载不同组件.所以不再需要v-cloak
5.1.2 v-once
- v-once也是一个不需要表达式的指令
- 被v-once修饰的元素只在页面初次加载时渲染,当数据变化时不再重新渲染页面,将被视为静态内容
例:
<div id="app" v-once>{{message}}</div>
var app = new Vue({
el: '#app',
data: {
message: '这是一段文本'
},
})
app.message = "文本改变"
页面显示"文本"
5.2 条件渲染指令
5.2.1 v-if、v-else-if、v-else
与JavaScript的if、else if、else类似,vue.js的指令可以在DOM中渲染或销毁元素/组件
例:
<p v-if="status===1">status为1时显示这行</p>
<p v-else-if="status===2">status为2时显示这行</p>
<p v-else>否则显示这行</p>
--------------------------------------------------------
var app = new Vue({
el: '#app',
data: {
count: parseInt(1)
},
computed: {
status: function () {
var _this = this
setInterval(function () {
if (_this.count < 3) {
_this.count++
} else {
clearInterval(this)
}
}, 2000)
console.log(_this.count)
return _this.count
}
}
})
5.2.2 v-show
v-show是将元素display设为none并不是真正销毁元素
5.3 列表渲染v-for
当需要将一个数据遍历或一个对象枚举显示时,会用到v-for列表渲染,其表达式需要配合in使用,类似"item in items"的格式
5.3.1 基本用法
例:
<div id="app">
<ul>
<template v-for="book in books">
<li>书名:{{book.name}}</li>
<li>作者:{{book.author}}</li>
</template>
</ul>
</div>
-------------------------------------------------------
var app = new Vue({
el: '#app',
data: {
books: [
{
name: '《vue.js实战》',
author: '梁澈'
},
{
name: '《JavaScript语言精粹》',
author: 'Douglas Crockford'
},
{
name: '《JavaScript高级程序设计》',
author: 'Nicholas C. Zakas'
}
]
}
})
遍历对象属性
例
<div id="app">
<ul>
<li v-for="(value,key,index) in user">{{value}}---{{key}}:{{index}}</li>
</ul>
</div>
--------------------------------------------------------------------------------
var app = new Vue({
el: '#app',
data: {
user: {
name: '张三',
age: 21,
sex: '男'
}
}
})
遍历整数
<div id="app">
<span v-for="n in 10"> {{ n }} </span>
</div>
5.3.2 数组更新
Vue的核心是数据与视图的双向绑定,当我们修改数组时,vue会检测到数据变化,所以用v-for渲染的视图也会更新.
vue包含了一组观察数据变化的方法,使用他们改变数组也会触发视图更新,
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
5.3.3 过滤和排序
当不想改变原数组,想通过一个数组的副来做过滤或排序的现实时,可以使用计算属性返回过滤或排序后的数组
例
<template v-for="book in filterBooks">
<li>书名:{{book.name}}</li>
<li>作者:{{book.author}}</li>
</template>
----------------------------------------------------------------------
var app = new Vue({
el: '#app',
data: {
books: [
{
name: '《vue.js实战》',
author: '梁澈'
},
{
name: '《JavaScript语言精粹》',
author: 'Douglas Crockford'
},
{
name: '《JavaScript高级程序设计》',
author: 'Nicholas C. Zakas'
}
]
},
computed: {
filterBooks: function () {
return this.books.filter(function (book) {
return book.name.match(/JavaScript/)
})
}
},
})
5.4 方法与事件
5.4.1 基本用法
例
<div id="app">
<p>点击次数:{{counter}}</p>
<button @click="handAdd()">+1</button>
<button @click="handAdd(10)">+10</button>
</div>
--------------------------------------------------------
var app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
handAdd: function (num) {
num = num || 1
console.log(num);
this.counter += num
}
},
})
5.4.2 修饰符
在@绑定的事件后加小圆点“.”,再跟一个后缀来使用修饰符。
- .stop:阻止事件冒泡
- .prevent:提交事件不再重载页面
- .capture:添加事件侦听器时使用事件捕获模式
- .self:只当事件在该元素本身(而不是子元素)触发时触发回调
- .once:只触发一次,组件同样适用
具体用法
<!--阻止单击事件冒泡-->
<a @click.stop="handle"></a>
<!--提交事件不在重载页面-->
<form @submit.prevent="handle"></form>
<!--修饰符可以串联-->
<a @click.stop.prevent="handle"></a>
<!--只有修饰符-->
<form @submit.prevent></form>
<!--添加事件侦听器时使用事件捕获模式-->
<div @click.capture="handle">...</div>
<!--只当事件在该元素本身(而不是子元素)触发时触发回调-->
<div @click.self="handle">..</div>
<!--只触发一次,组件同样适用-->
<div @click.once="handle">...</div>
在表单元素上监听键盘事件时,使用按键修饰符
<!--只有在keycode为13时调用vm.submit()-->
<input @keyup.13="submit">
自己配置具体按键
Vue.config.keyCodes.f1=112
//全局定义后,就可以直接使用@keyup.f1
键盘按键快捷键
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
如下修饰符可以和鼠标配合使用,也可以与其他修饰符组合使用
- .ctrl
- .alt
- .shift
- .meta(Mac下是Command键,Windows下是窗口键)
例
<!--Shift + S-->
<input @keyup.shift.83="handleSave">
<!--Ctrl + Click-->
<div @click.ctrl="doSomething">Do Something</div>