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和 ...
随机推荐
- IO流-file
1.1 IO概述 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再把 ...
- Flink--Table和DataStream和DataSet的集成
将DataStream或DataSet转换为表格 在上面的例子讲解中,直接使用的是:registerTableSource注册表 对于flink来说,还有更灵活的方式:比如直接注册DataStream ...
- 2018牛客网暑假ACM多校训练赛（第五场）F take 树状数组,期望
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round5-F.html 题目传送门 - https://www.no ...
- svn图标的含义
http://www.cnblogs.com/genhaosan/articles/5129791.html
- mysql order by多个字段
Mysql order by 多字段排序 mysql单个字段降序排序: select * from table order by id desc; mysql单个字段升序排序: select * fr ...
- miniui表格load数据成功后，回调函数，其中setData要用如下方法
init: function () { mini.parse(); this.grid = mini.get("jsDatagrid"); var grid1 = mini.get ...
- 2018WFU校赛B题
我们在ACM的题目中已经了解了什么是ACM了,ACM还是很残酷的了(ಥ _ ಥ),那么现在你就要解决一个ACM最简单的题了,简单到省赛和区域赛都不会出这种简单的题.ls很强,即使每年都在ACM这个大坑 ...
- CentOS 7开机出现welcome to emergency mode! 解决方法
CentOS7.3昨天用的还好好的的,但是今天开机提示如下(如图提示):welcome to emergency mode!after logging in ,type “journalctl -xb ...
- JavaEE 之 Spring Data JPA
1.事务 a.事务的关键属性(ACID) ①原子性(atomicity):事务的原子性确保动作要么全部完成,要么完全不起作用 ②一致性(consistency):一旦所有事务动作完成,事务就被提交.也 ...
- startActivity进行Hook
--摘自<android插件化开发指南> 1.Activity的startActivity和Context的startActivity都是在app进程中通知AMS要启动哪个Activity ...