教程视频来源:前端最新Vue2+Vue3基础入门到实战项目全套教程
案例名称:小黑记事本 (vue3.0版本)
![](https://i-blog.csdnimg.cn/direct/13754747962b4f5abd482f1e491e0475.png)
案例效果:
![](https://i-blog.csdnimg.cn/direct/246dd6b548f64e078d67667c28200e6f.png)
案例步骤:
1.准备容器 <div id="note_list"></div> 用于后续对接vue实例中的数据
2.引入script包(这里引入的是vue3 版本)
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
3.创建vue实例 并 配置
const { createApp } = Vue;
const app = createApp({
data() {
return {
//存放数据
}}
})
app.mount('#note_list') //mount中存放 第一步创建的容器名称
vue2 格式:
const app = new Vue({
el:'#note_list',
data: {
//存放数据
}
})
4.先写好 静态 固定数据的 记事本 并引入css文件
<link rel="stylesheet" href="./notebook.css">
5.写css文件
6.修改 页面中需要渲染的部分
总结:
该案例 使用到的vue指令有:
1. v-show:“表达式”
用法:当条件为true时,v-show指定的标签内容可见;否则,v-show指定的标签内容不可见(隐藏),display:none; v-show适用于频繁切换显示 隐藏的场景
2.v-for :"(item,index) in lists"
其中,lists为data中给定的数组
用法:循环结构,遍历lists列表中的每一条数据。item为lists中的某一条数据,index为lists中这条数据所在的位置/索引(非必要时可省略)。v-for常搭配 :key使用,以便vue进行列表项的正确排序复用。注意!!:key的值必须具有唯一性
3.v-on:事件名=“内联语句//方法名”
v-on可以缩写为@
常见的格式:@click="methods中的方法名"
用法:当用户做出某一事件(例如:click 点击事件)于所在的标签时,即会调用后面写的方法,执行方法中的语句
4.v-model =“变量名”
v-model用于双向数据绑定
用法:在指定的标签中添加 v-model =“变量名”,即可进行双向数据绑定。
当数据发生改变,视图也会改变
当视图发生改变,数据也会改变
该案例使用到的方法有:
1.filter 方法
基本用法是:= filter (数据源,筛选条件)
案例中的写法:this.lists = this.lists.filter( item => item.id !== id)
筛选出 lists中符合(item.id !== id)这一条件的所有数据
2.unshift 方法
unshift()方法用于向数组的开头添加一个或多个元素,并返回新数组的长度
this.lists.unshift({
id:+new Date(),
todo:this.inputvalue
})
unshift中的内容 应为 lists中定义的项
由于 此案例中使用v-for时,key的值指定为item.id。所以id 必须唯一
+new Date()可以给定一个时间戳,以保证数据的唯一性
案例代码:
notebook.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小黑记事本</title>
<link rel="stylesheet" href="./notebook.css">
</head>
<body>
<h1 id="title_note">小黑记事本</h1>
<div id="note_list">
<header>
<input type="text" placeholder="请输入任务" v-model="inputvalue" id="inputbox"><button id="buttonbox" @click="addtodo">添加任务</button>
</header>
<section>
<ul>
<li v-for="(item,index) in lists" :key="item.id">
<div class="todo">
{{index+1}}. {{item.todo}}
<div @click="del(item.id)" id="destory">×</div>
</div>
</li>
</ul>
</section>
<hr class="hr">
<footer v-show="lists.length > 0">
<span id="total">合计:{{lists.length}}</span>
<span id="cleanspan" @click="clean()">清空任务</span>
</footer>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
inputvalue:"",
lists: [
{ id: 1, todo: "跑步锻炼20分钟" },
{ id: 2, todo: "复习数组语法" }
]
};
},
methods:{
del(id){
this.lists = this.lists.filter( item => item.id !== id)
},
addtodo(){
if(this.inputvalue === ""){
alert("任务不能为空!")
return
}
this.lists.unshift({
id:+new Date(),
todo:this.inputvalue
}),
this.inputvalue=""
},
clean(){
this.lists=[]
}
}
});
app.mount('#note_list');
</script>
</body>
</html>
notebook.css:
*{
margin: 0;
padding: 0;
}
body{
background-color: rgba(230, 231, 231, 0.637);
text-align: center;
width: 100%;
}
#title_note{
margin: 100px auto;
color: rgb(212, 111, 111);
width: 500px;
text-align: center;
margin-bottom: 30px;
}
#note_list{
width: 500px;
text-align: center;
margin:0 auto;
background-color: white;
border: 1px solid lightgray;
box-shadow: 3px 3px 3px gray;
}
header{
width: 450px;
margin: 20px auto;
}
#inputbox{
width: 75%;
height: 50px;
background-color: white;
border: 2px solid rgb(212, 111, 111) ;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
text-indent: 20px;
box-sizing: border-box;
vertical-align:middle;
}
#inputbox::placeholder{
color: gray;
font-size: 20px;
font-style: italic;
opacity: 0.5;
}
#buttonbox{
width: 20%;
height: 50px;
border: 2px solid rgb(212, 111, 111) ;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: rgb(212, 111, 111);
font-size: 15px;
box-sizing: border-box;
vertical-align:middle;
color: white;
}
ul{
list-style-type: none;
}
.todo{
font-size: 20px;
text-align: left;
margin: 20px 50px;
display: flex;
overflow: auto;
position: relative;
}
#destory{
opacity: 0;
color: rgb(212, 111, 111);
font-size: 20px;
float: right;
position: absolute;
right: 0;
}
.todo:hover{
color: black;
}
.todo:hover #destory{
opacity: 1;
}
footer{
height: 40px;
line-height: 40px;
text-align: left;
}
#total{
margin-left: 60px;
color: gray;
font-size: 12px;
}
#cleanspan{
color: gray;
font-size: 12px;
margin-left: 300px;
}
#cleanspan:hover{
color: blueviolet;
}
.hr{
color: lightgray;
opacity: 0.5;
}