本文编写于 172 天前,最后修改于 138 天前,其中某些信息可能已经过时。

使用 Vue.directive() 定义全局的指令 v-focus
其中:参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀,
但是: 在调用的时候,必须 在指令名称前 加上 v- 前缀来进行调用
参数2: 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作

 <!-- 注意: Vue中所有的指令,在调用的时候,都以 v- 开头 -->
          <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">

每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次
注意: 在每个 函数中,第一个参数,永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象
在元素 刚绑定了指令的时候,还没有 插入到 DOM中去,这时候,调用 focus 方法没有作用
因为,一个元素,只有插入DOM之后,才能获取焦点

Vue.directive('focus', {
      bind: function (el) { 
         el.focus()
      }
    })

inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】

Vue.directive('focus', {
     inserted: function (el) {  // inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】
    el.focus()
    // 和JS行为有关的操作,最好在 inserted 中去执行,放置 JS行为不生效
  }
    })

当VNode更新的时候,会执行 updated, 可能会触发多次

Vue.directive('focus', {
     updated: function (el) {  // 当VNode更新的时候,会执行 updated, 可能会触发多次

  }
    })

自定义一个 设置字体颜色的 指令

// 样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素

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
      }
    })

更多相关系列教程请及时关注妙笔生花个人博客,本网站由皮皮家园终身维护!
1.Vue.js 是什么?起步及安装
http://blog.zh66.club/index.php/archives/474/
2.Vue.js 声明式渲染
http://blog.zh66.club/index.php/archives/476/
3.vue.js 条件与循环
http://blog.zh66.club/index.php/archives/477/
4.vue.js 处理用户输入
http://blog.zh66.club/index.php/archives/478/
5.vue.js实现跑马灯效果
http://blog.zh66.club/index.php/archives/479/
6.vue.js 事件修饰符
http://blog.zh66.club/index.php/archives/480/
7.vue.js 表单输入绑定
http://blog.zh66.club/index.php/archives/481/
8.vue.js 简易的计算器
http://blog.zh66.club/index.php/archives/482/
9.vue.js 中样式的使用
http://blog.zh66.club/index.php/archives/483/
10.vue.js 之 v-forkey 属性
http://blog.zh66.club/index.php/archives/484/
11.vue.js 内容的总结和回顾
http://blog.zh66.club/index.php/archives/485/
12.vue.js 中 v-if 和 v-show 的使用
http://blog.zh66.club/index.php/archives/486/
13.vue.js 品牌案例~列表的添加删除功能
http://blog.zh66.club/index.php/archives/488/
14.vue.js 品牌案例~列表的关键字检索功能
http://blog.zh66.club/index.php/archives/489/
15.vue.js 过滤器的基本使用
http://blog.zh66.club/index.php/archives/491/
16.vue.js 自定义一个私有的过滤器
http://blog.zh66.club/index.php/archives/490/
17.vue.js 生命周期函数演示
http://blog.zh66.club/index.php/archives/492/
18.vue.js 中 vue-resource 基本使用
http://blog.zh66.club/index.php/archives/493/