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 ...
随机推荐
- ux.form.field.Month 只能选年、月的时间扩展
效果如图,亲测6.2.1版本可用,用法同时间选择控件 //月弹窗扩展 //只选月 Ext.define('ux.picker.Month', { extend: 'Ext.picker.Month', ...
- mybatis07--关联查询一对多
案例 查询国家的同时,查询出国家下的省会信息! 01.使用单表的连接查询 创建对应的实体类 和数据库表 /** * *国家的实体类 */ public class Country { privat ...
- Java 中的几个算法
一.冒泡排序.插入排序.希尔排序.快速排序与归并排序 效率概要: 冒泡排序是蛮力法,使用两层嵌套循环,基本效率为 O(n^2) 插入排序是减治法,第一趟排序,最多比较一次,第二趟排序,最多比较两次,以 ...
- react中改变echart图表的形状
首先说明一点constructor中的只会渲染一次. 父组建是两个点击按钮,点击一个传过来bar,和一个line,子组件也就是当前组建通过this.props.type接收. 渲染是通过::::::t ...
- jquery 倒计时
今天让我公司前端大神,李杨哥,给做了一个jquery倒计时功能 很牛逼 看下面的效果图 这个倒计时是需要传值的,看效果代码讲解 百度云盘 ,压缩包永久有效 链接: https://pan.bai ...
- 如何在vscode中调试python scrapy爬虫
本文环境为 Win10 64bit+VS Code+Python3.6,步骤简单罗列下,此方法可以不用单独建一个Py入口来调用命令行 安装Python,从官网下载,过程略,这里主要注意将python目 ...
- A - Shashlik Cooking CodeForces - 1040B
http://codeforces.com/problemset/problem/1040/B Long story short, shashlik is Miroslav's favorite fo ...
- [ipsec][strongswan] 用strongswan pki工具生成自签名证书
如题.我在实验环境里,分别要为两个endpoint(T9和T129)生成证书. 证书是如何生成的呢? 证书是由根证书机构签发的.申请证书的人将request提交给根证书机构,然后根证书机构根据requ ...
- Java之事务的基本应用
基本介绍 事务是数据一致性最基本的保证,也就是说一个事务中的操作要么都成功,要么都失败,不允许部分成功.我们常说的事务就是jdbc事务,当然Java中还有其他事务,并且在使用jdbc事务有很多注意点, ...
- 【转载】MDK环境下让STM32用上FreeRTOS v8.1.2和FreeRTOS+Trace v2.6.0全过程
[转载]https://www.amobbs.com/thread-5601460-1-2.html?_dsign=6a59067b 本人选择使用FreeRTOS的最大原因就是想使用FreeRTO ...