v-text
v-for
v-html
指令: 扩展html语法

自定义指令:
1. 自定义属性指令:

  1. Vue.directive(指令名称,function(参数){
  2.     this.el    -> 原生DOM元素  // vm.$el
  3. });
  4.  
  5. <div v-red="参数"></div>

指令名称: v-red -> red

* 注意: 必须以 v-开头（定义时去掉v-）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         Vue.directive('red',function(color){
  15.             this.el.style.background=color;
  16.         });
  17.  
  18.         window.onload=function(){
  19.             var vm=new Vue({
  20.                 el:'#box',
  21.                 data:{
  22.                     a:'blue'
  23.                 }
  24.             });
  25.         };
  26.  
  27.     </script>
  28. </head>
  29. <body>
  30.     <div id="box">
  31.         <span v-red="a">
  32.             asdfasd
  33.         </span>
  34.     </div>
  35.  
  36. </body>
  37. </html>

Vue.directive('red',function(color){})

demo：拖拽

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.     </style>
  11.     <script src="vue.js"></script>
  12.     <script>
  13.         Vue.directive('drag',function(){
  14.             var oDiv=this.el;
  15.             oDiv.onmousedown=function(ev){
  16.                 var disX=ev.clientX-oDiv.offsetLeft;
  17.                 var disY=ev.clientY-oDiv.offsetTop;
  18.  
  19.                 document.onmousemove=function(ev){
  20.                     var l=ev.clientX-disX;
  21.                     var t=ev.clientY-disY;
  22.                     oDiv.style.left=l+'px';
  23.                     oDiv.style.top=t+'px';
  24.                 };
  25.                 document.onmouseup=function(){
  26.                     document.onmousemove=null;
  27.                     document.onmouseup=null;
  28.                 };
  29.             };
  30.         });
  31.  
  32.         window.onload=function(){
  33.             var vm=new Vue({
  34.                 el:'#box',
  35.                 data:{
  36.                     msg:'welcome'
  37.                 }
  38.             });
  39.         };
  40.  
  41.     </script>
  42. </head>
  43. <body>
  44.     <div id="box">
  45.         <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
  46.         <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
  47.     </div>
  48.  
  49. </body>
  50. </html>

ev.clientX-oDiv.offsetLeft

2.自定义元素指令:（用处不大）

  1.     Vue.elementDirective('zns-red',{
  2.         bind: function(){
  3.             this.el.style.background='red';
  4.         }
  5.     });

-------------

@keydown.up
@keydown.enter

@keydown.a/b/c....

自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         //ctrl->17
  15.         /*document.onkeydown=function(ev){
  16.             console.log(ev.keyCode);
  17.         };*/
  18.         Vue.directive('on').keyCodes.ctrl=17;  //
  19.         Vue.directive('on').keyCodes.myenter=13;
  20.  
  21.         window.onload=function(){
  22.             var vm=new Vue({
  23.                 el:'#box',
  24.                 data:{
  25.                     a:'blue'
  26.                 },
  27.                 methods:{
  28.                     show:function(){
  29.                         alert(1);
  30.                     }
  31.                 }
  32.             });
  33.         };
  34.  
  35.     </script>
  36. </head>
  37. <body>
  38.     <div id="box">
  39.         <input type="text" @keydown.myenter="show">
  40.     </div>
  41.  
  42. </body>
  43. </html>

Vue.directive('on').keyCodes.myenter=13;

  1. 监听数据变化:
  2.     vm.$el/$mount/$options/....
  3.  
  4.     vm.$watch(name,fnCb);  //浅度
  5.     vm.$watch(name,fnCb,{deep:true});  //深度监视

vue视频： 自定义指令 && 拖拽 && 自定义键盘信息的更多相关文章

  1. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. QT笔记之自定义窗口拖拽移动

    1.QT自定义标题栏,拖拽标题栏移动窗口(只能拖拽标题,其他位置无法拖拽) 方法一: 转载:http://blog.sina.com.cn/s/blog_4ba5b45e0102e83h.html . ...

  3. Vue. 之 Element dialog 拖拽

    Vue. 之 Element dialog 拖拽 默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且 一旦点击遮罩层区域,弹框就会消失. 解决方案: 1 在 utils 中新 ...

  4. vue自定义事件---拖拽

    margin布局拖拽 Vue.directive('drag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.qu ...

  5. iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. vue.js实现内部自定义指令和全局自定义指令------directive

    在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...

  7. Android 自定义可拖拽View，界面渲染刷新后不会自动回到起始位置

    以自定义ImageView为例: /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class FloatingImageVi ...

  8. Jquery.Sorttable 桌面拖拽自定义

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. View拖拽 自定义绑定view拖拽的工具类

    由于工作需求,需要用到这种处理方法所以我就写了这个 废话不多说先看效果图 接下来就看代码吧 DragDropManager import android.app.Activity; import an ...

随机推荐

  1. selenium测试（Java）--操作cookie（十七）

    package com.test.cookies; import org.openqa.selenium.Cookie; import org.openqa.selenium.JavascriptEx ...

  2. Spring 4 官方文档学习（七）核心技术之Spring AOP APIs

    请忽略本篇内容!!! 1.介绍 2.Spring中的pointcut API 2.1.概念 2.2.对pointcut的操作 2.3. AspectJ expression pointcut 2.4. ...

  3. linux -- ubuntu 安装apache后，修改默认路径

    默认由apt方式安装的Apache,指定网页主目录位于:/var/www 而系统/var所分到的空间太少,所以要换路径 1.修改默认网站目录 ubuntu8.10下修改apache2的默认文档目录 默 ...

  4. R语言低级绘图函数-points

    points 用来在一张图表上添加点,指定好对应的x和y坐标,就可以添加不同形状,颜色的点了: 基本用法: 通过x和y设置点的坐标 plot(1:5, 1:5, xlim = c(0,6), ylim ...

  5. Java几款性能分析工具的对比

    在给客户的应用程序维护的过程中,我注意到在高负载下的一些性能问题.理论上,增加对应用程序的负载会使性能等比率的下降.然而,我认为性能下降的比率远远高于负载的增加.我也发现,性能可以通过改变应用程序的逻 ...

  6. NHibernate实例

    1. 下载相关资源: 下载NHibernate.下载地址: http://nhforge.org/Default.aspx 下载微软Northwind示例数据库,下载地址:http://www.mic ...

  7. oracle数据备份

    from:http://www.docin.com/p-728428621.html

  8. HTML&CSS精选笔记_布局与兼容性

    布局与兼容性 CSS布局 版心和布局流程 为什么要应用布局? 阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对 ...

  9. java.lang.IncompatibleClassChangeError: Implementing class

    项目中使用了quartz,但是jar包却有两个,一个1.8版本,一个2.1版本,导致jar包冲突,所以导致一启动tomcat就出现: Caused by: java.lang.Incompatible ...

  10. mybatis之parameterType传递多个参数

    当在查询的时候需要传入多个参数的时候该怎么办呢: 1,封装成一个Model对象,底层HashMap还是一个 User user=new User(); user.setUserName("z ...