<body> //把input框内的值取出存入list中，在页面显示
<div id="root">
<input v-model="content" />
<button @click="handleClick">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
content:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.content)
this.content=''
}
}
})
</script>
</body>
todolist组件拆分
<body>
<div id="root">
<input v-model="inputValue" />
<button @click="handleClick">提交</button>
<ul>
<todo-item v-for="(item,index) of list" // 使用组件
:key="index"
:content="item"> // 通过属性传参（item为循环中的值）
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{ // 创建组件的方法todo-item，全局组件
props:['content'], // 这个组件接受从外部传来的content属性
template:'<li>{{content}}</li>' // 组件的模板
})
/* var TodoItem={ //创建一个局部组件
template:'<li>item</li>'
}*/
new Vue({
el:"#root",
/* components:{ // 通过components注册局部组件
'todo-item':TodoItem
},*/
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
</body>
组件与实例的关系
veu中如果不写template代表着挂载点内的内容作为vue的模板
每一个vue组件都是一个vue的实例
任何的一个vue项目都是有千千万万个vue实例组成的
在组件中可以定义@click methods，data，computed，watch等属性
todolist删除功能（父组件和子组件的交互）
<body>
<div id="root">
<input type="text" v-model="inputValue"/>
<button @click="handleClick">按钮</button>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete">
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:'#root',
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
网友评论