vue指令以及dom操作
2017-02-19 15:13
363 查看
“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也会自动同步
官网链接:http://v1-cn.vuejs.org/guide/custom-directive.html
允许你自定义指令。”
这是我最初接触“指令”这个词。还记得那时候,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
相关文章推荐
- vue指令以及dom操作详解
- vue---vue中常用指令,以及如何自定义指令vue.directive进行节点操作?
- 详解vue指令与$nextTick 操作DOM的不同之处
- Windows下常用的100个CMD指令以及常见的操作
- javascript 以及 jquery DOM节点操作
- JavaScript中的DOM操作以及和jQuery的对比
- Linux 指令歷史紀錄(History)的操作教學與範例 以及 Linux中神奇的叹号命令!
- java DOM4J操作XML例子以及DOM、SAX、JDOM、DOM4J的区别
- Vue.js介绍以及vue的常见指令
- Windows下常用的100个CMD指令以及常见的操作
- 如何监听Angularjs列表数据是否渲染完毕,配合jQuery操作DOM,指令的规范
- angularjs教程——Dom操作相关指令详解
- Oracle建表以及增删改操作指令
- angularJS DOM操作相关指令
- js-Dom节点的获取-以及相关操作
- SVG基础以及使用Javascript DOM操作SVG
- 在桌面應用程式中使用 WebKit (1) -雜論,以及用 Objective C 操作 DOM
- jquery学习第十番 选择器的一些要注意的问题以及DOM操作
- IOS系统的安装和Vi的操作模式以及简单的指令
- js Dom节点的获取 以及相关操作