Vue.js：使用页面或 v-text 指令中的数据初始化数据对象

Question

所以我才刚开始玩 Vue.js 我想知道是否有一种很好的方法可以用 [=25] 初始化 data 对象=] 标记页面内容。

基本上我有一个显示信息的页面，我想把它变成一个微型 Vue 应用程序以避免有一个单独的编辑页面。所以我添加了具有 2 种方式绑定的表单，它通过 ajax.

提交值

问题是我真的很想避免未编译内容的 Flash，但后来我觉得我必须复制所有数据，一次在 html 标记中，一次在数据对象中。

<div id="app">
  <span v-text="prop1">This is filled by the backend</span>
  <input v-model="prop1" type="text" v-cloak />
</div>

<script>
new Vue({
    el: "#app",
    data: {prop1: "This is filled by the backend..again"}   // << Can I avoid this?
});
</script>

我可以告诉 Vue 从 html 标签中获取数据吗？

谢谢！

Answer 1

您正在寻找props

您的 html 元素看起来像 <custom-element dataToPass="dataFromHtml"></custom-element>。然后你可以通过 this.dataToPass.

在你的 vue 实例中访问它

通读文档，传递字符串或表达式（例如来自另一个 vue 实例）是不同的。

在你的例子中：

<div id="app">
      <span prop1="{ backendVariable}" v-text="prop1"></span>
      <input v-model="prop1" type="text" v-cloak />
</div>

<script>
    new Vue({
        el: "#app",
        props: ['prop1']
    });
</script>

```

Vue.js：使用页面或 v-text 指令中的数据初始化数据对象

Vue.js: initialize the data object with data from the page or from v-text directive

vue.js