vue 指令

1、vue 内置指令

v-test　　　　更新元素的textContent

v-html　　　　更新元素的innerHTML

v-if　　　　如果为true，当前标签才会输出到页面

v-else　　　　如果为true，当前标签才会输入到页面

v-show　　　　通过控制display样式来控制显隐

v-bind　　　　强制绑定解析表达式，可以省略v-bind

v-on　　　　绑定事件监听，一般简写为@

v-for　　　　遍历数组/对象

v-model　　　　数据双向绑定

ref　　　　指定唯一标识，ref对象通过$refs属性访问这个元素对象

v-cloak　　　　防止闪烁，与css配合使用。[v-cloak]{display:none}

 

2、vue自定义指令

①定义全局指令

在main.js中定义全局指令

 Vue.directive('my-directive',function(el,binding){
    el.innerHTML=binding.value.toupperCase()
  })

②定义及局部指令

directive : {
    'my-directive' :{
      bind(el,binding) {
        el.innerHTNL = binding.value.toupperCase()
      }
    }
  }

<template>
  <!-- 指令 -->
  <!-- 内置指令:ref
        v-cloak
  自定义指令
  案例：自定义两个指令
  1、功能类似v-text，转换为大写 v-upper-text
  2、转换为小写 v-lower-text

  方法：1、注册全局指令
  Vue.directive('my-directive',function(el,binding){
    el.innerHTML=binding.value.toupperCase()
  })
  2、定义局部变量
  directive : {
    'my-directive' :{
      bind(el,binding) {
        el.innerHTNL = binding.value.toupperCase()
      }
    }
  }
  3、使用指令
  v-my-directive='xxx'
  -->
  <div>
    <input type="text" id="inputg" ref="input" />
    <button @click="add">添加</button>
    <p v-cloak>{{msg}}</p>

    <p v-upper-text="msg1"></p>
    <p v-lower-text="msg2"></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "hello",
      msg1: "sjdaflk",
      msg2: "WFSDGFSD"
    };
  },
  // el 获取当前指令所在的元素，binding是指获取当前元素对应的一系列值
  directives: {
    "lower-text"(el, binding) {
      el.textContent = binding.value.toLowerCase();
    }
  },
  methods: {
    add() {
      this.$refs.input.value = "22";
    }
  }
};
</script>
<style lang="less">
[v-cloak] {
  display: none;
}
</style>