首先是基本框架：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body>
<div id="app">
<h2>记事本</h2>
<div class="main">
<input type="text" />
<ul>
<li>
<div class="content"><span>1.</span> 吃饭饭</div>
<button>❌</button>
</li>
</ul>
<p class="empty">空空如也...</p>
</div>
<div class="bottom">
<span>合计:2</span>
<span>清空</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {},
})
</script>
</body>
</html>
然后我们逐步开始：
步骤一在data中声明一个数组
list: [
{ id: 1, title: '我' },
{ id: 2, title: '的' },
{ id: 3, title: '是' }
]步骤二.在li标签内用v-for语法搭配key来渲染list数据：
<li v-for="(item,index) in list" :key="item.id"></li>步骤三，使用插值语法更改需要渲染的数据，标题序号
<div class="content"><span>{{index+1}}.</span>{{item.title}}</div>步骤四：给input输入框添加v-modle双向绑定语法
-【v-model的trim修饰符】
作用:获取到输入框值时,可以自动帮你去除首尾空格语法:v-model.trim=“数据"-->
<input type="text" v-model="title" @keyup.enter="add" />步骤五：添加绑定的add添加事件
add() {}步骤六：如果输入为空就不往下执行，会弹出弹窗请输入内容
if(this.title =='') return alert('请输入一点内容')步骤七:能来到这一步证明有内容,就把输入的内容添加到数组中。
this.list.unshift({
id:Date.now(),
title:this.title,
})步骤八:把数据添加到列表后,把输入框内容清空。
this.title =''-步骤九:完善空空如也显示
<p class="empty" v-show="list.length == 0">空空如也...</p>步骤十:给删除按钮添加点击事件
<button @click="list.splice(index,1)">❌</button>步骤十一：将合计的默认数量改成数组长度
<span>合计:{{list.length}}</span>-步骤十二：将点击事件绑定为数组为空-
<span @click="list = []">清空</span>完整代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
<style>
#app {
margin-left: 500px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="app">
<h2>记事本</h2>
<div class="main">
<!--步骤四：给input输入框添加v-modle双向绑定语法-->
<input type="text" v-model="title" @keyup.enter="add" />
<ul>
<!--步骤二.在li标签内用v-for语法搭配key来渲染list数据-->
<li v-for="(item,index) in list" :key="item.id">
<!--步骤三，使用插值语法更改需要渲染的数据，标题序号-->
<div class="content"><span>{{index+1}}.</span>{{item.title}}</div>
<!--步骤十:给删除按钮添加点击事件.-->
<button @click="list.splice(index,1)">❌</button>
</li>
</ul>
<!--步骤九:完善空空如也显示-->
<p class="empty" v-show="list.length == 0">空空如也...</p>
</div>
<div class="bottom">
<!--步骤十一：将合计的默认数量改成数组长度-->
<span>合计:{{list.length}}</span>
<!--步骤十二：将点击事件绑定为数组为空-->
<span @click="list = []">清空</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: [
//步骤一在data中声明一个数组
{ id: 1, title: '我' },
{ id: 2, title: '的' },
{ id: 3, title: '是' }
]
},
methods: {
//步骤五：添加绑定的add添加事件
add() {
//步骤六：如果输入为空就不往下执行，会弹出弹窗请输入内容
if(this.title =='') return alert('请输入一点内容')
//步骤七:能来到这一步证明有内容,就把输入的内容添加到数组中。
this.list.unshift({
id:Date.now(),
title:this.title,
})
//步骤八:把数据添加到列表后,把输入框内容清空。
this.title =''
},
}
})
</script>
<!--【v-model的trim修饰符】
作用:获取到输入框值时,可以自动帮你去除首尾空格语法:v-model.trim=“数据"-->
</body>
</html>
知识点补充
【事件方法】
@click:当单击元素时,发生click事件。
@dbclick:当双击元素时,发生dbclick事件。
@focus:当元素获得焦点时,发生focus事件。
@blur:当元素失去焦点时发生blur事件。
@submit:当提交表单时,发生submit事件。
@keydown:当键盘被按下时,发生keydown事件。
@keyup:当键盘被松开,发生keyups事件。
@mouse enter:当鼠标指针穿过(进入)被选元素时,会发生mousedown事件。
@mouse down:当鼠标指针移动到元素上方,并按下鼠标左键,会发生mousedown事件。
@mouse leave:当鼠标离开被选元素时,会发生mouseleave事件.
@mouse down:当鼠标指针移动到元素上方,并按下鼠标左键,会发生mousedown事件。
@mouse leave:当鼠标离开被选元素时,会发生mouseleave事件。
@mouse move:当鼠标指针在指定的元素中移动时，会发生 mousemove事件。
@mouse out:在鼠标指针离开被选元素或任意子元素时都会被触发。
@mouse over:当鼠标指针位于元素上方时，会发生 mouseover事件。
@mouse up:当鼠标指针移动到元素上方，并松开鼠标左键时，会发生mouseup事件。