Vue基础进阶 之 自定义指令
自定义指令-----钩子函数
自定义指令
除了内置指令，Vue也允许用户自定义指令；
注册指令：通过全局API Vue.directive可以注册自定义指令；
自定义指令的钩子函数： bind； inserted； update； componentUpdated； unbind；
自定义指令的使用：在自定指令的名称前加 上 v-；
自定义指令的详细介绍网址：https://cn.vuejs.org/v2/guide/custom-directive.html
下面是关于这个5个钩子函数的示例；
vue代码：
Vue.directive('demo',{
//指令的钩子函数
bind(){
alert("bind 首次绑定到元素的时候执行，它只执行一次，常用于初始化操作");
},
inserted(){
alert("inserted 插入到父节点之后，也就是DOM对象");
},
ubind(){
alert("ubind 解除绑定");
},
update(){
alert("update 绑定该指令的元素 所在的VUE实例挂载的DOM树 发生更新时调用"+"username="+vm.$refs.username.textContent);
},
componentUpdated(){
alert("componentUpdated 更新后调用"+"username="+vm.$refs.username.textContent);
}
})
let vm= new Vue({
data:{
username:'perfect',
flag:true
}
}).$mount('div');
html:
<div>
<input type="text" v-model="username" /><br />
用户名：<span v-demo ref='username'>{{username}}</span><br />
信息：<span v-if="flag">欢迎来到perfect*的博客园！！！</span>
<button @click="flag=!flag">解除绑定</button> </div>
自定义指令钩子函数总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 09_自定义指令钩子函数</title>
<script type="text/javascript" src="../js/vue.js" ></script> </head>
<body>
<div>
<input type="text" v-model="username" /><br />
用户名：<span v-demo ref='username'>{{username}}</span><br />
信息：<span v-if="flag">欢迎来到perfect*的博客园！！！</span>
<button @click="flag=!flag">解除绑定</button> </div>
</body> <script>
Vue.directive('demo',{
//指令的钩子函数
bind(){ alert("bind 首次绑定到元素的时候执行，它只执行一次，常用于初始化操作"); },
inserted(){
alert("inserted 插入到父节点之后，也就是DOM对象");
},
ubind(){ alert("ubind 解除绑定");
},
update(){ alert("update 绑定该指令的元素 所在的VUE实例挂载的DOM树 发生更新时调用"+"username="+vm.$refs.username.textContent);
},
componentUpdated(){ alert("componentUpdated 更新后调用"+"username="+vm.$refs.username.textContent); } }) let vm= new Vue({
data:{
username:'perfect',
flag:true }
}).$mount('div'); </script>
</html>
自定义指令钩子函数
自定义指令-----钩子函数的参数
自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode；
具体描述见官网API：点击我进入
el：获取DOM对象；
binding：一个包含很多属性的对象；
vnode：Vue编译生成的虚拟节点；
oldVnode：上一个虚拟节点
el：指令所绑定的元素，可以用来直接操作 DOM 。
示例：
binding；
示例：
binding属性的代码：
Vue.directive('demo',{
//指令的钩子函数
bind(el,binding){
// console.log(el);
// el.style.color='red';
console.log(binding.name);//指令名
console.log(binding.value);//指令的绑定值
console.log(binding.expression);//字符串形式的指令表达式
console.log(binding.arg);//传给指令的参数，可选
console.log(binding.modifiers);//一个包含修饰符的对象
if(binding.arg==='click'){
console.log("执行了点击事件！！！");
}
if(binding.modifiers.once){
console.log("只执行一次！！！");
}
},
update(el,binding){
console.log("update value="+binding.value);
console.log("update oldvalue="+binding.oldValue);
},
})
let vm= new Vue({
data:{
username:'perfect',
flag:true
}
}).$mount('div');
binding中使用到HTML代码：
<div>
<input type="text" v-model="username" /><br />
用户名：<span v-demo:click.once.stop='username' ref='username'>{{username}}</span><br />
信息：<span v-if="flag">欢迎来到perfect*的博客园！！！</span>
<button v-on:click="flag=!flag">解除绑定</button> </div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 10_自定义指令钩子函数的参数</title>
<script type="text/javascript" src="../js/vue.js" ></script> </head>
<body>
<div>
<input type="text" v-model="username" /><br />
用户名：<span v-demo:click.once.stop='username' ref='username'>{{username}}</span><br />
信息：<span v-if="flag">欢迎来到perfect*的博客园！！！</span>
<button v-on:click="flag=!flag">解除绑定</button> </div>
</body> <script>
Vue.directive('demo',{
//指令的钩子函数
bind(el,binding){
// console.log(el);
// el.style.color='red'; console.log(binding.name);//指令名
console.log(binding.value);//指令的绑定值
console.log(binding.expression);//字符串形式的指令表达式
console.log(binding.arg);//传给指令的参数，可选 console.log(binding.modifiers);//一个包含修饰符的对象 if(binding.arg==='click'){ console.log("执行了点击事件！！！");
}
if(binding.modifiers.once){ console.log("只执行一次！！！");
} }, update(el,binding){
console.log("update value="+binding.value);
console.log("update oldvalue="+binding.oldValue); }, }) let vm= new Vue({
data:{
username:'perfect',
flag:true }
}).$mount('div'); </script>
</html>
自定义指令钩子函数的参数
自定义指令简写与局部自定义指令
vue代码：
<script>
Vue.directive('demo',function(){//自定义指令的简写
alert(); }); let vm= new Vue({
data:{
username:'perfect',
flag:true },
directives:{//自定义指令的局部定义
font_style:function(el,binding){
el.style.color=binding.arg; },
focus:{
inserted(el){
console.log(el);
el.focus();//聚焦到输入文本框中
}
}
}, }).$mount('div'); </script>
html:
<div>
<input type="text" v-model="username" v-focus /><br />
用户名：<span v-demo v-font_style:red>{{username}}</span><br /> <button v-on:click="flag=!flag">解除绑定</button> </div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11_自定义指令</title>
<script type="text/javascript" src="../js/vue.js" ></script> </head>
<body>
<div>
<input type="text" v-model="username" v-focus /><br />
用户名：<span v-demo v-font_style:red>{{username}}</span><br /> <button v-on:click="flag=!flag">解除绑定</button> </div>
</body> <script>
Vue.directive('demo',function(){//自定义指令的简写
alert(); }); let vm= new Vue({
data:{
username:'perfect',
flag:true },
directives:{//自定义指令的局部定义
font_style:function(el,binding){
el.style.color=binding.arg; },
focus:{
inserted(el){
console.log(el);
el.focus();//聚焦到输入文本框中
}
}
}, }).$mount('div'); </script>
</html>
自定义指令简写与局部自定义指令
Vue基础进阶 之 自定义指令的更多相关文章
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- Vue（十三）自定义指令
自定义指令 分类:全局指令.局部指令 1. 自定义全局指令 使用全局方法Vue.directive(指令ID,定义对象) 2. 自定义局部指令 <!DOCTYPE html> < ...
- Vue滚动加载自定义指令
用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...
- vue 混入 mixin，自定义指令，过滤器
vue 混入 mixin ,分发 vue 组件中重复的功能 局部的书写格式 // mixin.js var mymixin = { // 这是一个对象:对象里面的写法与组件里面的写法一模一样,组件该 ...
- vue学习-day02（自定义指令，生命周期）
目录: 1.案例:品牌管理 2.Vue-devtools的两种安装方式 3.过滤器,自定义全局或私有过滤器 4.鼠标按键事件的修饰符 5.自定义全局指令:让文本框获取焦点 ...
- vue.js_06_vue.js的自定义指令和自定义键盘修饰符
1.全局的自定义指令 实现:当页面刷新时,光标聚焦到搜索框中 <label> 搜索: <input type="text" class="form-co ...
随机推荐
- Qt编写自定义控件7-自定义可拖动多边形
前言 自定义可拖动多边形控件,原创作者是赵彦博(QQ:408815041 zyb920@hotmail.com),创作之初主要是为了能够在视频区域内用户自定义可拖动的多个区域,即可用来作为警戒区域,也 ...
- 离屏Canvas — 使用Web Worker提高你的Canvas运行速度
离屏Canvas — 使用Web Worker提高你的Canvas运行速度 原文链接: developers.google.com 现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了! ...
- 帝国CMS 您来自的链接不存在
网上的解决方法如下. 我是在通过接口,发布新闻,然后点击修改的时候,提示这个. 网上的方法,是让检查这个栏目下,有没有设置默认模板,包括:列表模板和内容模板,如果没有,就设定一下,再“更新数据库缓 ...
- 【谈谈IO】BIO、NIO和AIO
BIO: BIO是阻塞IO,体现在一个线程调用IO的时候,会挂起等待,然后Thread会进入blocked状态:这样线程资源就会被闲置,造成资源浪费,通常一个系统线程数是有限的,而且,Thread进入 ...
- mysql limit 性能问题分析
问题重现 // todo 参考文章: MySQL 单表分页 Limit 性能优化 Scalable MySQL: Avoid offset for large tables 证明为什么用limit时, ...
- 怎么把mkv转成mp4，有什么方法
Mkv怎样转换成MP4呢?mkv是一种开放标准的自由的容器和文件格式,是一种多媒体封装格式,能够在一个文件中容纳无限数量的视频.音频.图片或字幕轨道.所以其不是一种压缩格式,而是Matroska定义的 ...
- fiddler 修改
很多新手学习fiddler抓包的同学们都会对https网站抓包难或者抓不起来的问题无所适从,想寻求解决办法,没问题,这节课就来解决你的疑问! 最典型的网站就是目前的百度网站了,百度在近些年采用了htt ...
- LCA || BZOJ 1602: [Usaco2008 Oct]牧场行走 || Luogu P2912 [USACO08OCT]牧场散步Pasture Walking
题面:[USACO08OCT]牧场散步Pasture Walking 题解:LCA模版题 代码: #include<cstdio> #include<cstring> #inc ...
- MySQL慢查询日志总结 日志分析工具mysqldumpslow
MySQL慢查询日志总结 - 潇湘隐者 - 博客园 https://www.cnblogs.com/kerrycode/p/5593204.html 2016-06-17 10:32 by 潇湘隐者, ...
- [Day13]static、final、匿名对象、内部类、包、修饰符、代码块
1.final-最终 (1)final的特点 final修饰类不可以被继承,但是可以继承其他类 final修饰的方法不可以被覆盖,但父类中没有final修饰方法,子类覆盖后可以加final final ...