vue组件
---恢复内容开始---
一个简单的todoList组件开发
1）vue是操作数据
2）通过this调用vue实例的data属性
3）list.push往列表里添加值
4）如下this.inputValue=“”让提交后input框清空
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
inputValue:'hello',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
todolist组建的拆分
代码
<div id="root">
<div >
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
//创建todo-item组件（全局组件）
Vue.component('todo-item',{
props:['content'],//接收
template:'<li>{{content}}<li>'//模板
})
//创建Todoitem组件（局部组件）
// var Todoitem={
// template:'<li>item<li>'
// }
//
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);//list里面添加数据用push方法
this.inputValue=''
}
}
})
</script>
全局组件
任何地方的模板通过组件名都可以使用
Vue.component( ' 组件名 ' ,{属性} )
template属性：所要展示的模板
Vue.component('todo-item',{
template:'<li>item<li>'//模板
})
局部组件
创建局部组件，需要在Vue实例中通过components做一个组件的注册声明
var 组件名 = { 属性 }
var Todoitem={ template:'<li>item<li>' } 在Vue中声明 components:{ 'todo-item':Todoitem//在vue实例里面，要去使用Todoitem局部组件，必须通过‘todo-item’标签使用
},
全局组件传参
在被调用的组件标签中，绑定一个属性
父组件（外层）传递了content属性：<组件标签 :content = "参数"> <组件标签>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
组件接收外部传进来的content属性参数：在组件中添加props属性，props：['content']
//创建todo-item组件（全局组件） Vue.component('todo-item',{ props:['content'],//接收 template:'<li>{{content}}<li>'//模板 })
组件与实例的关系
每个组件都是一个Vue的实例
因为vue实例里可写props，methods，data，computed计算属性，等等属性，而每一个组件也可以写methods，data。因此每一个组件都是一个Vue的实例。
每一个组件都有一个template模板，如果实例不定义模板，就会根据挂载点下面的DOM标签全部内容当做实例模板。
实例的模板里使用一个小的组件（<todolist，属性></todolist>），也就是小的vue实例，也就是任何vue项目都是由千万万vue实例组成
实现todolist的删除功能
父组件向子组件传值是通过属性的方式
子组件向父组件传通过发布订阅的形式传递方法，this.$emit()方法
<子组件标签 @事件名："方法名" > <子组件标签 />
父组件去监听子组件触发的事件就去执行父组件的方法。就会去把对应的todo-item中的对应下标删除掉。
<todo-item v-for="(item,index) of list":key="index" :content="item" :index="index" @delete="handleDelete"></todo-item>
在子组件的方法中，发布一个事件
this.$emit( ' 事件名 ' , this.属性) this.属性：需要传递的参数
在子组件标签中绑定一个事件,触发父组件里的方法，因为在父组件的模板，所以方法写在父组件
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
//在子组件中通过$emit触发父组件的自定义事件（this.$emit('delete',this.index)），父组件去监听子组件触发的事件就去执行父组件的方法。（@delete="handleDelete"）进行相应的业务逻辑处理
注：splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,.....,itemX)
| index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
| howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
| item1, ..., itemX | 可选。向数组添加的新项目。 |
---恢复内容结束---
