Vue中自定义指令的使用方法!
除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:(咳咳,借官网的用一用)
1、定义全局的自定义变量
main.js
Vue.directive('color',{
inserted(el){
// 各单位注意,这里的el获取的是标签元素,说白了就是可以直接操作DOM
console.log(el)
el.style.color = "red"
}
})
app.vue,这里直接写v-color就可以;
<div >前端伪大叔</div>
<div v-color>前端伪大叔</div>
2、自定义指令中,添加属性;
Vue.directive('color',{
bind(el,binding){
switch(binding.value){
case 'red':
el.style.color = 'red'
break;
case 'blue':
el.style.color = 'blue'
break;
}
}
})
App.vue
<div >前端伪大叔</div>
<div v-color="'red'">前端伪大叔</div>
<div v-color="'blue'">前端伪大叔</div>
可以通过给自定义的属性,添加属性的方式来修改颜色;当然不仅仅只能修改颜色这么简单,因为el直接获得了DOM,所以你懂得!
3、组件内指令-只有自己组件可以使用
注意:directives是一个对象,里面定义的自定义指令也是对象!
// template
<div >前端伪大叔</div>
<div v-color>前端伪大叔</div> // script
// 这里是对象
directives:{
// 每个指令都是一个对象
color:{
inserted(el){
el.style.color = 'cyan'
}
}
}
4、组件内的自定义指令,增加属性
// template
<div v-color="'red'">前端伪大叔</div>
<div v-color="'blue'">前端伪大叔</div>
// script
// 这里是对象
directives:{
// 每个指令都是一个对象
color:{
bind(el,binding){
if(binding.value == 'red'){
el.style.color = 'red'
}else if (binding.value = 'blue'){
el.style.color = 'blue'
}
}
}
}
给大家奉上地址:https://cn.vuejs.org/v2/guide/custom-directive.html
如果大家喜欢的话,欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识!
Vue中自定义指令的使用方法!的更多相关文章
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- vue中自定义指令的使用
原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...
- 051——VUE中自定义指令:directive
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 017——VUE中v-fo指令的使用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue怎么自定义指令??
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- Vue(九) 自定义指令
前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...
- Vue 3自定义指令开发
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
随机推荐
- python:网络爬虫的学习笔记
如果要爬取的内容嵌在网页源代码中的话,直接下载网页源代码再利用正则表达式来寻找就ok了.下面是个简单的例子: import urllib.request html = urllib.request.u ...
- PHPstrom中关闭提示信息
设置里面搜索parameter name hints
- linux 禁ping
今天用nmap扫描了局域网的主机,发现几个主机开着好多危险端口,做linux的,对这些安全知识有一点了解.遂用nmap扫描了自己的主机是否存在可利用端口.发现每次nmap都能成功的检测我的主机是ali ...
- Linux配置Key,禁止root实现免密码登陆
前言: 我所理解的是Key登陆认证方式,其实就是拿私钥去解密公钥,私钥需要自己妥善保管,公钥可以随意公开. 废话少说,准备2台服务器,Server1:192.168.1.1 Serv ...
- GIS面积计算问题
好长时间不更新了,今天说点干货,项目用到的. 1.项目中要用到计算面积的,根据火星坐标: 2.百度找了各种面积计算,google了半天,也没发现那个比较准确: 直接说干货吧.咱也高大上一会,用 Arc ...
- vs install 安装时自动添加注册表
思路:使用自定义 解决方案添加类库项目 添加安装程序类 随后右键查看代码 在构造函数添加事件 同时完成这个事件,在此事件中根据需要添加我们需要的内容,此处为添加注册表,并根据安装目录添加url pro ...
- __linux__、__POSIX__宏
__linux__用于定义linux,__POSIX__不太了解,各系统的宏有如下: std::string getOsName() { #ifdef _WIN32 return "Wind ...
- c# 匿名类型获取值
代码片段: 读取 new{ ....} 方法1:转换为json对象 dynamic model = SaleOrderServices.GetGiftOrderById(WebHelper.GetQu ...
- Sublime Text3学习参考集
1.如何优雅地使用Sublime Text: http://jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#three 持续更新中..... ...
- JavaScript(2):函数
<!DOCTYPE html> <html> <body> <p>JavaScript 函数</p> <script> // 函 ...