作用：为HTML元素绑定事件监听
指令
1、v-text：解析文本
<span v-text="text"></span>
等同于
<span>{{ v-text }}</span>
2、v-html：解析 html 标签。
html部分
<p v-html="html"></p>
js部分
data () {
return {
html: '<span>v-html</span>'
}
},
3、v-if：条件渲染，通过判断真假来实现显示与隐藏
html部分
<p v-if="if"></p>
js部分
data () {
return {
if: true // 显示
}
},
4、v-else：与 v-if 连用。
5、v-else-if：与 v-if 连用。
html部分
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
js部分
data () {
return {
type: 'D' // Not A/B/C
}
},
6、v-once：进入页面时，只渲染一次，不再因为数据变化再进行渲染。
html部分
<div class="box">
<input type="text" v-model="message" />
<p v-once>{{message}}</p>
<span>{{message}}</span>
</div>
js部分
data () {
return {
message: 1234
}
},
初始数据为1234，当数据发生变化，span标签的内容会随着变化，而标签p中的 message 重新被渲染。
7、v-model：用于表单进行双向绑定
html部分
<div class="box">
<input type="text" v-model="message" />
<p>{{message}}</p>
</div>
js部分
data () {
return {
message: 1234
}
},
当 input 框的内容变化时，p的 message 也会随之变化。
v-model修饰符
- .lazy：取代 input 监听 change 事件
- .number： 输入字符串转为有效的数字
- .trim：输入首尾空格过滤
8、v-show：用于切换元素的 display css属性。
9、v-for：循环指令，对数组进行遍历进行渲染。
html部分
<ul>
<li v-for="(item, index) in list"> // index 为当前索引
{{index}}：{{item.id}}-{{item.name}}
</li>
</ul>
js部分
data () {
return {
list: [
{id: 1, name: '小明', gender: 'boy'},
{id: 2, name: '小红', gender: 'girl'},
]
}
},
最终解析为如下图：
10、v-bind：动态地绑定一个或多个特性，对页面的数据及时进行更改。
缩写：":"
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
// 等同于<img :src="imageSrc">
样式绑定
class 绑定
// html 代码
<div :class = "{ active: isActive, red: isRed }">1111</div>
// js代码
data () {
return {
isActive : true,
isRed: false
}
},
// 渲染结果，因为isRed为false，所以red没被渲染。
<div class="active">1111</div>
style 绑定
<p :style="{color: 'red', fontSize: '18px'}">11111111</p>
<!-- 或者为 -->
<div id="box">
<p :style="{color: c, fontSize: fS}">11111111</p>
</div>
// js代码
data () {
c: "red",
fS: "18px"
}
11、v-on：绑定事件监听器。简写：“@”
<!-- html部分 -->
<button @click="doThis">点击</button>
<!-- js部分 -->
export default {
data () {
return {}
},
methods: {
doThis() {
console.log(123)
}
}
}
//方法在methods中写
修饰符
- stop 阻止事件冒泡
- prevent 阻止默认行为
- capture 添加事件侦听器，使用事件捕获模式
- self - 只有当事件在该元素本身触发时才触发事件
- once - 事件将只会触发一次
键值修饰符
v-on:keydown=“”（获取不同键的键值）
.enter
.tab
.delete
.up
.down
.left
.right
自定义指令
1、注册全局自定义组件：
Vue.directive('指令名称', {
inserted: function (el, binding) {
// el 代表使用了此指令的DOM元素，binding 可获取使用了此指令的绑定值
// 代码
}
})
2、注册局部指令：
directives: {
'指令名称': {
inserted: function (el, binding) {
// 代码
}
}
}
3、使用自定义指令：
- 引用指令时，指令名前面加上 v-
- 直接在元素上在使用即可 ：v-指令名='表达式'
例子：
<template>
<div class="box">
<div class="directive">
<input type="text" v-auto-focus v-colorchange>
<div class="box" v-fontcolor v-fontcolorsec>
hello
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data () {
return {}
},
// 局部定义
directives: {
'auto-focus': {
inserted: function (el, binging) {
// 逻辑代码
el.focus()
}
},
'fontcolor': {
inserted: function (el, binding) {
el.style.color = 'red';
el.style.fontSize = '40px';
}
},
'fontcolorsec': {
inserted: function (el, binding) {
el.style.color = 'blue';
}
}
},
}
// 全局定义
Vue.directive('colorchange', {
inserted: function (el, binding) {
el.style.background = 'red';
}
})
</script>
效果图：
