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