开发
HTML + CSS + Vuejs基于数据的开发模式
以前开发是基于DOM的开发模式，本案例中基于数据的开发模式
- 列表结构通过 v-for 指令结合数据生成
- v-on 结合实践修饰符对事件进行限制，比如.enter
- v-on 在绑定事件时可以传递自定义参数
- 通过 v-model 可以快速的设置和获取表单元素的值
- 基于数据的开发模式
预览
功能
新增
- 生成列表结构【v-for数组】
- 获取用户输入【v-model】
- 回车，新增数据【v-on .enter添加数据】
删除
- 点击删除指定内容（v-on splice 根据索引删除指定元素）
- 数据改变和数据绑定的元素同步改变
- 事件的自定义参数
统计
- 统计信息个数（v-text 长度）
- list.length
清空
- 点击清除所有信息（v-on 清空数组）
- this.list=[];即可实现
隐藏
- 没有数据时，隐藏元素（v-show v-if）
- 使用 v-if 作用于
源码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
<title>记事本</title>
<meta name="robots" content="noindex,nofollow" />
<meta name="googlebot" content="noindex,nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<!--主体区域-->
<h1 class="biaoti">notepad记事本</h1>
<section id="todoapp">
<!--输入框-->
<header class="header">
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="输入任务"
class="new-todo">
</header>
<!--列表区域-->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{index+1}}.</span>
<label>{{item}}</label>
<button class="destroy" @click="remvoe (index)">删除</button>
</div>
</li>
</ul>
</section>
<!--统计清空-->
<footer class="footer">
<div>
<span class="left" v-if="list.length!=0"><strong>{{list.length}}</strong>  items </span>
<span class="right" @click="clear" v-show="list.length!=0"><button>Clear</button></span>
</div>
</footer>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["今日任务1", "今日任务2", "今日任务3"],
inputValue: "哈哈小恶习"
},
methods: {
add: function () {
this.list.push(this.inputValue)
},
remvoe: function (index) {
this.list.splice(index, 1)
},
clear: function () {
this.list = [];
}
},
})
</script>
</html>
index.css
* {
padding: 0;
margin: 0;
}
#todoapp {
width: 300px;
margin: 5px auto;
box-shadow: 0px 3px 10px 2px rgba(0,0,0,.1);
}
.biaoti {
font:normal 200 34px '微软雅黑' ;
color: rgb(219, 82, 82);
text-align: center;
padding-top:100px ;
padding-bottom: 10px;
}
.new-todo{
width: 100%;
height: 40px;
padding-left:10px;
color: rgb(88, 88, 88);
box-sizing:border-box;
border: 1px solid rgb(236, 236, 236);/*这里之前宽写成100%就出现对不齐的问题*/
}
.new-todo:focus{
outline: none;
}
.footer{
position: relative;
width:100%;
height: 40px;
box-sizing:border-box; /*border-box你想要设置的边框和内边距的值是包含在width内的.不包含margin*/
border: 1px solid rgb(236, 236, 236);
background-color: white;
}
.footer span{
font-size: 12px;
color: rgb(131, 131, 131);
float: left;
line-height: 40px;
}
.left{
margin-left: 10px;
}
.right{
margin-left: 170px;
}
.todo{
list-style: none;
font-size: 14px;
font-family: '微软雅黑';
color: rgb(88, 88, 88);
box-sizing:border-box;
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid rgb(236, 236, 236);
background-color: white;
}
.view{
position: relative;
margin-left:10px ;
}
.view label{
width: 200px;
height: 40px;
position: absolute;
overflow: hidden; /* 超出的文本隐藏*/
text-overflow: ellipsis; /* 溢出用省略号显示*/
white-space:nowrap; /* 溢出不换行*/
}
.destroy{
position: absolute;
right: 10px;
top:9px;
font-size: 12px;
font-family: '微软雅黑';
outline:none;
border: 1px solid rgb(236, 236, 236);
color: rgb(255, 111, 111);
display: none;
}
.view:hover .destroy{ /*这里的.destroy和前面的要有空格，不然奏效*/
display: block;
}
.left strong{
font-weight: 400;
}
.footer button{
position: absolute;
right: 10px;
top: 9px;
background-color: white;
border: 0px;
outline:none;/*去掉选中按钮是边框的颜色*/
font-size: 12px;
font-family: '微软雅黑';
color: rgb(131, 131, 131);
}