實現todolist思路
添加功能：輸入框雙向綁定數據，按鈕綁定添加事件，添加後把要添加的數據push到字符串，然後把輸入框的內容清空。 展示list使用ul下面的li添加事件循環 item in list,然後mustache語法綁定{{item}}。
考慮到這種組件可能很常用，建一個vue全局組件，專門用於多個li的展示。可以爲這個全局組件設置屬性，這樣這個組件使用屬性綁定就可以訪問特定vue實例中的數據。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.item{
color:red
}
</style>
<body>
<div id="app">
{{msg}}
<div>
<input type="text" v-model="info">
<button @click="handleClick">添加</button>
</div>
<ul>
<!--<li v-for="item in list">{{item}}</li>-->
<todo-item v-for="item in list" :item="item" ></todo-item>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script >
Vue.component('todo-item',{
//自定義屬性添加更強大的功能
props:['item'],
template:'<li class="item">{{item}}</li>'
})
new Vue({
el:'#app',
data(){
return{
msg:'hello worldsss',
info:'',
list:[],
}
},
methods:{
handleClick(){
console.log(this.info);
this.list.push(this.info);
this.info=''
}
}
})
</script>
</body>
</html>