欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue指令以及dom操作详解

程序员文章站 2022-06-20 20:38:00
“angularjs 通过被称为 指令 的新属性来扩展 html。angularjs 通过内置的指令来为应用添加功能。angularjs 允许你自定义指令。” 这是我最初...

“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> 

官网链接:

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