今天开始学习vuejs
知识点1，vue修改数据
app.$data.content = 'bye world';
知识点2，绑定事件 v-on:click
#3，双向绑定v-model=”inputValue”
#4 , 组件的写法
Vue.component("TodoItem",{
template:"<li>Todo Item</li>"
})
#5，组件引用
<todo-item v-for="item in list"><todo-item>
#6, 组件数据引用，定义全局组件
<todo-item v-bind:content="item" v-for="item in list"><todo-item>
Vue.component("TodoItem",{
props:['content'],
template:"<li>{{content}}</li>"
})
#7，局部组件定义和注册
var TodoItem = {
props:['content'],
template:"<li>{{content}}</li>"
}
var app = new Vue({
el:'#root',
components:{
//组件的注册
TodoItem:TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
}
})
#，子组件向父组件传值
<div id="root">
<input type="text" v-model="inputValue">
<button @click="add"></button>
<ul>
<todo-item v-bind:content="item" v-bind:index="index" v-for="(item, index) in list" @delete="handleDelete"></todo-item>
</ul>
</div>
var TodoItem = {
props:['content', 'index'],
template:"<li @click="handleDelete">{{content}}</li>",
methods:{
handleDelete:function(){
this.$emit("delete", this.index)
}
}
}
var app = new Vue({
el:'#root',
components:{
TodoItem:TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
add: function(){
this.list.push(this.inputValue)
}
handleDelete: function(index){
this.list.splice(index, 1)
}
}
})
