vue--自定义指令
Posted zouzou-busy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue--自定义指令相关的知识，希望对你有一定的参考价值。
自定义指令
除了内置指令外，Vue也允许注册自定义指令。有的情况下，你仍然需要对普通的DOM元素进行底层操作，这时候使用自定义指令更方便。
官方文档：https://cn.vuejs.org/v2/guide/custom-directive.html
全局指令
案例：将字母转为大写，颜色为红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-upper-text="msg">xxxxx</p> </div> <script> // 注册全局自定义指令，可以在多个Vue管理的入口下使用该指令 // 第一个参数为指令名，但是不要有v-开头 Vue.directive(‘upper-text‘,{ //一般对样式 的操作在bind中，bind函数只调用一次 bind: function (el) { el.style.color = ‘red‘ }, //一般对js操作在inserted中，inserted也是只调用一次 // el是当前指令作用的那个Dom元素， // binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等 inserted: function (el, binding) { // 将所有字母文本内容转换为大写 el.innerHTML = binding.value.toUpperCase() } }) new Vue({ el: ‘#app‘, data: { msg: ‘hello world‘ } }) </script> </body> </html>
局部指令
局部指令只能在当前vue实例中使用，如果有个id为app2的div，则不生效
案例：刷新之后自动获取输入框焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> 自动获取焦点：<input type="text" v-focus> </div> <script> new Vue({ el: ‘#app‘, data: { message: ‘hello world‘ }, //注册局部自定义指令：只能在当前Vue实例管理的入口 下引用这个指令 directives: { ‘focus‘: { // 指令名， bind: function () { }, // 刷新页面自动获取焦点 inserted: function (el, binding) { //被 v-focus 作用的那个元素在刷新页面后会自动 获取焦点 el.focus() } } } }) </script> </body> </html>
以上是关于vue--自定义指令的主要内容，如果未能解决你的问题，请参考以下文章