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(五)自定义指令----（下）
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...
随机推荐
- 父窗体的委托，子窗体注册，this.Owner是关键
//声明委托 public delegate void RefreshParentHandler<T>(T obj); //父窗体的委托 public RefreshParentHandl ...
- 深入理解hive(1)
1.安装和配置: 1.1可以通过这个下载链接去下载hive源码来安装一个一个稳定版本的hive.https://cwiki.apache.org/confluence/display/Hive/Get ...
- jquery.validate.js表单验证 jquery.validate.js的用法
jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...
- linux环境下，springboot jar启动方式
linux环境下,springboot jar启动方式 一.前台启动(ctrl+c会关掉进程) java -jar application.jar 二.后台启动(ctrl+c不会关闭) java -j ...
- TVM调试指南
1. TVM安装 这部分之前就写过,为了方便,这里再复制一遍. 首先下载代码 git clone --recursive https://github.com/dmlc/tvm 这个地方最好使用--r ...
- webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI
webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...
- Burp破解安装(1.7和2.0)
依赖 由于Brup是使用java语言开发的,因此我们需要本地有jdk8的环境,教程自己百度或者<a href="https://www.runoob.com/java/java-env ...
- Ansible简单介绍（一）
一 :ansible简单介绍 此名取自 Ansible 作者最喜爱的<安德的游戏> 小说,而这部小说更被后人改编成电影 -<战争游戏>. 官网地址:https://www.an ...
- 3.LVS的三种工作模式_TUN模式
1.TUN模式(Virtual Server via IP Tunneling) 采用NAT模式时,由于请求和响应的报文必须通过调度器地址重写,当客户请求越来越多时,调度器处理能力将成为瓶颈.为了解决 ...
- Oracle11g adump目录下面.aud增长导致空间撑满无法删除导致CRS无法启动的解决方法
[root@node1 adump]# pwd /u01/app/oracle/admin/node/adump 大概有10000个文件 rm -rf * 屏幕显示: -bash: /bin/rm: ...