vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中，我们平时数据驱动视图时候，内部自带的指令有时候解决不了一些需求，这时候，Vue给我们一个很好用的东东
directive
这个单词是我们写自定义指令的关键字哦
之定义指令为我们提供了几个钩子函数，这时候你一定好奇什么是钩子函数，说简单点，就是集中表现状态
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。unbind: 只调用一次， 指令与元素解绑时调用。
下面我们开始上代码，让我们更好的理解自定义指令怎么做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"> <div class="ab" v-css="{'color':'red','font-size':'30px'}">
hello
</div>
<input type="text" v-focus>
</div> </body>
</html>
在html中，我们看到了两个指令v-css和v-focus
我们自定义指令时候，一定前面要带上v-
Vue.directive("css",{
//钩子函数 ,el就是当前元素
inserted(el,binding){
//el绑定的元素本身
//binding就是css指令里面的的对象元素
let styleobj=binding.value,arr=[];
for(let key in styleobj){
arr.push(key+":"+styleobj[key])
}
arr=arr.join(";");
el.style.cssText=arr;
},
bind(el,binding) {
//指令绑定在元素上时候执行，只执行一次
}
});
new Vue({
el:'#app',
data:{
show:true
},
directives:{
focus:{
inserted(el,binding){
//el绑定的元素本身
//binding就是css指令里面的的对象元素
el.focus();
}
}
}
});
在js里面我们可以看到
Vue.directive("css",{}）
我们在 new Vue外部定义了这样一段代码,这就是我们全局自定义指令的模板方式
css是自定义指令的名字
{}里面我们写上钩子函数就可以
我们所有的钩子函数里面，基本都会有2个参数el,binding
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding 绑定元素本身的一个对象
从上面我们可以看到，binding里面保留绑定指令的name和value，这些很重要
局部自定义指令
directives:{
name:{
}
}
区别在于，我们写在new Vue里面，里面api操作和上面的全局自定义指令一样
下面我们开始看代码运行结果
我们可以看到样式引用上去了
文本框也获取了焦点
vue.js实现内部自定义指令和全局自定义指令------directive的更多相关文章
- Vue.js学习使用心得（二）——自定义指令
自定义指令 除了核心功能默认内置的指令,Vue 也允许注册自定义指令. 自定义指令可以定义全局指令,也可以定义局部指令. 使用 directives 选项来自定义指令. 定义全局指令: <div ...
- Vue.js 学习笔记 第5章 内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...
- vue 之 render 函数不能渲染非全局自定义函数－方案
import customCom from 'xxx.vue' render: (h) => { return h(customCom) }
- Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器
目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- Vue.js 2.x笔记：指令（4）
1. 内置指令 指令是Vue.js 中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM 行为. Vue.js 本身提供了大量的内置指令来进行对DOM 的操作,同时可以开发自定义指令. 2. ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 1.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
随机推荐
- 开涛spring3(4.2) - 资源 之 4.2 内置Resource实现
4.2 内置Resource实现 4.2.1 ByteArrayResource ByteArrayResource代表byte[]数组资源,对于“getInputStream”操作将返回一个By ...
- java虚拟机学习-JVM内存管理：深入Java内存区域与OOM(3)
概述 Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的高墙,墙外面的人想进去,墙里面的人却想出来. 对于从事C.C++程序开发的开发人员来说,在内存管理领域,他们即是拥有最高权力的皇帝又 ...
- OpenStack云平台的网络模式及其工作机制
网络,是OpenStack的部署中最容易出问题的,也是其结构中难以理清的部分.经常收到关于OneStack部署网络方面问题和OpenStack网络结构问题的邮件.下面根据自己的理解,谈一谈OpenSt ...
- zookeeper的安装与配置
本文将通过三个zookeeper的节点去配置 1.首先去官网下载zookeeper的包 zookeeper-3.4.10.tar.gz 2.用FTP文上传到/usr/local下 3.解压文件tar ...
- python_day5--->递归函数,二分法查找
li = [1, 5, 6, 7, 12, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333]def er(num,li): if len(li) ==0: ...
- source install sshpass in aix
1.源码下载: wget https://nchc.dl.sourceforge.net/project/sshpass/sshpass/1.06/sshpass-1.06.tar.gz 2.解压 ...
- SQL注入攻击[详解]
SQL注入攻击是黑客对数据库进行攻击的常用手段之一.随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多.但是由于程序员的水平及经验也参差不齐,相当大一部分程序员在编写代码的时候, ...
- IntelliJ IDEA 2017.1.4 x64配置说明
只是为了研究下idea这款编译器怎么使用.开门见山,说下如何配置这款编译器,不配置也能用,但是强迫症表示不服.下面直入正题: 下载与安装就不说了,除了更改安装目录外,没啥注意的地方,建议下载idea去 ...
- 修改cms版权等等信息
目的:为DedeCMS换上精美多样的提示信息窗口 用到的开源项目:DedeCMS,artdialog 步骤: 1.下载include.rar文件完成后,解压得到2个php文件和一个使用说明文件,将ph ...
- Tomcat启动报错java.lang.UnsatisfiedLinkError
之前tomcat启动老是报错,虽然不影响项目的启动运行,但是有强迫症的程序员会心里不爽: 问题是由于本机安装的jdk版本与tomcat中使用的jdk版本不一致导致的. 后面我把原先tomcat启动环境 ...