vue.js - 使用 vue 从自定义属性中获取组件？

Question

我在提交前使用 vue js 验证表单。这段代码启动了一个新的 Vue 从以下位置获取数据ID = app：

  const app = new Vue({
    el:"#app",
    data:{
      text: null
    }

我想创建一个名为的自定义属性form-number并使用我的属性而不是 div 获取数据。

例子：

改变这个

<form id="app" method="post">
    <input type="text" v-model='text'>
</form>

为了这

<form form-number="1" method="post">
    <input type="text" v-model='text'>
</form>

  const app = new Vue({
    el:"form-number='1'",
    data:{
      text: null
    }

标签： vue.js

Answer 1

在Vue中，不能读取模板 - 可以通过绑定（如v-model）进行输入。

看到这个片段：

const app = new Vue({
  data: {
    formNumber: 1,
    text: ''
  }
})

app.$mount('[myCustomAttribute="mounthere"]')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div myCustomAttribute="mounthere">
  <form :form-number="formNumber" method="post">
    <label for="text1">
      From{{ formNumber }} input:
    <input id="text1" type="text" v-model="text" />
    </label>
  </form>
  {{ text }}
</div>

formNumber也在data属性中定义并绑定到form-number属性，该属性也出现在HTML中。

编辑

el: "#app"只是基本Vue应用程序的约定。您可以通过任何有效的选择器选择安装应用程序的位置 -[myCustomAttribute="mounthere"]也可以。