Question

请看一下示例

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.10.5/vue.min.js"></script>
<div id="todo">
    <h1>My Test</h1>
    Sample 1 <span v-text="form.title"></span>
    Sample 2 <b><span v-text="'' +form.title"></span></b>
</div>


<script>
var form = new Vue({
    data: {
        title: "My Form"
    }
});

var app = new Vue({
    el: '#todo',
    data: {
        form : form
    }
})
</script>

＆＃13;

由于某种原因，绑定在＆＃34;样本1＆＃34;没有显示任何内容，样本2工作正常。有人可以解释为什么要添加＆＃39;＆＃39;字符串有什么不同？

Answer 1

我不相信你可以在另一个vue实例中使用vue实例。通常，您可以将表单定义为组件或类。我为两种方法附上了小提琴：

http://jsfiddle.net/DarkFruits/g77uv054/1/

<div id="todo">
  <h1>My Test</h1>
  Sample 1<span v-text="form.title"></span><br/>
  Sample 2<span v-text="'' +form.title"></span>
</div>

class form {
  constructor() {
    this.title = 'My Form'
  }
}

var app = new Vue({
  el: '#todo',
  data: {
    form : new form()
  }
})

http://jsfiddle.net/DarkFruits/g77uv054/2/

<template id="my-form">
  <span v-text='title'></span>
</template>

<div id="todo">
    <h1>My Test</h1>
    Sample 1<my-form v-bind:title='title'></my-form><br/>
</div>

Vue.component('my-form', {
    template: '#my-form',
    props: ['title']
})

var app = new Vue({
    el: '#todo',
    data: {
        title : 'My Form'
    }
})

编辑：仅供参考，在第二个小提琴中我删除了vue作为外部资源并将其添加到javascript设置中。这也可以在控制台中为您提供更好的错误消息。

为什么Vue绑定在样本中不起作用？

1 个答案: