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元素。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。