Vue-自定义指令

Vue自定义指令

<div id="app">
  <p v-upper-text="message">xxx</p>
</div>

<script>
    /*第一个参数为指令名，但是不要有v-开头*/
    Vue.directive('upper-text',{
        // 一般对样式的操作 在 bind中 只调用一次
        bind:function(el){
            el.style.color = 'red'
        },
        // 一般对js操作在inserted中，inserted也是只调用一次
        /*el 是当前指令作用的那个dom元素
        binding 用于获取使用了当前指令的绑定值(value)，表达式(expression)，指令名(name)等
        * */
       inserted:function(el, binding){
          // 将所有字母文本内容转换为大写
          el.innerHTML =  binding.value.toUpperCase() // UNIAPP
       }
    });
    var vm = new Vue({
        el:'#app',
        data:   {
          message:'uniapp'
        },
        methods:{
        }
    });
</script>