[TOC]

引导

  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](20e3cbb61df34cc5419b4a40c6e654b0)

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

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

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

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

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

    }
});

##具体示例

1. 页面载入时 `input` 自动获取焦点
- 源码

<!DOCTYPE html>


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

<!DOCTYPE html>


- 浏览器效果图

> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-a09095469ef6833e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


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

<!DOCTYPE html>

```

  • 浏览器效果图

image.png