Vue（十三）自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){
/**
* 自定义全局指令
* 注：使用指令时必须在指名名称前加前缀v-，即v-指令名称
*/
Vue.directive('hello',{
bind(){ //常用！！
alert('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作');
},
inserted(){
alert('被绑定元素插入到DOM中时调用');
},
update(){
alert('被绑定元素所在模板更新时调用');
},
componentUpdated(){
alert('被绑定元素所在模板完成一次更新周期时调用');
},
unbind(){
alert('指令与元素解绑时调用，只调用一次');
}
})
//钩子函数的参数
Vue.directive('word',{
bind(el,binding){
el.style.color = 'red';
console.log(binding);
console.log(binding.value); // 拿到指令所传的值 Jan
console.log(binding.expression); // 拿到指令所绑定的名字 userName
console.log(binding.arg); // 给指令传参数
console.log(binding.modifiers); // 给指令传参数
}
}) //传入一个简单的函数，bind和update时调用
Vue.directive('nihao',function(){
alert('nihao');
}); var vm = new Vue({
el:'#app',
data:{
msg:'Welcome to China',
msg2:'Hello World !',
userName:'Jane'
},
methods:{
change(){
this.msg = "欢迎来到中国"
}
},
directives:{ //自定义局部指令
focus:{
//当被绑定元素插入到DOM中时获取焦点
inserted(el){
el.focus();
}
}
}
})
} </script>
</head> <body> <div id="app">
<h3 v-hello>{{msg}}</h3>
<button @click="change">更新数据</button> <hr> <h3 v-word:yulingjia.hehe='userName'>{{msg2}}</h3> <hr> <h3 v-nihao>111222333444555666</h3> <hr> <input type="text" v-model="msg" v-focus>
</div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){
// 自定义全局指令
Vue.directive('drag',function(el){
el.onmousedown=function(e){
//获取鼠标点击处分别与div左边和上边的距离：鼠标位置 - div位置
//clientX clientY 鼠标点击时鼠标的坐标
//offsetLeft offsetTop 该DOM元素div 左边和上边的距离
//disX disY 鼠标点击的地方距离div左边和上边的距离 var disX=e.clientX-el.offsetLeft;
var disY=e.clientY-el.offsetTop;
console.log(disX,disY); //包含在onmousedown里面，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
document.onmousemove=function(e){
//获取移动后div的位置：鼠标位置-disX/disY
el.style.left=e.clientX - disX + 'px';
el.style.top=e.clientY - disY + 'px';
} //停止移动
document.onmouseup=function(e){
document.onmousemove=null;
document.onmouseup=null;
}
}
}) var vm = new Vue({
el:'#app',
data:{
hello:"你好",
word:"世界",
}
}) } </script> <style>
#app div{
width: 100px;
height: 100px;
position: absolute;
color:#fff;
} #app .hello{
background-color: red;
top:0;
left:0;
} #app .word{
background-color: blue;
top:0;
right: 0;
}
</style> </head> <body> <div id="app">
<div class="hello" v-drag>{{hello}}</div>
<div class="word" v-drag>{{word}}</div>
</div> </body> </html>
Vue（十三）自定义指令的更多相关文章
- 最简单的方式理解Vue的自定义指令与混合
vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...
- Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
- vue 通过自定义指令实现 置顶操作；
项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 ...
- vue怎么自定义指令？？
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- Vue.directive 自定义指令
一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue 3自定义指令开发
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...
- vue.js自定义指令入门
Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...
随机推荐
- Android设备一对多录屏直播--(UDP组播连接,Tcp传输)
原文:https://blog.csdn.net/sunmmer123/article/details/82734245 近期需要学习流媒体知识,做一个Android设备相互投屏Demo,因此找到了这 ...
- vue中methods一个方法调用另外一个方法
转自http://blog.csdn.net/zhangjing1019/article/details/77942923 vue在同一个组件内: methods中的一个方法调用methods中的另外 ...
- 【BZOJ】3022: [Balkan2012]The Best Teams
原题链接 题面 (为啥这题没有题面-- 给出\(N\)个人,和年龄\(age_{i},skill_{i}\) 然后给出\(M\)个询问,就是年龄在\(a\)以下选不超过\(k\)个人 要求选择的人水平 ...
- mongo 分片
// use ebay // sh.enableSharding("ebay") // db.getCollection("ebay_total_menu_detail_ ...
- ELK使用2-Kibana使用
一.创建kibana索引 1.es索引可以在这儿查看 2.kibana创建索引可以在这儿查看(必须es中存在相应的索引才能在kibana中创建) 点击创建然后选择es中存在的索引即可创建相应的索引 3 ...
- IDEA链接mySql问题 : You have an error in your SQL syntax : 'OPTION SQL_SELECT_LIMIT=1000' （or 'OPTION SQL_SELECT_LIMIT=DEFAULT'）
IDEA控制台错误信息: check the manual that corresponds to your MySQL server version for the right Code: 1064 ...
- 003 使用SpringMVC开发restful API--查询用户
一:介绍说明 1.介绍 2.restful api的成熟度 二:编写Restful API的测试用例 1.引入spring的测试框架 在effective pom中查找 2.新建测试包,测试类 3.测 ...
- 071 SparkStreaming与SparkSQL集成
1.说明 虽然DStream可以转换成RDD,但是如果比较复杂,可以考虑使用SparkSQL. 2.集成方式 Streaming和Core整合: transform或者foreachRDD方法 Cor ...
- Get与Post方法的区别
Http协议定义了很多与服务器交互的方法,最基本的有4种,分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源,而HTTP中的GET, POST, PUT, DELE ...
- python数据结构之希尔排序
def shell_sort(alist): n=len(alist) gap= int(n / 2) #步长 while gap>0: for i in range(gap,n): j=i w ...