vue指令以及dom操作详解


Posted in Javascript onMarch 04, 2017

“AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。”

这是我最初接触“指令”这个词。还记得那时候,ng大行其道的时候,我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题。

后来随着前端工作的深入,我用了jq的data-attr并且学会了jq的插件使用。但,这这并不能让我把它“指令”联想到一块,后来插件需要给节点加个标示来显示某种“状态管理” 我用了class  例如:pending,loading-end.

但是感觉和样式混在一块总是感觉不自在,后来我直接添加一个自定义标签 例如:attr-pending,attr-loading-end,通过dom上的自定义标签来标示某个状态是否完成。

在这个时候,发现"attr-pending,attr-loading-end"与“ng-app,ng-html”什么的非常类似,才恍然大悟,其实“指令”也可以理解为"标识",而具体的逻辑与它无关,它只是一个“标识”罢了。至于,ng-repeat,ng-click  同样可以理解某个程序在dom上一个“标识” 程序通过它来挂载某个功能。

现在接触了vue,vue比ng在开发上来说代码量很明显少了很多,“指令”一般开发人员不需要自己来实现。但是如果是开发一套ui交互的组件,还是很需要它。

bind: 仅调用一次,当指令第一次绑定元素的时候。

update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值;以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数。

unbind:仅调用一次,当指令解绑元素的时候。

1.指令的注册

指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册:

Vue.directive('dirName',function(){
//定义指令
});

另外一种是局部注册:
new Vue({

directives:{


dirName:{




//定义指令


}

}
});

2.可在指令函数配置中直接修改DOM[支持数据驱动] input里面的值修改的时候#demo里面的vue也会自动同步

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> 
</head> 
<body> 
<div> 
  <p>展示vue指令----vue和元素dom操作的完美结合【拓展】</p> 
  <p>{{msg}}</p> 
  <input type="text" v-model="msg"> 
</div> 
<div id="demo" v-demo-directive="LightSlateGray : msg"></div> 
 
<script> 
 Vue.directive('demoDirective', { 
  bind: function () { 
   this.el.style.color = '#fff' 
   this.el.style.backgroundColor = this.arg 
  }, 
  update: function (value) { 
   this.el.innerHTML = 
     'name - '  + this.name + '<br>' + 
     'raw - '  + this.raw + '<br>' + 
     'expression - ' + this.expression + '<br>' + 
     'argument - ' + this.arg + '<br>' + 
     'value - '  + value 
  } 
 }); 
 var demo = new Vue({ 
  el: 'body', 
  data: { 
   msg: 'hello!' 
  } 
 }) 
 
</script> 
</body> 
</html>

官网链接: http://v1-cn.vuejs.org/guide/custom-directive.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 #Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 #Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 #Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 #Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 #Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 #Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 #Javascript
You might like
推荐php模板技术[转]
2007/01/04 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python超简单解决约瑟夫环问题
2015/05/12 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
小学家长评语大全
2014/04/16 职场文书
新法人代表任命书
2014/06/06 职场文书
森林防火宣传标语
2014/06/27 职场文书
异地年检委托书范本
2014/09/24 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python