Vue-自定义指令

VUE vue

创建时间:2019-12-04 23:30

字数:291 阅读:

注册指令

注册指令

全局指令作用于多个VUE实例

Vue.directive('指令名称',{
          // el代表使用了此指令的dom元素
          // binding可以获取使用了此指令的绑定值
          inserted: function (el, binding) {
              // 逻辑代码
          }
      })

局部指令仅作用于当前VUE实例

directives:{
            '指令':{
                inserted: function (el, binding) {
                    // 逻辑代码
                }
            }
        }

注意：注册是不可以添加v-,

使用指令

引用指令是前面要添加v-

直接在元素上使用即可
举例：

<body>
    <div id="app01">
        <p v-upper-text="message">xx</p>
        获取交点<input type="text" v-focus>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        <!--全局可以使用-->
        Vue.directive('upper-text',{
            bind: function(el){
              el.style.color = 'red'
            },
            // el表示dom元素本身,binding表示Vue绑定的值（value）,表达式（expression）
            //
            inserted: function (el,binding) {
                // 文本内容修改大写
                el.innerHTML = binding.value.toUpperCase()
            }
        })
        var vm = new Vue({
            el: '#app01',
            data:{
                message: 'hello world!!'

            },
            // 局部自定义指令
            directives:{
                'focus':{// 指令名称
                    // 刷新页面自动获取焦点
                    inserted: function (el) {
                        el.focus()
                    }
                }
            }
        })
    </script>
</body>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com