[记录] 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 
                }
            }
        }
    }
})