<body>
<!-- 元件化思想 全局元件 -->
<div id="root">
<div>
<input type="text" v-model="todoValue">
<button v-on:click="handleBtnClick">送出</button>
</div>
<ul>
<!--<li v-for="item in list">{{item}}</li>-->
<!-- v-bind:為todo-item這個（相對于root來說）子元件傳入綁定值
我們在循環list時，list的每一項的值賦給了item,
然後将item 通過v-bind的形式 傳給了todo-item的 content
是以後面需要在全局元件中定義content來接收值
通過list決定輸出多少個todo-item
把list每一個項的内容通過v-bind文法 借助content變量傳給了todo-item子元件
-->
<!-- 由于已經定義了全局元件，是以這裡可以直接使用 -->
<todo-item v-bind:content="item" v-for="item in list">
</todo-item>
</ul>
</div>
<script>
//建立一個全局元件todo-item Vue.component是Vue提供的一個建立全局元件的方法
Vue.component("TodoItem",{
//用content接收元件todo-item傳來的值 也即是接收到了list每一項的值
props:['content'],
template:"<li>{{content}}</li>" //模闆裡面必須使用插值表達式擷取content的值 代替了<ul>裡面的<li>
})
var app=new Vue({
el:'#root',
data:{
list: [],
todoValue:''
},
methods:{
handleBtnClick:function () {
this.list.push(this.todoValue)
this.todoValue='';
}
}
});
</script>
</body>
下面是 局部元件的使用：
<script>
//1.建立一個全局元件todo-item Vue.component是Vue提供的一個建立全局元件的方法
// Vue.component("TodoItem",{
// //用content接收元件todo-item傳來的值
// props:['content'],
//
// template:"<li>{{content}}</li>" //模闆裡面必須使用插值表達式擷取content的值 代替了<ul>裡面的<li>
// })
//2.1 局部元件 本質上是一個對象
var TodoItem ={
props:['content'],
template:"<li>{{content}}</li>"
}
var app=new Vue({
el:'#root',
//2.2 注冊局部元件 到 根Vue執行個體中
components:{
TodoItem:TodoItem
},
data:{
list: [],
inputValue:''
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue) //使用this.list: vue會自動去data裡面找list屬性
this.inputValue='';//使用this.inputValue: vue會自動去data裡面找inputValue屬性
}
}
});
</script>
![vue項目不支援IE浏覽器提示[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)