除了核心功能默认内置的指令 (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中自定义指令的使用方法!的更多相关文章

  1. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  2. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  3. vue中自定义指令的使用

    原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...

  4. 051——VUE中自定义指令:directive

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 017——VUE中v-fo指令的使用方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  7. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  8. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

  9. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

随机推荐

  1. python:网络爬虫的学习笔记

    如果要爬取的内容嵌在网页源代码中的话,直接下载网页源代码再利用正则表达式来寻找就ok了.下面是个简单的例子: import urllib.request html = urllib.request.u ...

  2. PHPstrom中关闭提示信息

    设置里面搜索parameter name hints

  3. linux 禁ping

    今天用nmap扫描了局域网的主机,发现几个主机开着好多危险端口,做linux的,对这些安全知识有一点了解.遂用nmap扫描了自己的主机是否存在可利用端口.发现每次nmap都能成功的检测我的主机是ali ...

  4. Linux配置Key,禁止root实现免密码登陆

    前言:        我所理解的是Key登陆认证方式,其实就是拿私钥去解密公钥,私钥需要自己妥善保管,公钥可以随意公开. 废话少说,准备2台服务器,Server1:192.168.1.1   Serv ...

  5. GIS面积计算问题

    好长时间不更新了,今天说点干货,项目用到的. 1.项目中要用到计算面积的,根据火星坐标: 2.百度找了各种面积计算,google了半天,也没发现那个比较准确: 直接说干货吧.咱也高大上一会,用 Arc ...

  6. vs install 安装时自动添加注册表

    思路:使用自定义 解决方案添加类库项目 添加安装程序类 随后右键查看代码 在构造函数添加事件 同时完成这个事件,在此事件中根据需要添加我们需要的内容,此处为添加注册表,并根据安装目录添加url pro ...

  7. __linux__、__POSIX__宏

    __linux__用于定义linux,__POSIX__不太了解,各系统的宏有如下: std::string getOsName() { #ifdef _WIN32 return "Wind ...

  8. c# 匿名类型获取值

    代码片段: 读取 new{ ....} 方法1:转换为json对象 dynamic model = SaleOrderServices.GetGiftOrderById(WebHelper.GetQu ...

  9. Sublime Text3学习参考集

    1.如何优雅地使用Sublime Text: http://jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#three 持续更新中..... ...

  10. JavaScript(2):函数

    <!DOCTYPE html> <html> <body> <p>JavaScript 函数</p> <script> // 函 ...