Vue-TodoList组件化思维
2019-03-24 本文已影响0人
秋玄语道
一、全局组件化
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" name="" v-model="valueText">
<button @click='handleBtnClick()'>提交</button>
</div>
<ul>
<todo-item v-bind:content="item" v-for="item in list"></todo-item>
</ul>
</div>
<script type="text/javascript">
Vue.component("TodoItem",{
props:['content'],
template:"<li>{{content}}</li>"
});
var app =new Vue({
el:"#app",
data:{
valueText:'',
list:[]
},
methods:{
handleBtnClick:function(){
this.list.push(this.valueText);
this.valueText = '';
}
}
})
</script>
</body>
</html>
二、局部组件化
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" name="" v-model="valueText">
<button @click='handleBtnClick()'>提交</button>
</div>
<ul>
<todo-item v-bind:content="item" v-for="item in list"></todo-item>
</ul>
</div>
<script type="text/javascript">
var TodoItem={
props:['content'],
template:"<li>{{content}}<li>"
}
var app =new Vue({
el:"#app",
components:{
TodoItem:TodoItem
},
data:{
valueText:'',
list:[]
},
methods:{
handleBtnClick:function(){
this.list.push(this.valueText);
this.valueText = '';
}
}
})
</script>
</body>
</html>
三、子组件给父组件传值
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" name="" v-model="valueText">
<button @click='handleBtnClick()'>提交</button>
</div>
<ul>
<todo-item :content="item" :index="index" v-for="(item,index) in list"
@delete="handleItemDelete"></todo-item>
</ul>
</div>
<script type="text/javascript">
var TodoItem ={
props:['content','index'],
template:"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function(){
this.$emit("delete",this.index);
}
}
}
var app =new Vue({
el:"#app",
components:{
TodoItem:TodoItem
},
data:{
valueText:'',
list:[]
},
methods:{
handleBtnClick:function(){
this.list.push(this.valueText);
this.valueText = '';
},
handleItemDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<counter :count="0" @change="handleIncrease"></counter>
<counter :count="1" @change="handleIncrease"></counter>
<div >{{total}}</div>
</div>
<script>
var counter ={
props:['count'],
data:function(){
return{
number: this.count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function () {
this.number=this.number + 2;
this.$emit('change',2);
}
}
}
var vm = new Vue({
el: '#app',
components:{
counter:counter
},
data: {
total: 1
},
methods: {
handleIncrease:function (step) {
this.total += step
}
}
})
</script>
</body>
</html>
