准备
- 什么是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