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 { ... }上下文:根描述:保存所 ...
随机推荐
- 记华硕小主机装xp并给nokia e7-00 刷机
前言 事情是这样的,年前给早先收的小e买了触摸外屏.这会儿有空就给它换上了屏幕,然后尝试装app的时候,发现证书有问题. 根据以往使用n73的经验,然后就百度怎么破解证书. 然后我发现,这些东西网上资 ...
- Excel导出采用mvc的ExcelResult继承遇到的问题Npoi导出
#region 构建Excel文档 //创建Excel文件的对象 NPOI.HSSF.UserModel.HSSFWorkbook book = new NPOI.HSSF.UserModel.HSS ...
- php登录注册
php 登录注册 注册代码:register.php <style type="text/css"> form{ width:300px; background-col ...
- 机器学习总结(八)决策树ID3,C4.5算法,CART算法
本文主要总结决策树中的ID3,C4.5和CART算法,各种算法的特点,并对比了各种算法的不同点. 决策树:是一种基本的分类和回归方法.在分类问题中,是基于特征对实例进行分类.既可以认为是if-then ...
- Easy to Remember Color Guide for Non-Designers
Notes: I'm not a designer. This is what i've self-learnt over the years because i couldn't afford go ...
- Mybatis学习之一
mybatis是目前市面上最流行的ORM框架之一,作为JavaEE程序员,在工作中不可能不用到mybatis.所以为了工作,为了学习,为了个人的发展,每个JavaEE程序员都要学习,学会mybatis ...
- Linear Regression with machine learning methods
Ha, it's English time, let's spend a few minutes to learn a simple machine learning example in a sim ...
- python生成可执行exe文件
为什么要生成可执行文件 不需要安装对应的编程环境 可以将你的应用闭源 用户可以方便.快捷的直接使用 打包工具 pyinstaller 安装pyinstaller pip install pyinsta ...
- CopyOnWriteArrayList与Collections.synchronizedList的性能对比(转)
列表实现有ArrayList.Vector.CopyOnWriteArrayList.Collections.synchronizedList(list)四种方式. 1 ArrayList Array ...
- django+nginx+gunicorn+pipenv微信小程序实践笔记
一.我采用pipenv来管理虚拟环境,在本地新建虚拟环境: mkdir wxProject #进入环境目录,创建虚拟环境 pipenv install #激活虚拟环境 pipenv shell #然后 ...