爲什麼Vue綁定在樣本中不起作用？

Question

請看看例子

http://jsfiddle.net/g77uv054/

<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>

出於某種原因，在 「樣品1」 結合並沒有顯示什麼和樣品2個工作正常。有人可以解釋爲什麼向字符串添加''會有什麼區別嗎？

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設置。這也給了你更好的控制檯錯誤信息。