Vue指令续

Vue指令

修饰符

一个指令可以包含的内容包括：

• 指令名称

• 指令值

• 指令参数

• 指令修饰符

  指令名称：参数 .修饰符 = 值
  v-bind:value.number = “msg”

不同的指令有不同的参数，也有不同的修饰符
有些指令是没有修饰符，有的多有的少，有的里面有重复的，有的完全是不同的

注意事项：

• 1.不同的指令下，有不同的修饰符，需要使用时，查看api中对应的指令
• 具体内容查看api或者自定义指令的具体实现

.lazy
取代 input 监听 change 事件
失去焦点时触发

<div id="app">
   <input type="text" v-model.lazy ="val">
   <span>{{val}}</span>
</div>

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<div id="app">
    <input type="text" v-model.number ="one"> + <input type="text" v-model.number ="two"> = {{one + two}}
</div>

.trim

• 输入首尾空格过滤

自定义指令

自定义指令

• 全局指令
• 局部指令

两者的最大区别：是在局上，也就是作用范围上

• 全局指令
  directive 是Vue固定的，是为自动义指令留的口
  参数1： 指令名称
  参数2： 配置对象(方法名不是自定义,都是内置方法)

<div id="app">
        <!-- <input type="text" autofocus > -->
        <input type="text" v-focus >
</div>

<script>
      Vue.directive("focus",{
            
            // 当被绑定的元素插入到 DOM 中时触发
            inserted:function(el){
                console.log("我被触发了")
                el.focus()
            }

        });
        let app = new Vue({
            el:"#app",
            
        })

</script>

钩子函数

钩子函数：可以让开发者灵活控制 指令功能的执行时间
可以根据不同的时间段，执行不同的功能

• bind : 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted : 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
• update : 所在组件更新的时候调用
• componentUpdated : 所在组件更新完成后调用
• unbind : 只调用一次，指令与元素解绑时调用

不同的生命周期钩子函数在调用的时候同时会接收到传入的一些不同的参数

• el : 指令所绑定的元素，可以用来直接操作 DOM
• binding : 一个对象，包含以下属性：
• name : 指令名，不包括 v- 前缀
• value : 指令的绑定值（作为表达式解析后的结果）
• expression : 指令绑定的表达式（字符串）
• arg : 传给指令的参数，可选
• modifiers : 传给指令的修饰符组成的对象，可选，每个修饰符对应一个布尔值
• oldValue : 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用，无论值是否改变都可用

prop 和 attr

• property: 操作的是js中的对象属性
• attribute: 操作的是html标签的属性

 <input type="text" value="张三">

     <script>
         let input = document.querySelector("input");
         
         //通过js对象的属性值来改变页面值，但HTML本身的属性不变
         input.value  = "李四";
         //用户界面不变，但HTML本身的标签属性变了
         input.setAttribute("class","ipt");
         input.setAttribute("value","123");

     </script>