准备
- 什么是vue指令？
- 怎么使用vue指令？
什么是vue指令？
- 在vue中提供了一些对于页面+数据的更为方便的输出，这种操作就叫指令，vue中以
v-xxx表示，类似html页面中的属性<div v-xxx></div> - 在vue中以
v-xxx开头的就叫做指令 - 指令中封装了一些DOM行为，结合属性作为一个暗号，暗号对应的值，根据不同的值，框架会进行相关的DOM操作和绑定
vue中常用的指令
- v-text 元素的innerText属性，必须是双标签
- v-html 元素的innerHTML属性
- v-if 判断是否插入这个元素 （族群：v-if | v-else-if | v-else）
- v-show 隐藏元素，如果确定要隐藏，会给元素的style加上display:none;
v-text 只能用在双标签中 其实就是给元素的innerText赋值
v-html 其实就是给元素的innerHTML赋值
v-if 如果值为false,会留下一个<!---->作为标记，万一未来v-if的值是true了，就在这里插入元素,如果有if和else就不需要单独留坑了,如果全部用上 v-if 相邻 v-else-if 相邻 v-else，否则 v-else-if可以不用，v-if 和 v-else-if 都有等于对应的值， 而v-else是直接写，v-if 家族都是对元素进行插入和移除的操作
v-show 表示是否显示
v-bind的使用
- 给元素绑定动态属性
- 语法在元素上
v-bind:属性名="常量||变量"，简写形式:属性名="常量||变量"
v-on的使用
- 给元素绑定事件
- 普通使用
v-on:事件名="表达式||函数名" - 简写方式
@事件名="表达式"
v-model的使用
- 数据双向绑定
- vue实例中data数据变化会直接更新input的value值，用户输入的value能直接更新绑定实例中的值
- 使用
<input v-model="data中定义的变量" /> - v-bind （单向） 与 v-model（双向）
- v-bind 对属性的简单赋值，当实例中的值改变，会触发重新渲染
- v-model 实例中的值与input的value值相互影响
v-for的使用
- 语法
<div v-for="item in arr"></div> - 对象的操作
<div v-for="item in obj"></div> - 如果是数组没有id
v-for="(item, index) in arr" :key="index" :class="index"
vue中动态class与style
// 如何将下面的样式或class动态绑定
.red {background-color: red; }
.big { font-size: 50px; }
// class动态写法
<div :class="{'red': true, 'big': ture }" ></div>
// style动态写法
<div :style="`background-color: red;font-size: 50px;`" ></div>
<div :style="{'background-color': 'red', 'font-size': '50px' }" ></div>
自定义指令
如果需要直接操作DOM，那么就会用到自定义指令啦
1. 注册
注册自定义指令分为全局注册与局部注册两种
2. 全局注册
Vue.directive('xxx', {
inserted: function (el) {
//指令属性
}
});
3. 局部注册
var app = new Vue({
el: '#app',
directives: {
xxx: {
//指令属性
}
}
});
4. 属性
自定义指令属性包括这些钩子函数
| 钩子函数 | 说明 |
|---|---|
| bind | 只调用一次，第一次绑定指令到元素时调用，我们可以在此绑定只执行一次的初始化动作。 |
| inserted | 被绑定元素插入父节点时调用（父节点只要存在即可调用，不必存在于 document 中）。 |
| componentUpdated | 被绑定元素所在模板完成一次更新周期时调用。 |
| unbind | 指令与元素解绑时调用，只调用一次。 |
假设我们需要自定义一个v-focus指令，即在input或者textarea标签初始化获取焦点
<!-- html -->
<div id="app">
<input type="text" v-focus>
</div>
// javascript
//全局注册
Vue.directive('focus', {
inserted: function (el) {
// el 表示当前元素
el.focus();//聚焦
}
});
这些钩子函数入参如下：
| 入参 | 说明 |
|---|---|
| el | 指令所绑定的元素，可利用它直接操作 DOM |
| binding | 绑定对象。 |
| vnode | 编译生成的虚拟节点。 |
| oldVnode | 上一个虚拟节点，仅在 update 与 componentUpdated 中可用。 |
绑定对象属性(binding)说明：
| 属性 | 说明 | 示例 |
|---|---|---|
| name | 指令名，不包含前缀 v-。 | v-focus 中的 focus。 |
| value | 指令所绑定的值（计算后）。 | v-focus=“1 + 2” 中的 3。 |
| oldValue | 指令所绑定的前一个值，无论值是否改变都有值，且仅在 update 与 componentUpdated 中可用。 - | |
| expression | 绑定的值的字符串形式（不计算）。 | v-focus=“1 + 2” 中的 1 + 2。 |
| arg | 传递给指令的参数。 | v-focus:xxx 中的 xxx。 |
| modifiers | 包含修饰符的对象。 | v-focus.a.b 中，为 {a:true, b:true}。 |
实例如下：
<!-- html -->
<div id="app">
<div v-directive:content.a.b="content"></div>
</div>
// javascript
Vue.directive('directive', {
bind: function (el, binding, vnode) {
var keys = [];
for (var i in vnode) {
keys.push(i);
}
el.innerHTML =
'names:' + binding.name + '<br>' +
'value:' + binding.value + '<br>' +
'expression:' + binding.expression + '<br>' +
'arg:' + binding.arg + '<br>' +
'modifiers:' + JSON.stringify(binding.modifiers) + '<br>' +
'vnode keys:' + keys.join(', ');
}
});
var app = new Vue({
el: '#app',
data: {
content: '退休一起送外卖'
}
});
渲染结果：
names:deniro-directive
value:退休一起送外卖
expression:content
arg:content
modifiers:{"a":true,"b":true}
vnode keys:tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions,
componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce
