vue指令以及dom操作

“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

深入了解指令请查看:vue指令的实际运用之无限滚动加载

vue指令以及dom操作相关推荐

在vue 中，dom操作滚动条 scrollTop无效
问题来源前几天为了实现一个聊天功能,采用websocket技术,前端收到webscoket传递的消息后,需要将聊天内容滚动到最下边,一直操作,没能成功,最后采用以下方式解决聊天功能链接:https ...
vue：虚拟dom的实现
Vitual DOM是一种虚拟dom技术,本质上是基于javascript实现的,相对于dom对象,javascript对象更简单,处理速度更快,dom树的结构,属性信息都可以很容易的用javascr ...
Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
vue指令写在html中的原理,详解Vue中的MVVM原理和实现方法
对Vue中的MVVM原理解析和实现首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家 ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
4.Vue指令（Directives）
目录 1. Vue环境搭建(Node) 2. npm与yarn详细使用 3. Vue介绍及其基本使用 4. Vue指令(Directives) 5. Vue修饰符(Modifier) 6. Vue计算 ...
day1学习vue2笔记 vue指令
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...

vue指令以及dom操作

vue指令以及dom操作相关推荐

最新文章

热门文章