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

Question

今天我正在学习 Vue.js，我对它在一个新项目中可能真正有用的地方有一些想法，该新项目是现有实时项目的一个分支。

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

我曾经使用过的功能之一是用于无效的表单元素 - 目前在 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>

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