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和 ...
随机推荐
- pp 总结一
1.JQ $.get() <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- move_uploaded_file中文乱码
move_uploaded_file($_FILES['file']['tmp_name'],iconv("UTF-8","gb2312",$filname)
- stl测试
以下测试都在学校电脑进行 我觉得应该比考试机器慢一点.. 1.map map的速度测出来和放入数值大小有很大关系 比如 #include <bits/stdc++.h> using nam ...
- csv导入数据到mongodb3.2
mongoimport.exe -d paper -c paper K:\paper.csv --type csv -f id,name 数据库名 表名 文件所在位置 文件类型 ...
- Oracle impdp的ignore及 fromuser / touser 功能
作者:eygle |English [转载时请标明出处和作者信息]|[恩墨学院 OCM培训传DBA成功之道]链接:http://www.eygle.com/archives/2009/09/oracl ...
- Vim的合并行操作
日常常用到多行合并的功能,记录如下: 第一种, 多行合并成一行,即: AAAAABBBBBCCCCC 合并为:AAAAA BBBBB CCCCC 方法1: normal状态下 3J 其中的3是范围,可 ...
- DC3求后缀数组板子
#include<bits/stdc++.h> #define LL long long #define fi first #define se second #define mk mak ...
- Python 线程和进程
一.什么是线程 1.线程是操作系统能够进行运算调度的最小单位.它被包含在进程中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 ...
- 01++ Bookshelf 2
http://poj.org/problem?id=3628 就是比原题多了一个要求,输出>=m的最小值 kisang~独立做出来的都开心<(￣︶￣)> #include<cs ...
- 【JavaScript】浏览器
No1: [window]全局作用域,而且表示浏览器窗口 innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显 ...