如何更好的玩转Vue自定义指令呢--进来看

最新推荐文章于 2020-12-16 14:24:46 发布

稳小情

最新推荐文章于 2020-12-16 14:24:46 发布

阅读量201

点赞数

分类专栏：前端案例文章标签： vue

本文链接：https://blog.csdn.net/weixin_45728087/article/details/106216788

版权

前端案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简介

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

打开页面还没点击过任何内容，这个输入框就应当还是处于聚焦状态，下面来实现这个功能

//注册一个全局自定义指令 `v-focus`
Vue.directive('focus',{
    //当被绑定的元素插入到DOM中时...
    inserted:function(el) {
        el.focus()
    }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>


<p v-color>这里是自定义的指令 指令改变背景颜色</p>

Vue.directive('color',{
    inserted(el){
        el.style.background="red";
    }
})
//自定义指令 el是vue实例里面的el
//inserted 自定义指令里面的 钩子函数

input聚焦

<input type="text">
<script>
	Vue.directive('focus',{
	    inserted(el){
	        el.focus(); //focus应该是聚焦吧
	    }
	})
</script>

刷新页面背景切换

<!----
	Math.random()0~1的随机小数 
	toFixed()填写0不保留小数 想保留几位请填写几
----->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-aa>1111</p>
    </div>
    <script>
        Vue.directive("aa",{
            inserted(el){
                var num = (Math.random()*1000000).toFixed(0);
                el.style.background="#"+num
                console.log(num)
            }
        })
        var vm = new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

Vue.use()主要用于在vue中安装插件

插件函数也可以是一个对象，如果是对象，必须提供instaLL()方法

<div id="app" v-chg>
    这里是内容
</div>
<script src="www"></script>
<script>
	Vue.sue(my)
    var vm = new Vue({
        el:"#app",
        data:{
            
        }
    })
</script>

<script>
//这里是js写的插件文件 只不过由于是网页就写到这里了
	var my = {};
	my.install=function(){
	    Vue.directive('chg',{
	        inserted(el){
	            el.style="width:100px;height:100px;background:red"
	        }
	    })
	}

//比如文件名叫做 www
</script>

稳小情

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何更好的玩转Vue自定义指令呢--进来看

简介除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。打开页面还没点击过任何内容，这个输入框就应当还是处于聚焦状态，下面来实现这个功能//注册一个全局自定义指令 `v-focus`Vue.directive('focus',{ //当被绑定的元素插入到DOM中时... inserted:fun
复制链接

扫一扫