Vue 常用指令
- v-html / v-text：把值中的标签渲染出来
- v-model： 放在表单元素上的，实现双向数据绑定
- v-bind（缩写 :）：用于绑定行内属性
- v-if / v-show 是否能显示，true 能显示，false 不能显示
- v-cloak：需要配合 css 使用：解决小胡子显示问题
- v-once 对应的标签只渲染一次
- v-for ：循环显示元素
- v-on 事件绑定
自定义指令
注册或获取全局指令。指令定义函数提供了几个钩子函数（可选）：
- bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
- inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
- update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
- componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
- unbind: 只调用一次， 指令与元素解绑时调用。
应用实例
下面封装一个复制粘贴文本的例子。
1、编写指令 copy.js
const vCopy = {
bind (el, { value }) {
el.$value = value // 用一个全局 属性来存传进来的值
el.handler = () => {
if (!el.$value) {
alert('无复制内容')
return
}
// 动态创建 textarea 标签
const textarea = document.createElement('textarea')
// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
textarea.readOnly = 'readonly'
textarea.style.position = 'absolute'
textarea.style.left = '-9999px'
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = el.$value
// 将 textarea 插入到 body 中
document.body.appendChild(textarea)
// 选中值并复制
textarea.select()
// textarea.setSelectionRange(0, textarea.value.length);
const result = document.execCommand('Copy')
if (result) {
alert('复制成功')
}
document.body.removeChild(textarea)
}
// 绑定点击事件，就是所谓的一键 copy 啦
el.addEventListener('click', el.handler)
},
// 当传进来的值更新的时候触发
componentUpdated (el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候，移除事件绑定
unbind (el) {
el.removeEventListener('click', el.handler)
}
}
export default vCopy
2、注册指令
import copy from './copy'
// 自定义指令
const directives = {
copy
}
// 这种写法可以批量注册指令
export default {
install (Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
}
}
3、在 main.js 引入并 use
import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)
这样就可以在项目直接用 vCopy 指令了。