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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
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截取中文字符串的问题
2006/07/12 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
JS取request值以及自动执行使用示例
2014/02/24 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
python分数表示方式和写法
2019/06/26 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
详解Python3 pickle模块用法
2019/09/16 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python代码实现图书管理系统
2020/11/30 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
中青班党性分析材料
2014/02/16 职场文书
招聘专员岗位职责
2014/03/07 职场文书
镇创先争优活动总结
2014/08/28 职场文书
健康状况证明模板
2014/10/23 职场文书
趵突泉导游词
2015/02/03 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫