Vue 学习笔记 — 没法避免的dom操做

时间 2019-11-10

标签 vue 学习笔记没法避免 dom 栏目 HTML 繁體版

原文原文链接

简书html

使用Vue了一段时间，感受确实不错，“数据驱动视图”很是好用，大部分状况下都不须要关心dom，可是凡事都有例外，总有一些时候咱们必需要直接对dom进行操做，好比下面这个例子：vue

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vPager</title>
    <script src="vue.js"></script>
    <script src="vCheckBox.js"></script>
</head>

<body>

    <table border="1">
        <thead>
            <tr>
                <th>名称</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="row in rows">
                <td>{{row.text}}</td>
                <td>
                    <input v-model.number="row.count" type="number" />
                    <label style="color:red" v-show="row.count<0">数量不能为负数</label>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan=" 2 " style="text-align:center ">
                    <button @click="submit ">提交</button>
                </td>
            </tr>
        </tfoot>
    </table>

    <script>
        var table = new Vue({
            el: "table ",
            data: {
                rows: [
                    { text: "苹果 ", count: 0 },
                    { text: "香蕉 ", count: 0 },
                    { text: "桃子 ", count: 0 }
                ]
            },
            methods: {
                submit: function () {
                    var rows = this.rows;
                    var arr = ["您须要的水果是:"];
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        if (row.count < 0) {
                            return;
                        }
                        arr.push(row.text + ": " + row.count + "个");
                    }
                    alert(arr.join("\n"));
                }
            }
        });
    </script>
</body>

</html>

这是一段很简单的示例，运行效果以下：dom

如今增长一个需求：
当某行count小于0时，点击提交按钮，将小于0的输入框激活（得到焦点）。ide

难道要为每个input设置一个id或者别的属性？而后用jQuery去操做它？这岂不是很是坑爹？ui

呵呵，固然不用，借助自定义指令能够比较轻松的完成这件事：this

Vue.directive('dom', {
    bind: function (el, binding) {
        var obj = binding.value;
        if (obj != null) {
            var key = Object.keys(binding.modifiers)[0] || "el";
            Vue.set(obj, key, el);
        }
    }
});

注册一个全局自定义指令v-dom，而且这个指令能够用一个修饰符拓展，它的做用是在指令被绑定到元素时，将被绑定的dom元素添加到指定的对象的属性中去，属性名就是修饰符名称，若是不存在修饰符时默认为el；spa

而后将第一部分的代码作以下修改：code

<input v-dom="row" v-model.number="row.count" type="number" />

表示将input元素保存到row对象的属性el里；
而后修改submit部分的代码：htm

methods: {
    submit: function () {
        var rows = this.rows;
        var arr = ["您须要的水果是:"];
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            if (row.count < 0) {
                row.el.focus(); //得到焦点
                row.el.select(); //全选
                return;
            }
            arr.push(row.text + ": " + row.count + "个");
        }
        alert(arr.join("\n"));
    }
}

执行效果：对象

已经得到了焦点

从控制台中也能够看到rows中的每个对象都已经拥有了el属性

PS：若是不但愿使用el为属性名可使用修饰符自定义属性名称

<input v-dom.input="row" v-model.number="row.count" type="number" />

相应的，在取值的时候须要使用row.input来获取dom元素。