web前端：vue组件化开发必备，引用bootstrap，实战Todo（v-for）增删项目全文图解加源码分享

最新推荐文章于 2024-02-08 10:28:07 发布

cevent

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量276

点赞数

分类专栏：微信小程序 web前端文章标签： vue html js javascript css

本文链接：https://blog.csdn.net/weixin_37056888/article/details/114003729

版权

微信小程序同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

web前端

10 篇文章 0 订阅

订阅专栏

1.实现页面小组件增删

vue

(1)html配置vue组件实现的div

vue

(2)js中配置vue父组件

vue

(3)js中配置vue子组件

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>

vue

cevent

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端：vue组件化开发必备，引用bootstrap，实战Todo（v-for）增删项目全文图解加源码分享

1.实现页面小组件增删(1)html配置vue组件实现的div(2)js中配置vue父组件(3)js中配置vue子组件2.less.commonTile { color: ;}.commonP { color: ;}* { margin: 0; padding: 0;}html { height: 100%; overflow: hidden; body { height: 100%;
复制链接

扫一扫

专栏目录