VueDirective 指令

引导

1. 示例

{{ str }}

v 是 vue 的标示 if 是 vue 的指令 yes 是一个表达式,他是 MVVM 中的运用 model 当这个 yes 表达式的值发生变化的时候 整个的 v-if 所得到的结果也是不一样的

2. 示例

{{ str }}

扩展写法 表达式可以写成与字符串拼接的

3. 示例

扩展写法 表达式可以写成多个表达式组合而成的

vue 官方文档 => 自定义指令语法

参考网址：https://cn.vuejs.org/v2/guide/custom-directive.html

// 可以自定义 vue 的指令
    Vue.directive('my-directive', { //下面的方法都是 vue 自带的钩子函数
        bind: function() {
            //做绑定的准备工作
            //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
            //比如添加事件监视器，或是其他只需要执行一次的复杂操作

        },
        inserted: function() {
            //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入 document 中)

        },
        update: function() {
            //根据获得的新值执行对应的更新
            //对于初始值也会调用一次

        },
        componentUpdated: function() {
            //被绑定元素所在模板完成一次更新周期时调用

        },
        unbind: function() {
            //做清理操作
            //只调用一次，指令与元素解绑时调用
            //比如移除 bind 时绑定的事件监听器

        }
    });

具体示例

1. 页面载入时 input 自动获取焦点

• 源码

2. 钩子函数参数的简单运用

• 源码

• 浏览器效果图

image.png

3. 指令参数为对象类型的表达式时的调用方法

• 源码

• 浏览器效果图

image.png