vue指令以及dom操作详解

2024-10-28 06:58:29

“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.js插入dom节点的方法

本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧. html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) va
vue的Virtual Dom实现snabbdom解密

vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使用了 Virtual Dom 实现这一点,但 Vue 的 Virtual Dom 实现(复刻自 snabbdom)是更加轻量化的,因此也就比 React 的实现更高效. 看到火到不行的国产前端框架vue也在用别人的 Virtual Dom开源方案,是不是很好奇snabbdom有何强大之处呢?不过正式
在vue中获取dom元素内容的方法

在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> <script> export default { data () { return { } }, mounted
Vue实现virtual-dom的原理简析

virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现,virtual-dom也是react这个框架的非常重要的特性之一.相比于频繁的手动去操作dom而带来性能问题,vdom很好的将dom做了一层映射关系,进而将在我们本需要直接进行dom的一系列操作,映射到了操作vdom,而vdom上定义了关于真实dom的一些关键的信息,vdom完全是用js去实现,和宿主浏览器没有任何联系,此外得益于js的执行速度,将原本需要在真实dom进行的创建节点,删除节点,添加节点等一系列复
Vue AST源码解析第一篇

讲完了数据劫持原理和一堆初始化,现在是DOM相关的代码了. 上一节是从这个函数开始的: // Line-3924 Vue.prototype._init = function(options) { // 大量初始化 // ... // Go! if (vm.$options.el) { vm.$mount(vm.$options.el); } }; 弄完data属性的数据绑定后,开始处理el属性,也就是挂载的DOM节点,这里的vm.$options.el也就是传进去的'#app'字符串. 有一个
vue动态生成dom并且自动绑定事件

用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html: <div id="app"> <table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:le
Vue.js 2.0窥探之Virtual DOM到底是什么？

Virtual DOM是什么? 在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了. 若想了解它是如何工作的,就要先认清这几个概念: 1.更新DOM是非常昂贵的操作当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如: document.getElementById('myId').appendChild(myNewNode); 在现代的应用中,会有成千上万数量个DOM节点.所以因更新的时候产生的计算非常昂贵.琐碎且频
探究Vue.js 2.0新增的虚拟DOM

你可能早就已经听说了 Vue.js 2.0.一个主要的令人兴奋的新特性就是更新页面的"虚拟DOM"的加入. 虚拟 DOM 可以做什么? React 和 Ember 都使用了虚拟DOM来提升页面的刷新速度.为了理解其如何工作,让我们先讨论一下几个概念: 更新DOM的花费时间非常长当我们使用 JavaScript 来改变页面的时候,浏览器不得不做一些工作来找到需要的DOM节点,并且做出类似这样的改变: document.getElementById('myId').appendChild
Vue获取DOM元素样式和样式更改示例

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc">  </div> </template> <script>
详解在Vue中通过自定义指令获取dom元素

vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

vue指令以及dom操作详解

相关推荐

随机推荐