vue小项目练习——输入标题并将输入的标题添加到标题列表

第一次写博客,先自我介绍一下吧,我是18届中国石油大学(华东)计算机科学与技术专业的本科毕业生[有没有学长或者学姐,吱吱吱],现从事前端工作。希望通过这个博客记录自己的学习之路,加油!
今天没有开发任务,自学了一下vue,做了个小练习。
vue小项目练习——输入标题并将输入的标题添加到标题列表_第1张图片之前只是简单看了一下vue的模板语法,今天的小实例让我学习不少。上代码。


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <link rel="stylesheet" type="text/css" href="css/index.css">
	head>
	<body>
		<section id="app">
			<div class="title">
				<span>Panel titlespan>
			div>
			<div class="search">
			<input type="text"  placeholder="search for..." v-model="item.title"/>
			<a href="#" v-on:click="addItem"/>a>
			div>
			<hr>
			<div class="list">
				<div class="list_item" v-for="(vars,index) in todolist">
					span>
					<span>{{vars.title}}span>
					<span class="gx" v-on:click='del(index)'>span>
				div>
			div>
		section>
	body>
	<script>
		var vm=new Vue({
		 el:'#app',
		 data:{
		 	todolist:[
		 	
		 	],
		 	item:{
		 		title:'',
		 		ok:false
		 	}
		 },
		 methods:{
		 	addItem:function(){
		 		var obj=Object.assign({},this.item);
		 		this.todolist.push(obj);
		 		this.item.title='';
		 	},
		 	hasgreen:function(index){
		 		if(this.todolist[index].ok==true)
		 		{
		 			this.todolist[index].ok=false;
		 			return;
		 		}
		 		if(this.todolist[index].ok==false){
		 			this.todolist[index].ok=true;
		 			return;		 			
		 		}
		 		
		 	},
		 	del:function(index){
		 		if(this.todolist[index].ok==true){
		 			this.todolist.splice(index,1);
		 			return;
		 		}
		 		else{
		 			alert('请先勾选您要删除的title');
		 		}
		 		
		 	}
		 }
		 
		}
		)
	script>
html>

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
}
html{
	font-size: 20px;
}
section{
	width: 60%;
	margin: 3rem auto;
	border-radius: 5px;
	border: 1px solid lightskyblue;
}
.title{
	width: 100%;
	height: 2rem;
	border-radius: inherit;
	line-height: 2rem;
	background-color:lightblue ;
	border-bottom:1px solid lightskyblue ;
}
.title span{
	margin-left: 0.5rem;
}
.search{
	width: 90%;
	margin: 1rem auto;
	height: 2rem;
	border:1px solid gainsboro ;
	border-radius: 5px;
	display: flex;
	align-items: center;
}
.search input{
	width: 90%;
	border: none;
	font-size: 0.8rem;
	margin-left: 1rem;
	outline: none;
}
.search a{
	height: 100%;
	width: 5%;
	display: block;
	background: url(../img/tj.png) no-repeat right;
	background-size: 20px 20px;
}
hr{
	display: block;
	height: 1px;
	border: none;
	background-color: gainsboro;
	width: 90%;
	margin: auto;
}
.list{
	width:90%;
	margin: 0.5rem auto;
}
.list_item{
	border: 1px solid gainsboro;
	border-radius: 5px;
	height: 2rem;
	display: flex;
	align-items: center;
	margin-top: 1rem;
}
.gx{
	display: block;
	margin: 0.5rem;
	width: 1rem;
	height: 1rem;
	background: url(../img/gx_n.png) no-repeat;
    background-size: contain;
}
.green{
	    background: url(../img/gx_y.png) no-repeat;
		background-size: contain;
}
.list_item span:nth-child(3){
	background: url(../img/del.png) no-repeat;
	background-size: contain;	
}
.list_item span:nth-child(2){
	width: 85%;
	margin-left: 0.5rem;
	font-size: 0.8rem;
}

【总结】1.没有使用bootstrap框架。个人不喜欢框架,更喜欢自己写,不知道为什么。这也是很大的困惑,总觉得用框架很拘束,自己写更灵活,修改也方便。请教过一个前端人员,他说框架是给后端人员快速开发用的,前端人员建议自己写。希望有开发经验的人能发表一下看法。
2.对用vue写列表有了大致的了解,也学习了绑定事件、添加class等。
刚毕业,在公司也没有人带,如果有代码不合理的或者可以优化的,或者有错误,希望能指出,一起进步一起学习,谢谢啦~

你可能感兴趣的:(vue)