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 ...
随机推荐
- ganglia问题汇总
1.有数据,不出图 排查方法: 1)确保 php-gd 插件已安装 2) 确保rrdtool 的命令路径是正确的 3)确保php.ini中passthru函数是否开启,参数safe_mode 是否为o ...
- LeetCode - 769. Max Chunks To Make Sorted
Given an array arr that is a permutation of [0, 1, ..., arr.length - 1], we split the array into som ...
- AWS事故总结，几招教你规避风险
版权声明:本文由王煜奕原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/90687001488360802 来源:腾云阁 ht ...
- Page Lifecycle API
今天的现代浏览器有时在系统资源受限的情境下会暂停页面或完全放弃执行它.将来,浏览器会主动执行此操作,因此它们会消耗更少的电量和内存.在Chrome 68中提供的Page Lifecycle API提供 ...
- Serv-u FTP迁移(windows_to_windwos)
需求分析 公司服务器要做维护,部分服务器需要进行迁移处理,其中就包括Ser-v FTP服务器. 确认环境信息 角色 ip 系统版本 sql版本 Serv-U版本 ODBC account/passwo ...
- vim 撤销 回退操作
在vi中按u可以撤销一次操作 u 撤销上一步的操作Ctrl+r 恢复上一步被撤销的操作 注意:如果你输入“u”两次,你的文本恢复原样,那应该是你的Vim被配置在Vi兼容模式了.重做如果你撤销得太多 ...
- An overview of gradient descent optimization algorithms
原文地址:An overview of gradient descent optimization algorithms An overview of gradient descent optimiz ...
- Android 函数
inflate: https://blog.csdn.net/u012702547/article/details/52628453 public View inflate(XmlPullParser ...
- MSSQL：查看所有触发器信息的命令
转自:http://www.2cto.com/database/201307/228708.html 编写程序,有时或为了偷懒,或为更简单地实现所需功能,使用了触发器.这可是把双刃剑,用得不好,程序出 ...
- .NET Core开发日志——OData
简述 OData,即Open Data Protocol,是由微软在2007年推出的一款开放协议,旨在通过简单.标准的方式创建和使用查询式及交互式RESTful API. 类库 在.NET Core中 ...