Vue_(组件)自定义指令
Vue.js自定义指令 传送门
自定义指令：除了内置指令，Vue也允许用户自定义指令
注册指令：通过全局API Vue.directive可以注册自定义指令
自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode
Learn
一、自定义指令钩子函数
二、自定义指令钩子函数的参数
三、自定义指令简写
项目结构
【每个demo下方都存有html源码】
一、自定义指令钩子函数 传送门
自定义指令的钩子函数：
bind：只调用一次，指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用
自定义指令的使用：在自定指令的名称前加 上 v-；
通过button点击按钮来控制是否解除绑定
<div id="GaryId">
<input type="text" v-model="name"/><br />
name:<span v-if="flag" v-demo ref='name'>{{name}}</span><br />
<button @click="flag=!flag">解除绑定</button>
</div>
Vue.directive('demo',{
//指令的钩子函数
bind(){
alert("bind 首次绑定到元素时候执行，执行一次，常用于数据的初始化操作");
},
inserted(){
alert("instered 插入到父节点之后，DOM对象");
},
unbind(){
alert("unbind 解除绑定");
},
update(){
alert("updata 绑定该指令的元素 所在的Vue实例挂载的DOM树 发生更新时候调用"+"name ="+vm.$refs.name.textContent);
},
componentUpdated(){
alert("componentUpdated 更新后调用"+"name ="+vm.$refs.name.textContent);
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div id="GaryId">
<input type="text" v-model="name"/><br />
name:<span v-if="flag" v-demo ref='name'>{{name}}</span><br />
<button @click="flag=!flag">解除绑定</button>
</div>
</body> <script> Vue.directive('demo',{
//指令的钩子函数
bind(){
alert("bind 首次绑定到元素时候执行，执行一次，常用于数据的初始化操作");
},
inserted(){
alert("instered 插入到父节点之后，DOM对象");
},
unbind(){
alert("unbind 解除绑定");
},
update(){
alert("updata 绑定该指令的元素 所在的Vue实例挂载的DOM树 发生更新时候调用"+"name ="+vm.$refs.name.textContent);
},
componentUpdated(){
alert("componentUpdated 更新后调用"+"name ="+vm.$refs.name.textContent);
} }); let vm = new Vue({
data:{
name:'Gary',
flag:true
}
}).$mount('#GaryId'); </script> </html>
Gary_Custom_Directive.html
二、自定义指令钩子函数的参数 传送门
自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode；
el：获取DOM对象；
binding：一个包含很多属性的对象；
vnode：Vue编译生成的虚拟节点；
oldVnode：上一个虚拟节点；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div id="GaryId">
<input type="text" v-model="name" /><br />
name : <span v-demo.once.stop='name' ref='name'>{{name}}</span><br />
<button v-on:click="flag = !flag">click
</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:{
name:'Gary',
flag:true
}
}).$mount('#GaryId'); </script> </html>
Gary_Custom_Directive-02.html
三、自定义指令简写 传送门
通过directives指令和focus指令实现修改样式和加载页面时自动聚焦
<div id="GaryId">
<!--通过v-focus标签，当页面加载时，自动聚焦到这个表单上-->
<input type="text" v-model="name" v-focus/><br />
name : <span v-font_style:blue>{{name}}</span><br />
</body>
directives : {
font_style : function(el, binding){
el.style.color = binding.arg;
},
//聚焦
focus:{
inserted(el){
el.focus();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div id="GaryId">
<!--通过v-focus标签，当页面加载时，自动聚焦到这个表单上-->
<input type="text" v-model="name" v-focus/><br />
name : <span v-font_style:blue>{{name}}</span><br />
</body> <script> let vm = new Vue({
data : {
name : 'Gary',
flag : true
},
directives : {
font_style : function(el, binding){
el.style.color = binding.arg;
},
focus : {
inserted(el){
el.focus();
}
}
}
}).$mount('#GaryId'); </script> </html>
Gary_Custom_Directive-03.html
Vue_(组件)自定义指令的更多相关文章
- 在angular7中创建组件/自定义指令/管道
在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...
- 前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
- vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件
vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue_自定义指令
关于Vue的自定义指令: - 在Vue中除了核心功能默认内置的指令(v-model & v-show) - Vue也允许注册自定义指令. 注意,在 Vue2.0 中,代码复用和抽象的主要形式是 ...
- vue组件、自定义指令、路由
1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- 使用Vue自定义指令实现Select组件
完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
- Angular的自定义指令以及实例
本文章已收录于: AngularJS知识库 分类: javascript(55) http://www.cnblogs.com/xiaoxie53/p/5058198.html 前面的文章介 ...
- 走进AngularJs(五)自定义指令----（下）
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...
随机推荐
- Bootstrap3基础教程 03 导航栏
Bootstrap导航栏 创建一个默认的导航栏的步骤如下: 1.向 <nav> 标签添加 class .navbar..navbar-default. 2.向上面的元素添加 role=&q ...
- vue-cli3配置eslint
一.默认配置 以下是package.json文件中关于的eslint默认配置 "eslintConfig": { "root": true, "env ...
- 关于VSS(Volume Shadow Copy Service)一
在开发windows VSS应用程序时 我们应该先下载相关SDK,微软描述如下 When developing your own VSS application, you should observe ...
- vscode调试npm包技巧
官网文档:https://code.visualstudio.com/docs/nodejs/nodejs-debugging node调试方法(日志和debuuger):https://blog.r ...
- JVM学习笔记（一，待整理）
1. 2. 3. 4.-Xint.-Xcomp.-Xmixed 在解释模式(interpreted mode)下,-Xint标记会强制JVM执行所有的字节码,当然这会降低运行速度,通常低10倍或更多. ...
- 读书笔记《Oracle从入门到精通》
目录 一.SQL基础 1.SQL种类 2.常用数据类型 3.DDL 4.约束 5.DML语句 二.SELECT语句 1.结果集'*'与指定列 2.拼接符 || 3.substr函数 4.instr函数 ...
- mysql之使用json
从mysql 5.7开始才有 创建表(含有json类型) CREATE TABLE `emp_details` ( `emp_no` int(11) NOT NULL, `details` json ...
- 基于docker安装pxc集群
基于docker安装pxc集群 一.PXC 集群的安装 PXC集群比较特殊,需要安装在 linux 或 Docker 之上.这里使用 Docker进行安装! Docker的镜像仓库中包含了 PXC数据 ...
- 裸磁盘上ext4与xfs在线扩容,非LVM
虚拟机添加一个20G的硬盘,磁盘为sdb,分区为ext4 格式化一个5Gib的磁盘出来,用dd命令写入4G数据. 一.需求是容量为5G的磁盘,文件系统为ext4的sdb1扩容到10G. 操作步骤为 1 ...
- monkeyrunner录制和回放功能
脚本录制 网上先是搜索了一下,说是SDK--tools目录下有monkey_recorder.py和monkey_playback.py的脚本,但是我的没有找到所以可以自己编辑个脚本保存即可~ 先编辑 ...