vue指令以及dom操作

“AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。”这是我最初接触“指令”这个词。还记得那时候，ng大行其道的时候，我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题。后来随着前端工作的深入，我用了jq的data-attr并且学会了jq的插件使用。但，这这并不

艾特猫

16400人浏览 · 2017-02-19 15:13:35

艾特猫 · 2017-02-19 15:13:35 发布

“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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^