Vue如何自定义指令
最近在面试的时候多次被问到了Vue如何实现自定义指令的问题,之前没有了解过,也没有相应的使用经验。
Vue中为我们提供了非常多的指令,比如V-if
, v-show
, V-if
, v-for
等,非常非常多,并且Vue也支持我们自定义指令,来满足自己的业务的需求,达到复用的效果。可以全局注册,也可以局部注册。
全局自定义指令
有一次面试中,面试官的需求就是,设计一个全局自定义指令v-input
, 如果input
输入的字符中包括HelloWorld
, 就提示成功, 并且禁止继续输入。如果input
输入的字符长度大于15, 提示失败, 并且也禁止继续输入。
想达到全局的效果,其实我们可以写在main.js
中。
main.js
import Vue from 'vue';
Vue.directive('input', {
inserted: function(el, binding) {
el.addEventListener('input', function() {
if (el.value.indexOf('HelloWorld') !== -1) {
alert('成功');
el.disabled = true;
}else if(el.value.length > 15) {
alert('失败');
el.disabled = true;
}
})
}
})
首先先看一下这个directive
方法的用法, 第一个参数是你v-
后面的那个字符, 比如我想写一个v-input
指令, 这里就写input
, 第二个参数是一个对象, 对象中最重要的就是这个inserted
属性, 这个属性接收一个函数。
函数里有两个很重要的参数, 第一个参数是你绑定这个指令的组件DOM
节点, 虽然Vue倡导的是数据驱动视图, 不要轻易去动DOM
, 但是某种需求下, 还是必须要到DOM
的。第二个参数是一个对象, 如果你在用这个指令的时候赋了值, 在这个对象里可以取到。比如我在用的时候v-input="CreatorRay"
, 我在第二个参数里就可以取到这个CreatorRay
。
<template>
<div>
<input type="text" v-input="name" />
</div>
</template>
<script>
export default {
data() {
return {
name: 'CreatorRay'
};
},
}
</script>
搞清楚这个directive
怎么用了之后, 就可以来写需求了, 既然我们可以拿到DOM
节点, 需求就好实现了。先通过addEventListener
监听input
事件。
如果DOM节点.value
通过indexOf
方法查询HelloWorld
字符串, 查不到返回-1, 查到后就直接alert成功
, 并且把DOM节点.disabled = true
, 就可以禁用input
。
如果DOM节点.value
的长度大于15, alert失败
, 也把DOM节点.value = true
知道怎么写自定义指令后, 实现需求还是比较简单的。
局部自定义指令
如果我们只想在某个组件内使用这个指令的话, 可以直接像data
, methods
, watch
一样, 直接写一个directives
属性, 内容基本一致。
<script>
export default {
data() {
return {
name: "CreatorRay",
};
},
directives: {
input: {
inserted: function (el, binding) {
el.addEventListener("input", function () {
if (el.value.indexOf("HelloWorld") !== -1) {
alert("成功");
el.disabled = true;
} else if (el.value.length > 15) {
alert("失败");
el.disabled = true;
}
});
},
},
},
};
</script>
相关文章
- (尚042) vue_缓存路由组件
- HTML Tags containing Vue.js v-if and v-for directives flash at loading
- vue - 前置工作
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- vue 实现 扫二维码 功能
- light-mvvm:JavaScript 超轻量级 MVVM 双向数据绑定插件(迷你Vue)
- Windows下开发环境的搭建(前端vue后端java)
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- 【面试Vue全家桶】vue前端交互模式-es7的语法结构?async/await
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- (2)打鸡儿教你Vue.js
- jenkins接通gitee的webhook做自动部署 vue、react、java、springBoot
- qiankunjs中vue路由使用hash模式
- vue-router实现SPA购物APP基本功能
- Vue进行深度侦听时,如何解决新旧值一样的问题?
- vue学习笔记十:Vue中引入jquery
- vue路由之路由的两种模式
- vue-cli3项目中引入jquery 以及如何引进bootstrap
- 浅析如何使用Vue + Xterm.js + SpringBoot + Websocket / Stomp + JSch 实现一个 web terminal 网页版的终端工具
- 浅析vue自定义插件的5种形式、如何使用插件、如何开发插件及开发实例
- Vue背景图打包之后访问路径错误
- springboot+vue在线动漫信息平台(源码+文档)
- weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
- Vue中el、data、watch、computed的简写方法及watch与computed如何选择
- Vue学习第14天——vue自定义事件及详细代码演示
- Vue.js 复选框
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- vue 登录页背景-粒子特效(Vue-Particles)