1.实现页面小组件增删
vue
(1)html配置vue组件实现的div
vue
(2)js中配置vue父组件
vue
(3)js中配置vue子组件
vue
2.less
.commonTile {
color: ;
}
.commonP {
color: ;
}
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
body {
height: 100%;
#wraps {
width: 600px;
height: 800px;
border: 5px solid steelblue;
border-radius: 5%;
box-shadow: 2px 2px 5px #000000;
background: snow;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
text-align: center;
position: absolute;
transition: 1s;
.ct {
margin: 10px auto;
}
.cps {
margin-left: 60%;
}
&:hover {
background: seashell;
}
.todo1{
position: absolute;
width: 300px;
text-align: center;
left: 25%;
.table{
margin-bottom: 2px;
}
}
.todo2{
position: absolute;
width: 300px;
text-align: center;
left: 25%;
margin-top: 20%;
.table{
margin-bottom: 2px;
tr{
background: salmon;
transition: 1s;
}
&:hover tr{
background: wheat;
}
}
}
}
}
}3.js
//1.无组件，主vue全局组件
var todo1=new Vue({
el:".todo1",
data:{
inputContent:'cevent',
list:[]
},
methods:{
addList:function(){
this.list.push(this.inputContent);
this.inputContent='';
}
}
})
//3.子组件：必须放在父组件之前
var todoComponent={
//注意：父组件传递到子组件的属性v-bind:componentName="xxx" 父组件的componentName可以有大写，但是，到了子组件，都会被转为小写，这里props中全部转为小写
props:["parentitem","parentindex"],
template:"<table class='table table-hover'><tr class='active' style=''><td @click='handleClick' style='position:absolute;left:20%;margin-top:5px;font-size:16px;'>{{parentitem}}</td><button v-on:click='delList' class='btn btn-primary' type='submit' style='float:right'>删除</button></tr></table>",
methods:{
handleClick:function(){
console.log("这里的index：",this.parentitem,this.parentindex);
},
delList:function(){
console.log("传递到父组件！");
this.$emit('del',this.parentindex);
}
}
}
//2.父组件
var todo2=new Vue({
el:'.todo2',
components:{
"todo-component":todoComponent
},
data:{
inputContent:'echo',
list:[]
},
methods:{
addComponent:function(){
this.list.push(this.inputContent);
this.inputContent='';
},
delCom:function(parentIndex){
console.log("进来了？");
this.list.splice(parentIndex,1);
}
}
})4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue数据绑定-双向</title>
</head>
<link rel="stylesheet" href="base-css/bootstrap.css" />
<link rel="stylesheet" href="css/4-vue-component-re.css" />
<body>
<div id="wraps">
<h1 class="ct commonTile">Vue-component组件化开发</h1>
<h3 class="cps commonP">一刀coder</h3>
<div class="todo1">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入" v-model="inputContent">
<span class="input-group-btn">
<button class="btn btn-default" type="button" v-on:click="addList">TODO</button>
</span>
</div>
</div>
</div>
<table class="table table-hover">
<tr class="active" v-for="(item,index) of list" :key="index">
<td>{{item}}</td>
</tr>
</table>
</div>
<!---在组件中绑定事件-->
<div class="todo2">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入" v-model="inputContent">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" @click="addComponent">TODO</button>
</span>
</div>
</div>
</div>
<!--删除功能index渲染,【delChild被vue用了，不建议使用 】 子组件传递的方法在外面-->
<todo-component v-for="(item,index) of list" :key="index" :parentItem="item" :parentIndex="index" @del="delCom"></todo-component>
</div>
</div>
</body>
<script type="text/javascript" src="base-js/jquery.min.js"></script>
<script type="text/javascript" src="base-js/bootstrap.js"></script>
<script type="text/javascript" src="base-js/vue.js"></script>
<script type="text/javascript" src="js/4-vue-component-re.js"></script>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556