1.使用方法和组件
import TodoHeader from './components/TodoHeader' //导入TodoHeader .vue 文件
components：{} 这个里面是放子组件的
：content 强制绑定 到子组件接收数据的时候使用props[‘content’]
<TodoHeader /> 这个是在 components 里面命名 子组件
methods:{}methods属性是定义方法的主要区域
import './base.css' 这个是导入 base.css文件
2.实例代码
项目结构
App.vue
<div class="todo-container">
<div class="todo-wrap">
import TodoHeaderfrom './components/TodoHeader'
import TodoFooterfrom './components/TodoFooter'
import TodoListfrom './components/TodoList'
export default {
name:'App',
data () {
return {}
},
components: {
TodoHeader,
TodoFooter,
TodoList
},
created () {
},
methods: {}
}
<style scoped>
.todo-container {
width:600px;
margin:0 auto;
}
.todo-container .todo-wrap {
padding:10px;
border:1px solid #ddd;
border-radius:5px;
}
TodoFooter.vue
<div class="todo-footer">
<input type="checkbox"/>
<span>已完成0</span> /全部2
<button class="btn btn-danger">清除已完成任务
export default {
name:'TOdoHeader',
data () {
return {}
},
created () {
},
methods: {}
}
<style scoped>
.todo-footer {
height:40px;
line-height:40px;
padding-left:6px;
margin-top:5px;
}
.todo-footer label {
display:inline-block;
margin-right:20px;
cursor:pointer;
}
.todo-footer label input {
position:relative;
top: -1px;
vertical-align:middle;
margin-right:5px;
}
.todo-footer button {
float:right;
margin-top:5px;
}
TodoHeader.vue
<div class="todo-header">
<input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
export default {
name:'TOdoHeader',
data () {
return {}
},
created () {
},
methods: {}
}
<style scoped>
.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);
}
TodoList.vue
<ul class="todo-main">
<input type="checkbox"/>
<span>xxxxx
<button class="btn btn-danger" style="display:none">删除
<input type="checkbox"/>
<span>yyyy
<button class="btn btn-danger" style="display:none">删除
export default {
name:'todoList',
data () {
return {}
},
created () {
},
methods: {}
}
<style scoped>
.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;
}
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;
}
base.css
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;
}
三、demo实现效果：
