2021-7-11 Vue的自定义指令简单实例

获取焦点简单实例，用Vue.directive(ps:指令）定义，命名不要是关键字，用v-加自定义指令名称调用，而内部用钩子函数inserted来实现

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
<input type="text" name="">
<input type="text" name="" v-fff>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用
Vue.directive('fff',{
    inserted:function(el){
   el.focus();
    }
});
var vm=new Vue({
    el:'#app',
    data:{}
});
</script>
</body>
</html>
View Code

 摘自Vue.js文档：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

自定义指令改变元素样式简单实例

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
<input type="text" name="" v-color="msg">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
Vue.directive('color',{
    bind:function(el,bingding){
        el.style.backgroundColor=bingding.value.colorStyle;
    }
})
var vm=new Vue({
    el:'#app',
    data:{
     msg:{
         colorStyle:'blue'
     }
    }
});
</script>
</body>
</html>
View Code

 自定义指令中的局部指令，要在实例中定义，作用域是局部的，代码实例如下

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
    <input type="text" name="">
<input type="text" name="" v-color="msg" v-fff>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用

var vm=new Vue({
    el:'#app',
    data:{
     msg:{
         colorStyle:'blue'
     }
    },
    directives:{
        color:{
            bind:function(el,bing){
                el.style.backgroundColor=bing.value.colorStyle;
            }
        },
        fff:{
            inserted:function(el){
                el.focus();
            }
        }
    }
});
</script>
</body>
</html>
View Code

 

posted @ 2021-07-11 21:02  月长生  阅读(76)  评论(0)    收藏  举报