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.js 前端项目在常见 Web 服务器上的部署配置过程
Web服务器支持多种编程语言，如 PHP，JavaScript，Ruby，Python 等，并且支持动态生成 Web 页面，这篇文章主要介绍了Vue.js 前端项目在常见 Web 服务器上的部署配置,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue+Electron打包桌面应用超详细完整教程,在这大家要记住整个项目的json文件不能有注释,及时没报错也不行,否则运行命令时还是有问题,具体细节问题参考下本文详细讲解2024-02-02
这篇文章主要给大家介绍了关于Vue.js使用Vuex与axios发送请求的相关资料，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
在Web应用程序中，表单验证码和滑动验证是常见的安全机制，用于防止恶意攻击和机器人攻击，本文将介绍如何使用Vue和vue-verify-code库来实现表单验证码和滑动验证功能,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue 切换页面(路由)时如何保持滚动条回到顶部问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
vue加载动画element ui V-loading属性的踩坑记录
这篇文章主要介绍了vue加载动画element ui V-loading属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要给大家介绍了关于vue3组件式弹窗打开的3种方式,弹窗组件是常见的交互组件,它能够弹出一些提示信息、提醒用户进行操作等等,需要的朋友可以参考下2023-07-07
vue-resource请求实现http登录拦截或者路由拦截的方法
这篇文章主要介绍了vue-resource请求实现http登录拦截或者路由拦截的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
在Vue中，组件是构建用户界面的基本单位，封装公共组件是一种良好的实践，可以提高代码的可复用性和可维护性，下面我们就来看看如何封装一个公共的按钮组件吧2023-08-08
这篇文章主要为大家介绍了vue组件historyApiFallback作用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
最新评论