Question

今天我学习了Vue.js，并且我对一个新项目真正有用的地方有一些想法，这个项目是现有项目的现拍。

我喜欢尝试用Vue替换我现有的一些功能，我发现组件可能非常方便，因为重复使用了很多功能（例如邮政编码查找）。

我曾经用过一段时间的功能用于无效的表单元素 - 当表单输入或textarea模糊时，当前在jQuery中我添加了一个form__blurred类，这是耦合的与一些Sass如：

.form__blurred {
    &:not(:focus):invalid {
        border-color:$danger;
    }
}

这是为了避免在页面加载时立即将所有必需的输入设置为错误。

我在jQuery中这样做完全没问题，但我想也许可以在Vue中完成。

由于laracasts系列，我知道如何使用组件来实现它，但我的表单输入都是由Blade根据从Laravel收到的数据呈现的，并且它看起来不像是一个简洁的解决方案Javascript中呈现的一些输入，原因有很多（没有JS，关于在哪里查找输入模板的混淆等）。

我认为类似以下简化示例的东西会很方便

<input type="text" class="form__text" v-on:blur="blurred" v-bind:class="{ form__blurred : isBlurred }" />

<script>
    var form = new Vue({
        el : '.form__input',
        data : {
            isBlurred : false
        },
        methods : {
            blurred : function() {
                this.isBlurred = true;
            }
        }
    });
</script>

这实际上很有效但是，正如预期的那样，似乎使用类选择器只选择第一个实例，即使它没有，我猜测更改属性将适用于所有元素，不是每个人都是单独的。

所以问题是 - 这是否可以通过预呈现的HTML实现，而不仅仅是循环选择器？

如果，是否可以在.form元素上创建Vue并将此功能应用于.form__input和.form__textarea？

或，可能就是这种情况，这对Vue来说不是一个好的用例（因为这实际上是比jQuery解决方案更多的代码）。

Answer 1

听起来像Custom Directive的一个很好的用例。

Vue允许您注册自己的自定义指令。请注意，在Vue 2.0中，代码重用和抽象的主要形式是组件 - 但是在某些情况下，您可能只需要对普通元素进行一些低级DOM访问，这就是自定义指令仍然有用的地方。

<div id="app">
    <input type="text" name="myforminput" v-my-directive>
</div>

<script>
    Vue.directive('my-directive', {
        bind: function (el) {
            el.onblur = function () {
                el.classList.add('form__blurred');
            }
        }
    });

    var app = new Vue({
        el: '#app'
    });
</script>

如果对您的应用程序有意义，您还可以将指令本地添加到父组件。

将Vue.js绑定到元素的所有实例，而不使用（？）使用组件

1 个答案: