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自定义控件之自定义组合控件(三),常言 ...
随机推荐
- LightOJ-1074 Extended Traffic 最短路问题 注意连通性
题目链接:https://cn.vjudge.net/problem/LightOJ-1074 题意 给一图 求最短路 若最短路<3或没有最短路,则输出'?' 思路 首先注意到可能存在负环,所以 ...
- layui Layui-Select多选的使用和注意事项
1.最近买了layadmin的后台框架,使用Layui-Select总结如下 A.配置:我采用的全局引入配置的方式 赋值(选中状态)
- 总结使人进步,可视化界面GUI应用开发总结：Android、iOS、Web、Swing、Windows开发等
可视化界面的软件,是21世纪最主流的应用类型了,黑屏控制台的不适合普通用户. 2004年左右的时候,作为普通网民,接触的自然是可视化,准确是Windows那一套. 那个时候,Microsoft ...
- Docker学习总结（8）——利用Docker开启持续交付之路
持续交付即Continuous Delivery,简称CD,随着DevOps的流行正越来越被传统企业所重视.持续交付讲求以短周期.小细粒度,自动化的方式频繁的交付软件,在这个过 程中要求开发.测试.用 ...
- How to enable wire logging for a java HttpURLConnection traffic?
https://stackoverflow.com/questions/1445919/how-to-enable-wire-logging-for-a-java-httpurlconnection- ...
- COGS——T 1578. 次小生成树初级练习题
http://www.cogs.pro/cogs/problem/problem.php?pid=1578 ☆ 输入文件:mst2.in 输出文件:mst2.out 简单对比时间限制:1 ...
- Qt之图形（绘制漂亮的圆弧）
简述 综合前面对二维绘图的介绍,想必我们对一些基本绘图有了深入的了解,下面我们来实现一些漂亮的图形绘制. 简述 圆形 效果 源码 弧形 效果 源码 文本 效果 源码 旋转 效果 源码 圆形 经常地,我 ...
- 最强最全干货分享：Android开发书籍、教程、工具等
最全干货分享,本文收集整理了Android开发所需的书籍.教程.工具.资讯和周刊各种资源,它们能让你在Android开发之旅的各个阶段都受益. 入门<Learning Android(中文版)& ...
- [MST] Describe Your Application Domain Using mobx-state-tree(MST) Models
In this lesson, we introduce the running example of this course, a wishlist app. We will take a look ...
- vb.net版机房收费系统——教你七层架构（三）—外观模式
上次我们看到了D层是如何运作的,如今.我简单演示一下我的外观和B层是如何和U层和D层打交道的. 首先我跟大家说的是我的外观是依照界面功能划分的,粒度有点小,大家在做的时候,记得外观有几个即可了,可是不 ...