vue15 自定义元素指令、标签指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
Vue.directive('red',function(){
this.el.style.background='red';//this是vm对象，
});
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
}; </script>
</head>
<body>
<div id="box">
<span v-red> <!-- 自定义指令，v-开头，属性指令-->
asdfasd
</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
Vue.directive('a-red',function(){//directive扩展指令，
this.el.style.background='red';
});
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
};
</script>
</head>
<body>
<div id="box">
<span a-red>
asdfasd
</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.directive('red',function(){
this.el.style.background='red';
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
}; </script>
</head>
<body>
<div id="box">
<span v-red>
asdfasd
</span>
<span v-red>
asdfasd
</span>
<span v-red>
asdfasd
</span>
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.directive('red',function(color){
this.el.style.background=color;
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
}
});
}; </script>
</head>
<body>
<div id="box">
<span v-red="a"> <!-- 传递参数 -->
asdfasd
</span>
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.directive('red',function(color){
this.el.style.background=color;
}); window.onload=function(){
var vm=new Vue({
el:'#box'
});
}; </script>
</head>
<body>
<div id="box">
<span v-red="'blue'"> <!-- 传递参数 -->
asdfasd
</span>
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.directive('red',{
bind:function(){
this.el.style.background='red';
}
}); window.onload=function(){
var vm=new Vue({
el:'#box'
});
}; </script>
</head>
<body>
<div id="box">
<span v-red>
asdfasd
</span>
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
Vue.directive('drag',function(){
var oDiv=this.el;//div
oDiv.onmousedown=function(ev){
var disX=ev.clientX-oDiv.offsetLeft;
var disY=ev.clientY-oDiv.offsetTop; document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
}; </script>
</head>
<body>
<div id="box">
<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
<div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
zns-red{
width:100px;
background: black;
height:100px;
display: block;
}
</style>
<script src="vue.js"></script>
<script> //元素指令 用的少
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
}); window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
}
});
}; </script>
</head>
<body>
<div id="box">
<zns-red></zns-red>
</div> </body>
</html>
vue15 自定义元素指令、标签指令的更多相关文章
- JSP（工作原理，组成部分，指令标签，动作标签，隐式对象）
目录 JSP JSP 什么是JSP JSP全名为Java Server Pages 中文名叫java服务器页面 它是在传统的网页HTML文件(.htm,.html)中插入Java程序段和JSP标记 后 ...
- vue自定义全局和局部指令
一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类 1.全局指令 2.局部指令 3.自定义全局指令格式 V ...
- Vue自定义组件实现v-model指令
Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...
- jsp include指令标签
假设须要在JSP页面内某处总体嵌入一个文件,就能够考虑使用这个指令标签. 该指令标签例如以下: <%@ include file ="文件的名字"%> 该指令标签的作用 ...
- JSP指令标签、动作标签
JSP有三大指令: * page指令 * include指令 * taglib指令 在JSP中没有任何指令是必须的!!! 但基本上每个JSP都是使用page指令! page指令 page ...
- angular指令，异步调用数据，监控数据的变化（自定义一个表头的指令）
angular框架中提供了很多有效的指令,指令的目的就是为了提高代码的复用率,提高工作效率. 下面我们自己来定义一个指令: 一点建议:写指令名字的时候,尽量不要用用大写,下划线等,否则会有很大的坑等着 ...
- JSP元素和标签
1.JSP 的运行原理 当服务器上的一个JSP 页面被第一次请求执行时,服务器上的JSP引擎首先将JSP 页面文件转译成一个java 文件,再将这个java 文件 编译生成字节码文件,然后通过执行字 ...
- angularJS 自定义元素和属性
创造自定义元素和属性的方法是:directive('string',function(){ return{}; }); ①函数接收两个参数:一个字符串(指令的名字),一个函数: ②回调函数必须返回一个 ...
- Android自定义控件之自定义ViewGroup实现标签云
前言: 前面几篇讲了自定义控件绘制原理Android自定义控件之基本原理(一),自定义属性Android自定义控件之自定义属性(二),自定义组合控件Android自定义控件之自定义组合控件(三),常言 ...
随机推荐
- 织梦(dedecms)循环调用多级子栏目如二级栏目下三级栏目
本文是关于织梦DedeCMS调用多级子栏目的,拿来分享下. 后台已经建好栏目,对于产品展示栏 栏目导航如下图所示: 复制代码 代码如下: {dede:channelartlist cacheid=' ...
- 紫书 例题 10-3 UVa 10375 （唯一分解定理）
这道题感觉非常的秀 因为结果会很大,所以就质因数分解分开来算 非常的巧妙! #include<cstdio> #include<vector> #include<cstr ...
- MySQL数据类型及后面小括号的意义
1,数值类型 1.1数值类型的种类 标准 SQL 中的数值类型,包括严格数值类型(INTEGER.SMALLINT.DECIMAL.NUMERIC),以及近似数值数据类型(FLOAT.REAL.DOU ...
- 2015 Multi-University Training Contest 2 hdu 5306 Gorgeous Sequence
Gorgeous Sequence Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Othe ...
- hadoop-07-ntp服务检查
hadoop-07-ntp服务检查 cd /etc/more /etc/ntp.conf里面进行了server的配置 service ntpd status / stop/ start 安装ntpd ...
- Android与设计模式——单例(Singleton)模式
概念: java中单例模式是一种常见的设计模式.单例模式分三种:懒汉式单例.饿汉式单例.登记式单例三种. 单例模式有一下特点: 1.单例类仅仅能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. ...
- 深度学习系列之ANN
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3F0aGFoYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- java匿名内部类的使用注意事项
1.首先匿名内部类要继承自抽象基类或者实现基类接口 like this abstract class Seed{ int cnt; public Seed(int x){ cnt=x; } abstr ...
- 汇编中中括号[]作用以及lea和mov指令的区别
现在总结一下:其中牵扯到lea指令,mov指令,[] 一.lea指令:对于寄存器来说:第二个操作数是寄存器必须要加[],不然报错,这里lea就是取[寄存器]的值,如:mov eax,2lea ebx, ...
- 【转】webshell检测——使用auditd进行system调用审计
本文档将介绍:如何通过Linux审计系统auditd监测WebShell执行系统命令的行为. 测试环境:CentOS7.0_x64 auditd简介 Linux审计系统提供了一种跟踪系统上与安全相关的 ...