vue学习笔记-11-自定义指令

之前学的指令可以满足我们大多数常规的操作，哪那些指令又被称作vue的内置指令。有些时候，又需要我们自定义一些指令。

一，不带参数的自定义指令

现在拿表单第一个元素自动获取焦点来举例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css"></style></head><body><div id="app"><input  v-focus /></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">//自定义指令//第一个参数是自定义的vue指令名//第二个是指令具体的功能代码Vue.directive('focus',{inserted:function(el){//el表示所绑定的元素el.focus()}})var vm=new Vue({el: "#app",data:{score: 90,flag:false}})</script></body>
</html>

这就可以在刷新时，自动获取焦点了。
官网上更具体的教程：https://cn.vuejs.org/v2/guide/custom-directive.html#ad
上面这个自定义指令是不带参数的

二，带参数的自定义指令

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css"></style></head><body><div id="app"><input type="text" v-color="msg"/></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">//自定义指令//第一个参数是自定义的vue指令名//第二个是指令具体的功能代码Vue.directive('color',{bind:function(el,binding){//el表示所绑定的元素el.style.backgroundColor=binding.value.color}})var vm=new Vue({el: "#app",data:{msg:{color:'blue'}}})</script></body>
</html>

三，局部指令，关于指令还可以换一种方式来定义

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css"></style></head><body><div id="app"><input type="text" v-color="msg"/></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{msg:{color:'blue'}},directives:{color:{bind:function(el,binding){el.style.backgroundColor=binding.value.color}}，focus:{inserted:function(el){el.focus}}}})</script></body>
</html>

也就是把指令的定义放在vm组件当中了，相当于是属于vm的指令，可以用局部变量的方式来理解。所以这种指令叫做局部指令，而不是之前的全局指令。

vue学习笔记-11-自定义指令相关推荐

Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 创建自定义指令注意:本指南是针对已经熟悉AngularJS基础的开发者.如果您只是想要开始,建议您先去看教程.如果你在寻找指 ...
Spring.NET学习笔记11——自定义对象行为(基础篇) Level 200
Spring.NET通过几个专门的接口来控制容器中对象的行为.说到对象的行为无非就要提到对象的生命周期控制.类似在WinForm开发,Form生命周期中,Load方法为Form的载入方法和Dispos ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
Vue学习笔记---------Vue2
Vue学习笔记---------Vue2 1. Hello,world! 插值语法: 用 {{ xxx }} 插入一个值 ,该值在data中自定义内容. <body><div id= ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...

vue学习笔记-11-自定义指令

一，不带参数的自定义指令

二，带参数的自定义指令

三，局部指令，关于指令还可以换一种方式来定义

vue学习笔记-11-自定义指令相关推荐

最新文章

热门文章