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 ...
随机推荐
- array_walk与array_map的区别
1.array_walk是用于用户自定义的函数,所以想用array_walk($aIds, "trim");去掉数据元素中的空格是达不到目的的只能用array_walk($aIds ...
- [原]CentOS 7 chrony 笔记
~]# timedatectl status Local -- :: CST ==> 本地系统实际时间,设置时间timedatectl set-:: 设置日期timedatectl set- 设 ...
- POJ - 3279（枚举+暴力）
Fliptile Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 14297 Accepted: 5257 Descrip ...
- JQuery限制文本框只能输入数字和小数点的方法
<input type="text" class="txt NumText" Width="100px" /> $(func ...
- mybatis mapper-locations作用
application上配置了@MapperScan(扫面mapper类的路径)和pom.xml中放行了mapper.xml后,配置mapper-locations没有意义 查找后得知,如果mappe ...
- 线程同步-使用SimaphoreSlim类
SimaphoreSlim类是作为Semaphore类的轻量级版本的.该类限制了同时访问同一个资源的线程数量. 代码Demo: using System;using System.Threading; ...
- [Day10]继承、抽象类
1.继承:在一个现有类的基础上去构建一个新的类,构建出来的新类被称为子类,现有类被称作父类,子类会自动拥有父类所有可继承的属性和方法. 2.继承的格式 : class 子类 extends 父类{} ...
- Attention模型
李宏毅深度学习 https://www.bilibili.com/video/av9770302/?p=8 Generation 生成模型基本结构是这样的, 这个生成模型有个问题是我不能干预数据生成, ...
- 解决秒杀活动高并发出现负库存（Redis）
商城在秒杀活动开始时,同时有好多人来请求这个接口,即便做了判断库存逻辑,也难免防止库存出现超卖,造成损失 Django中的ORM本身就对数据库做了防范,但再过亿级访问也扛不住 下面利用Redis的过载 ...
- ivew定制主题 less ^3.0 时报错 .bezierEasingMixin(); Inline JavaScript is not enabled. Is it set in your options?
按照 ivew 提供的方法定制主题,创建一个 less 文件,在其中覆盖变量,再在 main.js 中引入.戳这里 出现报错: 问题貌似是在于 less 版本...两种解决方法: 1.打开项目pack ...