案例:实现TodoLis(尚硅谷)

是做完后再记录的,前端我主要是要了解下,所以这里记录的比较浅

由于是做完后记录,所以你cv后的代码的效果并不一定和我展示的效果图一样

静态页面

先来实现静态页面,再考虑动态页面

组件拆分

说明(实际的组件名不是和下面一样的):

  1. Search组件就是上面的那个搜索框
  2. List组件就是列表
  3. ListItem组件:组件的每一项
  4. Buttom组件:就是底下的哪些东西
    抽象一下

接下来是实现逻辑

app.vue

html 复制代码
<template>
   <div id="root">
     <div class="todo-container">
   	<div class="todo-wrap">
   	  <MyHeader/>
        <MyList/>
        <MyFooter/>
   	</div>
     </div>
   </div>

</template>

<script>
   import MyHeader from './components/MyHeader'
   import MyList from './components/MyList'
   import MyFooter from './components/MyFooter.vue'

   export default {
   	name:'App',
   	components:{MyHeader,MyList,MyFooter},
   }
</script>

<style>
   /*base*/
   body {
     background: #fff;
   }

   .btn {
     display: inline-block;
     padding: 4px 12px;
     margin-bottom: 0;
     font-size: 14px;
     line-height: 20px;
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     border-radius: 4px;
   }

   .btn-danger {
     color: #fff;
     background-color: #da4f49;
     border: 1px solid #bd362f;
   }

   .btn-danger:hover {
     color: #fff;
     background-color: #bd362f;
   }

   .btn:focus {
     outline: none;
   }

   .todo-container {
     width: 600px;
     margin: 0 auto;
   }
   .todo-container .todo-wrap {
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 5px;
   }
</style> 

MyHeader.vue

html 复制代码
<template>
	<div class="todo-header">
		<input type="text" placeholder="请输入你的任务名称,按回车键确认"/>
	 </div>
</template>

<style>
   /*header*/
	.todo-header input {
	  width: 560px;
	  height: 28px;
	  font-size: 14px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  padding: 4px 7px;
	}

	.todo-header input:focus {
	  outline: none;
	  border-color: rgba(82, 168, 236, 0.8);
	  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>    
 

MyList.vue

html 复制代码
<template>
	<ul class="todo-main">
		<!--当时我写到这里的时候想用v-for去遍历数据,这样我就不用写<MyItem/>了-->
		<MyItem/>
	</ul>
</template>

<style>
  	/*list*/
	.todo-main {
	  margin-left: 0px;
	  border: 1px solid #ddd;
	  border-radius: 2px;
	  padding: 0px;
	}

	.todo-empty {
	  height: 40px;
	  line-height: 40px;
	  border: 1px solid #ddd;
	  border-radius: 2px;
	  padding-left: 5px;
	  margin-top: 10px;
	} 
</style>    

MyItem.vue

html 复制代码
<template>
	<li>
		 <label>
				<input type="checkbox"/>
				<span>xxxxx</span>
		 </label>
			  <button class="btn btn-danger" style="display:none">删除</button>
	</li>
</template>

<style>
	/*item*/
	li {
	  list-style: none;
	  height: 36px;
	  line-height: 36px;
	  padding: 0 5px;
	  border-bottom: 1px solid #ddd;
	}

	li label {
	  float: left;
	  cursor: pointer;
	}

	li label li input {
	  vertical-align: middle;
	  margin-right: 6px;
	  position: relative;
	  top: -1px;
	}

	li button {
	  float: right;
	  display: none;
	  margin-top: 3px;
	}

	li:before {
	  content: initial;
	}

	li:last-child {
	  border-bottom: none;
	}   
</style>  

静态页面完成,明天继续

相关推荐
DoraBigHead17 分钟前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
上单带刀不带妹2 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
ningmengjing_2 小时前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript
晓13132 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
灋✘逞_兇3 小时前
Node.Js是什么?
服务器·javascript·node.js
小飞悟4 小时前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
中微子4 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
G等你下课4 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript