Vue.directive添加全局指令详解
自定义指令创建:
Vue.directive( 'mycolor(指令名称:推荐全部小写,驼峰命名会出现问题,看最后面)' , {
bind:function(){},
//本例只介绍inserted
inserted:function(el, binding){
el.style.color="red"; // 第一种使用
el.style.color=binding.value; // 第二种使用
//el: dom元素; binding: 一个对象,里面包含着vue实例data里面的数据
},
update:function(){},
compinentUpdated:function(){},
unbind:function(){}
});
new一个vue对象实例:
var vm = new Vue({
data:{
color:"gold"
}
})
应用:
<p v-mycolor> test文本 </p> //第一种使用,结果是红色字体
<p v-mycolor="color"> test文本</p> // 第二种使用,结果是金色字体
问题:
指令定义时使用驼峰命名,假如命名为myColor,那么应用的时候写的是v-myColor会报错,正确应该是写v-my-color,所以推荐全部小写。
Vue.directive添加全局指令详解的更多相关文章
- vue.js基础知识篇(2):指令详解
第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...
- Vue插件编写、用法详解(附demo)
Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...
- 迈向angularjs2系列(2):angular2指令详解
一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...
- pragma comment的使用 pragma预处理指令详解
pragma comment的使用 pragma预处理指令详解 #pragma comment( comment-type [,"commentstring"] ) 该宏放置一 ...
- pragma指令详解(转载)
#pragma comment( comment-type [,"commentstring"] ) 该宏放置一个注释到对象文件或者可执行文件.comment-type是一个预定义 ...
- npm安装vue详细教程(图片详解)
npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...
- #pragma 预处理指令详解
源地址:http://blog.csdn.net/jx_kingwei/article/details/367312 #pragma 预处理指令详解 在所有的预处理指令中, ...
- Docker技术入门与实战 第二版-学习笔记-3-Dockerfile 指令详解
前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件 格式: COPY <源路径> .. ...
- nginx.conf中关于nginx-rtmp-module配置指令详解
译序:截至 Jul 8th,2013 官方公布的最新 Nginx RTMP 模块 nginx-rtmp-module 指令详解.指令Corertmp语法:rtmp { ... }上下文:根描述:保存所 ...
随机推荐
- 自动化工具-ansible服务部署与使用
1.前言 1.1ansible软件介绍 python 语言是运维人员必须会的语言 ansible 是一个基于python 开发的自动化运维工具 其功能实现基于ssh远程连接服务 ansible 可以实 ...
- CEF 支持JSON操作
转载:https://blog.csdn.net/foruok/article/details/50687864(解析json) 转载:https://blog.csdn.net/foruok/art ...
- Python模块 2
collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型: 1.namedtuple: 生成可以使用名字来访问 ...
- 一.MySQL安装
版本:linux7.6 一.编译安装 1.下载epel源 [root@db01 ~]# wget -O /etc/yum.repos.d/epel.repo https://mirrors.aliyu ...
- 关于文件目录等的特殊权限setuid, setgid , sticky chattr, lsattr
有三种特殊权限 总之, 设置这些特殊权限有两种方法, 一是使用 chmod ugo的方式, 另一个是 使用 数字的方式, 通常的读写执行 权限 是 3位 数字, 那么 特殊权限 就用 4位数字, 而且 ...
- 信息安全之路-web-xss学习(3)
DOM型xss DOM型xss属于在客户端执行的xss,并不经过服务端解析.测试过程如下 Low型: 源代码: <script> if (document.location.href.in ...
- CI框架简单使用
CodeIgniter框架 1.回忆MVC 1.1.M:模型,提供数据,保存数据 1.2.V:视图,只负责显示,表单form 1.3.C:控制器,协调模型和视图 1.4.action:动作,是控制器中 ...
- 拿取页面值 跟拿取value里面的值
拿取页面输入框的数值 使用 val() val()设置或返回表单字段的值 拿取value里面的数值 value(); attr() 获取属性值
- lua --- 表操作
c api 参考手册:http://www.leeon.me/a/lua-c-api-manual // LuaTest.cpp : 定义控制台应用程序的入口点. // #include " ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序
jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...