[記錄] 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 } } } } })