景翔物流网站建设公司,公司网站引导页,网站添加站长统计代码,做婚纱摄影网站多少钱是做完后再记录的#xff0c;前端我主要是要了解下#xff0c;所以这里记录的比较浅 由于是做完后记录#xff0c;所以你cv后的代码的效果并不一定和我展示的效果图一样 静态页面
先来实现静态页面#xff0c;再考虑动态页面 组件拆分 说明(实际的组件名不是和下面一样的… 是做完后再记录的前端我主要是要了解下所以这里记录的比较浅 由于是做完后记录所以你cv后的代码的效果并不一定和我展示的效果图一样 静态页面
先来实现静态页面再考虑动态页面 组件拆分 说明(实际的组件名不是和下面一样的):
Search组件就是上面的那个搜索框List组件就是列表ListItem组件:组件的每一项Buttom组件:就是底下的哪些东西 抽象一下
接下来是实现逻辑 app.vue
templatediv idrootdiv classtodo-containerdiv classtodo-wrapMyHeader/MyList/MyFooter//div/div/div/templatescriptimport MyHeader from ./components/MyHeaderimport MyList from ./components/MyListimport MyFooter from ./components/MyFooter.vueexport default {name:App,components:{MyHeader,MyList,MyFooter},}
/scriptstyle/*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
templatediv classtodo-headerinput typetext placeholder请输入你的任务名称按回车键确认//div
/templatestyle/*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
templateul classtodo-main!--当时我写到这里的时候想用v-for去遍历数据这样我就不用写MyItem/了--MyItem//ul
/templatestyle/*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
templatelilabelinput typecheckbox/spanxxxxx/span/labelbutton classbtn btn-danger styledisplay:none删除/button/li
/templatestyle/*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
静态页面完成,明天继续
