【溯源篇】从头看vue（五）—

【溯源篇】从头看vue（五）——自定义指令

news/2024/7/10 2:29:11 标签: vue

视频学习地址：https://www.bilibili.com/video/BV1mz4y127UG?p=13

自定义指令

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

比如聚焦输入框的例子，当页面加载时，该元素将获得焦点：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // el就是我们绑定此指令是的元素对象；inserted为钩子函数，下期会讲；
  // el.focus()相当于：document.getElementById("***").focus();
  inserted: function (el) {
    el.focus()
  }
})

然后你可以在模板中任何元素上使用新的 v-focus。如果想注册局部指令，组件中也接受一个 directives 的选项：

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

前后对比：

在这里插入图片描述

官方文档地址：
https://cn.vuejs.org/v2/guide/custom-directive.html

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .bgcolor{
            background: #c5c551;
            padding: 20px;
            width: 100%;
            height: 200px;
            text-align: center;
            display: flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <template id="multiplication">
        <div>
            <input v-focus2 type="text" v-model="multiplierA" />
            <input v-focus type="text" v-model="multiplierB">
            <button @click="result = multiplierA*multiplierB">The anwser is {{ result }}</button>
        </div>
    </template>
    <div class="bgcolor" id="app">
        <div>
            <do-multiplication></do-multiplication>
        </div>
    </div>
</body>
<script type="text/javascript">
    Vue.component("doMultiplication",{
        data:function(){
            return{
                multiplierA: 0,
                multiplierB: 0,
                result: 0
            }
        },
        // 局部指令
        directives:{
            focus2:{
                inserted: function(el){
                    el.focus();
                }
            }
        },
        template: "#multiplication"
    })

	// 全局指令
    Vue.directive('focus',{
        inserted:function(el){
            el.focus();
        }
    })
    var vm = new Vue({
        el: '#app',
        // 数据
        data:{}
    });
</script>
</html>