[記錄] Vue中的dom操作

使用過Vue的同學都應該有這樣一個感覺，在vue中頁面是基於數據驅動的，不需要我們自己操作dom，框架幫我們完成了這一步，事實上Vue官方也建議我們這樣做

在絕大多數情況下是不需要操作dom就可以完成效果的，但是在極少數情況下需要我們操作dom，例如以下情況

我有如下一個表單，但用戶點擊提交時，校驗表單各字段是否為空，如果為空，則讓該字段輸入框背景色為紅色，同時獲得焦點

如果使用jquery，我們可以給每個輸入框一個id值，然后判斷字段值為空時根據id獲取元素，然后設置背景色等

這樣做的話意味着需要給每一個元素一個id，同時需要逐個判斷，如果字段值多的情況下需要寫很多if分支

並且因為要讓文本框獲得焦點，我們就必須要拿到該文本框，然后調用focus方法

所以問題的難點還是在於如何拿到該元素

Vue指令（directive）給我們提供了另一種解決方案

        <form action="#">
            <label for="name"> Your Name : <br>
                <input type="text" name="name" v-model="person.name.val" v-my-directive="person.name">
            </label>
            <br>
            <label for="email"> Your Email : <br>
                <input type="email" name="email" v-model="person.email.val" v-my-directive="person.email">
            </label>       
            <br>     
            <label for="address"> Your Address : <br>
                <textarea name="address" id="address" cols="40" rows="5" v-model="person.address.val" v-my-directive="person.address"></textarea>
            </label>
            <br>
            <button @click.prevent="submit">提交</button>
        </form>

//全局注冊
Vue.directive('my-directive', function (el, binding) { //獲取指令的綁定值
    var obj = binding.value; if (obj != null) { //將改元素綁定到該對象的 el 屬性上
        Vue.set(obj, key, 'el'); } }); var app = new Vue({ el: '#app', data: { person : { name : { val : ''}, address : { val : ''}, email: { val : ''} } }, methods: { submit: function() { for(var obj in this.person){ if(this.person[obj].val == ''){ this.person[obj].el.focus() this.person[obj].el.style.backgroundColor="pink"
                    return } } } } })