指令 自定义指令 全局指令

<template>

  <div >

      <!-- v-text 和 v-html --> 

      <p v-text="content"></p>

      <p>{{content}},喜欢it</p> 

      <p>{{site}}</p> 

      <p v-html="site"></p>

 

      <p v-pre>{{content}}</p>

      <p v-cloak>{{content}}</p>

       <p v-once>{{name}}</p>

       <input type="text" placeholder="请输入姓名" v-model="name">

       <!-- ref -->

       <p ref="bird">我是一只小小鸟</p>

       <button @click="log">输出内容</button>

       <!-- 自定义指令 -->

       <p v-lower-text="word1"></p>

       <p v-upper-text="word2"></p>

  </div>

</template>

<script>

export default {

  name: 'Other',

  data() {

    return {

      content:'学院',

      site: '<a href="http://www.baidu.com">官网</a>',

      name:"Eric",

      word1:'IT LIKE LIKE IT',

      word2:'i like it'

    }

  },

  methods:{

    log(){

      // 我是一只小小鸟

      // console.log(this.$refs.bird.innerText); 

    }

  },

  // 自定义局部指令

  directives:{

    'lower-text'(el,binding,vnode){

      //  console.log(el,binding,vnode);

       el.textContent = binding.value.toLowerCase();

    }

  }

}

</script> 

<style scoped>

 

</style>

--------------------

 

// 注册全局指令

Vue.directive('upper-text',(el,binding)=>{

  el.textContent = binding.value.toUpperCase();

})