javascript - 将 Vue.js 与 WebComponents 结合使用，例如 Polymer 的 Paper-Elements

Question

我正在制作一个 Web 应用程序(服务器呈现，而不是 SPA)，但具有一些客户端功能，例如当其他元素具有某些值时隐藏元素、进行 HTTP 调用或验证某些输入字段。

现在，我使用 WebComponents(纸质元素和其他元素)来制作 UI，并使用 Vanilla JavaScript(带有一些 Polyfill，例如 WebComponents.js 或 fetch.js)来执行功能。

然而，到目前为止，我已经意识到我有很多 JavaScript 行可以做一些事情(例如，如果不满足条件则隐藏输入字段)，可以使用 Vue.js 这样的框架来减少(甚至删除)这些事情以及带有指令的富有表现力的 HTML。

我的问题是，当我尝试将 Vue.js 与 paper-elements 或其他元素一起使用时，像 v-model 这样的 Vue.js 指令不起作用(即使是 paper-element 值属性是值，就像标准 HTML 元素一样)。

我尝试使用 :value 而不是 v-model，这可以工作，但只能使用单一方式的数据绑定(bind)(这在 v- 中是正常的) bind)，但我需要在 paper-elements 中进行两种方式的数据绑定(bind)，而 v-model 不起作用。

一个想法可以是，同时使用冒号(v-bind的简写)来指示一种数据绑定(bind)方式(例如:disabled="someCondition")，使用两个冒号来指示任何属性中的两种方式数据绑定(bind)(在某些 WebComponent 中，在 value 之外的其他 HTML 属性中执行此操作可能很有用)(例如 ::value)。

有人知道任何具有表达 HTML 的框架，如 Vue.js，它实现数据绑定(bind)(任何 html 属性中的两种方式)和基本控制结构(如 v-if 和 v-repeat)或使用 Vue.js 在任何 HTML 属性中进行数据绑定(bind)的两种方式(更简单，使用纸质元素进行 v-model 工作)。

我不知道如何使 WebComponents 成为 Vue.js 的功能，因为我使用 Polymer 来做到这一点。

谢谢你!

Answer 1

使用 VueJs 你可以做到:value="value"@input="value = $event.target.value"

而不是v-model="value"