vue入门之常见的指定梳理

v-text

作用：添加v-text指令后，所在节点的渲染文本内容，若文本中含有标签则标签不会解析。

注意：v-text有属性和值

区别：v-text会替换掉节点内的所有内容，而插值语法不会

v-html

作用：添加v-html指令后，绑定的属性值将以html形式渲染

注意：v-html有属性值

v-once

作用：添加v-once指令后，初次渲染后，就作为静态内容不变了

注意：v-once只有属性没有值

v-clock

作用：添加v-clock指令后，当遇到vue.js加载慢的时候页面显示插值未解析的一种解决方法

注意：v-clock只有属性没有值

v-pre指令

作用：添加v-pre指令后，vue则不会进行插值解析，直接编译作为静态资源处理

注意：v-pre只有属性没有值

vue中自定义指令

自定义指令函数式创建

案例一：定义一个v-big指令，类似v-text指令，让文本框中的值放大10倍

<div>
    <h1>当前n的结果是:<span v-text='n'></span></h1>
    <h1>放大10倍后n的结果是:<span v-big='n'></span></h1>
    <button @click='n++'>增加</button>
</div>



const vm = new Vue({
data:{
   n：1
  },
directives:{
###这里的element其实就是span标签，bindparm就是绑定属性n
   big:function(element,bind){
       element.innerText =bind.value*10
   }

######简写
 big(element,bind){
       element.innerText =bind.value*10
   }
  }
})

注意：

使用函数式自定义指令，函数的第一个参数时指定绑定的dom元素，第二个参数时元素的值

big函数的调用时机：1）在指令与元素成功绑定时，2）在指令所在的模板重新解析时

自定义指令对象式创建

案列二：定义一个v-fbind指令类似v-bind，让其绑定的input默认获取焦点

<div>
    <h1>当前n的结果是:<span v-text='n'></span></h1>
    <h1>放大10倍后n的结果是:<span v-big='n'></span></h1>
    <button @click='n++'>增加</button>
     <input type=text v-fbind:value='n'/>
</div>



const vm = new Vue({
data:{
   n：1
  },
directives:{
###这里的element其实就是span标签，bind就是绑定属性n

   fbind:function(element,bind){
       element.innerText =bind.value*10
       element.focus()
   }
  }
})

这里有个问题：当我第一次单击按钮时input框并没有获取到焦点，第二次点击时就获取到了？

原因是：使用函数式自定义指令时，当指令与标签建立绑定关系时，此时input还没有编译放到

模板中，因此第一次没有获取到焦点，点击第二次时已经在第一次编译过并放入模板因此会获取到焦点。

解决方法：使用对象式的自定义指令

vue中指令解析细分几步 绑定标签，插入标签，渲染标签

<div>
    <h1>当前n的结果是:<span v-text='n'></span></h1>
    <h1>放大10倍后n的结果是:<span v-big='n'></span></h1>
    <button @click='n++'>增加</button>
     <input type=text v-fbind:value='n'/>
</div>



const vm = new Vue({
data:{
   n：1
  },
directives:{
###这里的element其实就是span标签，bind就是绑定属性n
   fbind:{
    ###指令元素绑定时被调用
      bind(element,bind){
          element.value=bind.value
      },
     ###指令元素插入页面时被调用
      inserted(element,bind){
          element.focus()
     },
    ###指令所在的模板重新解析时被调用
     update(element,bind){
        element.value=bind.value
     }
   }
  }
})

全局指令定义：

Vue.directive('指令名称fbind不要加v-',‘在局部指令fbind的value值作为第二个参数’)

<div>
    <h1>当前n的结果是:<span v-text='n'></span></h1>
    <h1>放大10倍后n的结果是:<span v-big='n'></span></h1>
    <button @click='n++'>增加</button>
     <input type=text v-fbind:value='n'/>
</div>



Vue.directive('fbind',{
    ###指令元素绑定时被调用
      bind(element,bind){
          element.value=bind.value
      },
     ###指令元素插入页面时被调用
      inserted(element,bind){
          element.focus()
     },
    ###指令所在的模板重新解析时被调用
     update(element,bind){
        element.value=bind.value
     }
   })

const vm = new Vue({
data:{
   n：1
  }
})

注意：

   1）自定义指令时需要在vue实例中定义directives对象

   2）自定义指令时需要在directives 中只写v-后面部分名称如v-big只写big部分

   3) 自定义指令中返回值不是通过return实现而是通过函数的第一个入参实现的

   4）指定名称定义多个单词组成的风格用-分开

   5）自定义指令里面的this指的是window对象而不是vue实例