# 指令钩子函数
1. bind：只调用一次，指令第一次绑定到元素时调用（组件初始化时调用一次，顺序1）
2. inserted：被绑定元素插入父节点时调用 (组件初始化时调用，顺序2，仅保证父节点存在，但不一定已被插入文档中)。
3. update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。（数据更新时调用，初始化时不调用）。
4. componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
5. unbind：只调用一次，指令与元素解绑时调用。
例如:vue的表格，页面初始化时，调用bind和inserted，更新表格数据时调用update，如下判断权限指令
~~~
const has = {
install (Vue) {
// 注册一个全局自定义指令 `v-has`,验证是否有操作权限
Vue.directive('has', {
bind (el, binding, vnode) {
let codeArr = vnode.context.$store.state.app.permissionName
if (!Array.isArray(codeArr) || !codeArr.length) {
codeArr = localStorage.aclNames ? JSON.parse(localStorage.aclNames) : []
}
if (!codeArr.includes(binding.value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})
Vue.directive('hasd', {
inserted (el, binding, vnode) {
let codeArr = vnode.context.$store.state.app.permissionName
if (!Array.isArray(codeArr) || !codeArr.length) {
codeArr = localStorage.aclNames ? JSON.parse(localStorage.aclNames) : []
}
if (!codeArr.includes(binding.value)) {
el.parentNode && el.parentNode.removeChild(el)
}
},
update (el, binding, vnode) {
let codeArr = vnode.context.$store.state.app.permissionName
if (!Array.isArray(codeArr) || !codeArr.length) {
codeArr = localStorage.aclNames ? JSON.parse(localStorage.aclNames) : []
}
if (!codeArr.includes(binding.value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})
}
}
export default has
~~~
webpack 框架
App.vue
```
<template>
<div class="container">
<div class="row">
<div class="col-xs-12">
<!-局部这侧的组件->
<app-test v-if="btn" :text="text"></app-test>
<button @click="create">加载</button>
<button @click="update">更新</button>
<button @click="destory">关闭</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
btn:true,
text:'hello',
}
},
components: {
appTest: {
// v-test 就是自定义指令 具体在main.js中看
template: '<h1 v-test>{{text}}</h1>',
props: {
text: String
}
}
},
methods: {
//创建的方法
create(){
this.btn=true
},
//更新组件内容
update(){
this.text='hi'
},
//利用内部指令摧毁组件
destory(){
this.btn=false
}
},
}
</script>
```
main.js
```
import Vue from 'vue'
import App from './App.vue'
//全局注册自定义指令 在每个钩子函数输出相应内容
//其中为了区分bind ,inserted 还相应输出元素的父节点
//为了区本update,componentUpdated 还想赢输出元素内容
Vue.directive('test', {
bind: function (el) {
console.log('bind');
console.log(el.parentNode)
},
inserted: function (el) {
console.log('inserted');
console.log(el.parentNode)
},
update: function (el) {
console.log('update')；
console.log(el.innerHTML)
},
componentUpdated: function (el) {
console.log('componentUpdated')
console.log(el.innerHTML)
},
unbind: function (el) {
console.log('unbind')
}
})
new Vue({
el: '#app',
render: h => h(App)
})
```
OK 运行 首先我们看到控制台输出
加载
```
bind
null
inserted
<div class="col-xs-12">…</div>
```
这时候我们可以判断首先加载时会经历这bind和inserted两个钩子函数，分别对应第一次绑定，和父元素加载完毕
按下更新按钮
updata
hello
componentUpdated
hi
这时候我们可以判断节点内容更新时会经历这两个钩子函数，分别对应更新前，和更新后
按下关闭
unbind
1
阶段销毁时经历unbind钩子函数
按下加载
bind
null
inserted
<div class="col-xs-12">…</div>
1
2
3
4
再次看下加载
小贴士
这时我们应该可以弄明白钩子函数
但其实大多数情况 我们只希望节点在加载和更新时发生同样的事情，而忽略其它钩子函数,可以这么写
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
————————————————
版权声明：本文为CSDN博主「leon_smart」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/leon_smart/article/details/88724524
## 1. 自定义指令语法说明
1. **使用 Vue.directive(v1,v2) 定义全局的指令 v-focus**
**参数1** ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
**参数2：** 是一个对象，这个对象身上，有一些指令相关的**函数**，这些函数可以在特定的阶段，执行相关的操作
**2. 指令绑定函数**
**通过directive(v1,v2)绑定指令对应的函数，在指令绑定元素的时候执行**
* **bind: function (el){}** 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，**调用 focus 方法没有作用因为，一个元素，只有插入DOM之后，才能获取焦点**
// el.focus()不会生效
* **inserted: function (el) {}** inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
el.focus()
**// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效**
},
* **updated: function (el) {}** // 当VNode更新的时候，会执行 updated， 可能会触发多次
}
})
## 2. 定义一个私有指令
1. 定义
~~~
directives: { // 自定义私有指令
'fontweight': { // 设置字体粗细的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
~~~
2. 使用
v-指令 绑定到元素
~~~
<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
~~~
## 3. 定义全局指令
~~~
// 自定义一个 设置字体颜色的 指令
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// 和样式相关的操作，一般都可以在 bind 执行
// console.log(binding.value)
// console.log(binding.expression)
el.style.color = binding.value
}
})
~~~
- vue
- 为什么要学vue
- 数据双向绑定
- vue指令
- v-bind创建HTML节点属性
- v-on绑定事件
- v-cloak
- v-text
- v-for和key属性
- v-if和v-show
- 案例1
- 自定义指令
- vue样式
- vue生命周期
- vue过滤器
- 自定义键盘修饰符
- 跨域请求
- vue组件
- 组件基础
- 引入vue文件组件
- 引入render函数作为组件
- 兄弟间组件通信
- 组件函数数据传递练习
- 路由
- 数据监听
- webpack
- vue校验
- vue笔记
- form表单中input前部分默认输入，切不可修改
- mixins
- 部署到nginx
- scope
- render
- 下载文件
- vue动态组件
- axios
- Promise
- vue进阶
- node-vue-webpack搭建
- vue事件
- 插槽
- vuex
- vuex基础
- vuex命名空间
- HTML递归？
- this.$nextTick异步更新dom
- elementui
- table
- 修改element ui样式
- form
- 优质博客
- vuex state数据与form元素绑定
- es6
- Promise