vue指令修饰符与自定义指令

上述代码实现后我们修改input框里边的值后会加在到页面加载  

但是我们如果想要输入完且失去焦点后才加在到页面的话我们就需要用到指令修饰符了

这时就可以完成上述需求



在看一种场景

<div id="app">

    <input type="text" v-model = "v1">

    +

    <input type="text" v-model = "v2">

    =

    {{v1+v2}}

</div>

<script>

    let app = new Vue({

        el:"#app",

        data:{

            val:1,

            v1:1,

            v2:1

        }

    })

</script>

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200421162605338.jpg)  

我们这时如果在input框里修改value值后等号后边会自动变为字符串拼接  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200421162821550.jpg)  

我们只需要给**v-model**添加一个修饰符number就可以了

=

{{v1+v2}}

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200421162958485.jpg)  

**补充**  

修饰符是可以连用的

=

{{v1+v2}}

[]( )自定义指令

===============================================================



在面对我们想要用到指令去完成一些需求且！内置指令处理不了的时候，我们可以制定一个自定义指令，根据我们的开发需求和开放场景来封装一个。



自定义指令分为全局指令与局部指令，区别仅在于有效范围。



1.  全局指令的有效范围：在整个script标签内可以通用

2.  局部指令的有效范围：仅在于vue的实例化对象里边



我们可以通过input框自动获取焦点这个案例来了解一下自定义指令



**代码示例**

let app = new Vue({

el: "#app",

directives: {

	focus: {

		// 指令的定义

		inserted: function (el) {

			el.focus()

		}

	}

}

});

// 注册一个全局自定义指令 v-focus

Vue.directive(‘focus’, {

// 当被绑定的元素插入到 DOM 中时……

inserted: function (el) {

	// 聚焦元素

	el.focus()

}

})

现在我们已经注册了一个全局的自定义指令，我们只需要在需要使用的元素里加上v-focus即可

### []( )钩子函数



一个指令定义对象可以提供下边的钩子函数（都是可选项）



1.  bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

2.  inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

3.  update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

4.  componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

5.  unbind：只调用一次，指令与元素解绑时调用。



钩子函数的作用：可以让开发者灵活控制指令功能执行的时间



* * *



[]( )拓展

============================================================



### []( )attr与prop的区别



首先准备一个前端页面

<input type="text">

<script>

    let input = document.querySelector("input");

</script>

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200420202208612.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们这个时候可以通过js去修改他的value值  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200420202404136.jpg)  

**这个东西我们叫做js中的对象属性**



我们现在在去把标签里面添加上一个value值

<input type="text" value>

<script>

    let input = document.querySelector("input");

</script>

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200420213659750.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们这时候我们通过js属性去修改value值是可以改变的，但是html标签本身的属性是不会变的  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200420220145371.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

所以我们需要去设置setAttribute  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200420223319892.jpg)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/202004202233301.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)