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

时间:2021-07-11
本文章向大家介绍2021-7-11 Vue的自定义指令简单实例，主要包括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：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

原文地址：https://www.cnblogs.com/WH5212/p/14999640.html

随机文章
Javascript知识点必读
最近更新