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和 ...
随机推荐
- Git和Github入门教程
一.常用命令 所有命令前都要加 git,如表中的init是指 git init.点击命令可直接跳转至本文第一次使用的地方.以下命令都在命令行里执行. 1.本地命令 行为 命令 备注 初始化 init ...
- .Net开源网络爬虫Abot介绍（转）
转载地址:http://www.cnblogs.com/JustRun1983/p/abot-crawler.html .Net中也有很多很多开源的爬虫工具,abot就是其中之一.Abot是一个开源的 ...
- siege压力测试工具安装和介绍
Siege是linux下的一个web系统的压力测试工具,支持多链接,支持get和post请求,可以对web系统进行多并发下持续请求的压力测试. 安装 Siege #wget http://www.jo ...
- HDU4779 Tower Defense 组合数学
原文链接https://www.cnblogs.com/zhouzhendong/p/HDU4779.html 题目传送门 - HDU4779 题意 $T$ 组数据. 给定一个 $n\times m$ ...
- day42 事物,数据库锁
事物是把一些sql语句作为一个原子性操作,就是说我会写好几条sql语句,然后我想把这好几条的sql语句作为一个整体,然后让这个整体一起去运行,不可以拆分开,就像我们用面粉做一个馒头一样,我需要把这些面 ...
- count()函数在count()中参数的讨论
http://www.cnblogs.com/CareySon/p/DifferenceBetweenCountStarAndCount1.html
- HDFS格式化namenode后启动集群datanode不启动
这是因为格式化namenode之后,namenode节点中VERSION的ClusterID会改变!!! 解决办法: 1.打开namenode节点的hdfs-site.xml文件,查看你的nameno ...
- Flume的概述和安装部署
一.Flume概述 Flume是一种分布式.可靠且可用的服务,用于有效的收集.聚合和移动大量日志文件数据.Flume具有基于流数据流的简单灵活的框架,具有可靠的可靠性机制和许多故障转移和恢复机制,具有 ...
- TF之RNN：matplotlib动态演示之基于顺序的RNN回归案例实现高效学习逐步逼近余弦曲线—Jason niu
import tensorflow as tf import numpy as np import matplotlib.pyplot as plt BATCH_START = 0 TIME_STEP ...
- Python NLTK 自然语言处理入门与例程(转)
转 https://blog.csdn.net/hzp666/article/details/79373720 Python NLTK 自然语言处理入门与例程 在这篇文章中,我们将基于 Pyt ...