Vue入门todolist组件
<html>
<head>
<meta charset="utf-8">
<title>todoListstitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleClick">添加button>
<ul>
<li v-for="(item,index) of lists">{{item}}li>
ul>
div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
inputValue:'',
lists:[]
},
methods:{
handleClick: function(){
this.lists.push(this.inputValue);
this.inputValue='';
}
}
})
script>
body>
html>
向一个列表中添加元素，并显示出来
组件
<html>
<head>
<meta charset="utf-8">
<title>todoListstitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleClick">添加button>
<ul>
<todolist v-for="(item,index) of lists" :content="item">todolist>
ul>
div>
<script>
Vue.component('todolist',{
props:['content'],
template:'{{content}} '
})
new Vue({
el:"#root",
data:{
msg:"hello world",
inputValue:'',
lists:[]
},
methods:{
handleClick: function(){
this.lists.push(this.inputValue);
this.inputValue='';
}
}
})
script>
body>
html>
每个组件都是新的Vue实例，Vue的项目都是有一个个的实例组成的，父组件向子组件传数据通过属性来进行，如程序中的content
子组件中的方法
<html>
<head>
<meta charset="utf-8">
<title>todoListstitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleClick">添加button>
<ul>
<todolist v-for="(item,index) of lists" :content="item">todolist>
ul>
div>
<script>
Vue.component('todolist',{
props:['content'],
template:'{{content}} ',
methods:{
handleClick: function(){
alert('123')
}
}
})
new Vue({
el:"#root",
data:{
msg:"hello world",
inputValue:'',
lists:[]
},
methods:{
handleClick: function(){
this.lists.push(this.inputValue);
this.inputValue='';
}
}
})
script>
body>
html>
子组件向父组件传参数
<html>
<head>
<meta charset="utf-8">
<title>todoListstitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="handleClick">添加button>
<ul>
<todolist v-for="(item,index) of lists" :content="item" :index="index" @delete="handleDelete">todolist>
ul>
div>
<script>
Vue.component('todolist',{
props:['content','index'],
template:'{{content}} ',//1.点击要删除的元素会触发子组件中handleClick方法
methods:{
handleClick: function(){//2.执行方法，触发一个delete事件（此事件是自定义的），并向事件中传递一个参数
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data:{
msg:"hello world",
inputValue:'',
lists:[]
},
methods:{
handleClick: function(){
this.lists.push(this.inputValue);
this.inputValue='';
},
handleDelete: function(index){//4.监听到delete事件后执行删除动作
alert("删除"+this.lists[index]);
this.lists.splice(index,1);
}
}
})
script>
body>
html>