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和 ...
随机推荐
- Nodejs通过账号密码连接MongoDB数据库
转自https://blog.csdn.net/szu_lzz/article/details/77435804#commentBox 1.创建管理员 首先开启Mongo服务,然后切换admin数据库 ...
- F. 数学上来先打表
题解: 搞这题搞了一天 思维不是很难 就是暴力压位bitset 分块做法速度更快 但是stl里的不能实现这个功能 所以手动实现 64位压一位 到65535跑一下1的个数 然后(x>>16) ...
- dedecms首页入口的详细注释
今天闲来无事,就拿来dede首页的文件给大家详细解释一遍,以便于新手学习,注释过程非常非常非常的详细,里面解释到dede表前缀#@__代替的原理.解释到dede很多自定义函数的具体位置和具体作用等等疑 ...
- Flink运行在yarn上
在一个企业中,为了最大化的利用集群资源,一般都会在一个集群中同时运行多种类型的 Workload.因此 Flink 也支持在 Yarn 上面运行: flink on yarn的前提是:hdfs.yar ...
- Codeforces 442D Adam and Tree dp (看题解)
Adam and Tree 感觉非常巧妙的一题.. 如果对于一个已经建立完成的树, 那么我们可以用dp[ i ]表示染完 i 这棵子树, 并给从fa[ i ] -> i的条边也染色的最少颜色数. ...
- JAXB在Java 9/10并且使用Tomcat 9的问题
Implementation of JAXB-API has not been found on module path or classpath. JAXB API是java EE 的API,jav ...
- P2577 [ZJOI2005]午餐 状压DP
题目描述 上午的训练结束了,THU ACM小组集体去吃午餐,他们一行N人来到了著名的十食堂.这里有两个打饭的窗口,每个窗口同一时刻只能给一个人打饭.由于每个人的口味(以及胃口)不同,所以他们要吃的菜各 ...
- Cygwin命令
Cygwin是一个用于在Windows上模拟Linux环境的软件. 通过cygwin,可以在windows环境下使用linux的程序,像find.tar等一些工具也可以在windows下使用,让我们可 ...
- Maya cmds pymel 获取安装选择顺序选择的物体
Maya cmds pymel 获取安装选择顺序选择的物体 import maya.cmds as cmds 先设置选择顺序 cmds.selectPref(trackSelectionOrder = ...
- 用 threading 写多线程服务器
import socket import threading server = socket.socket() server.bind(("127.0.0.1",8899)) se ...