2020 零基础 Vue快速入门 教开发一个记事本(激发编程乐趣)【整理+源码】

文章目录

        • 1、引言
        • 2、记事本概述
        • 3、模板展示
        • 4、新增功能开发
        • 5、删除功能开发
        • 5、统计功能开发
        • 6、清空功能开发
        • 7、隐藏功能开发
        • 8、结束语
        • 点击进入Vue❤学习专栏~

1、引言

最近呢,也是在自学Vue中,通过边学边记录,算是一项成长记录篇把,本篇博客以简单记事本开发,激发对前端开发的兴趣,过程中的一些样式就不展示了,只展示一部分核心代码。需要源码的话在文章末尾会提供本次项目源码,请多指教~

2、记事本概述

该记事本取名为“加菲猫的记事本”,至于为什么这个名字就不要深究了哈~
记事本主要功能:

  • ① 新增任务功能
  • ② 删除任务功能
  • ③ 统计任务功能
  • ④ 清空任务功能
  • ⑤ 隐藏任务功能

那么,我们就一起来开发把!


记事本涉及知识:

① 列表结构可以通过v-for指令结合数据生成
② v-on结合事件修饰符可以对事件进行限制,比如.enter
③ v-on在绑定事件时可以传递自定义参数
④ 通过v-model可以快速的设置和获取表单元素的值
⑤ 基于数据的开发方式

记事本完整版效果图展示:

2020 零基础 Vue快速入门 教开发一个记事本(激发编程乐趣)【整理+源码】_第1张图片

3、模板展示

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>加菲猫的记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <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>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>加菲猫的记事本</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo">
            <div class="view">
              <span class="index">1.</span> <label>做一百道算法题</label>
              <button class="destroy"></button>
            </div>
          </li>
          <li class="todo">
            <div class="view">
              <span class="index">2.</span> <label>给女朋友买口红</label>
              <button class="destroy"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"> <strong>1</strong> items left </span>
        <button class="clear-completed">
          Clear
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
      <p>
        <a href="https://blog.csdn.net/weixin_42429718">
    		<img src="https://s2.ax1x.com/2019/06/14/V5R7od.png" alt="点击跳转到博主主页"/>
    	</a>
      </p>
    </footer>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  </body>
</html>

2020 零基础 Vue快速入门 教开发一个记事本(激发编程乐趣)【整理+源码】_第2张图片

4、新增功能开发

  • ① 生成列表结构(v-for 数组)
  • ② 获取用户输入(v-model)
  • ③ 回车,新增数据(v-on .enter添加数据)
<html>
  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>加菲猫的记事本</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo" v-model="inputInfo" @keyup.enter="pushInfo"
        />
      </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"></button>
            </div>
          </li>
        </ul>
      </section>
    </section>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el:"#todoapp",
			data:{
				list:["吃饭饭","睡觉觉","打豆豆"],
				inputInfo:"请输入任务"
			},
			methods:{
				pushInfo:function(){
					this.list.push(this.inputInfo)
				}
			}
		})
	</script>
  </body>
</html>

5、删除功能开发

  • ① 点击删除内容(v-on splice 索引)

删除就是用数组的函数 splice(对应的索引,howmany删除多少个)
通过检查元素,找到我们那个小x的位置 绑定事件即可

<html>
  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
       <!-- 列表区域 -->
      <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="spliceInfo(index)"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"> <strong>1</strong> items left </span>
        <button class="clear-completed">
          Clear
        </button>
      </footer>
    </section>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el:"#todoapp",
			data:{
				list:["吃饭饭","睡觉觉","打豆豆"],
				inputInfo:"学如逆水行舟,不进则退"
			},
			methods:{
				pushInfo:function(){
					this.list.push(this.inputInfo)
				},
				spliceInfo:function(index){
					this.list.splice(index,1)
				}
			}
		})
	</script>
  </body>
</html>

5、统计功能开发

  • ① 统计信息个数(v-text length)

核心地方就是找到显示位置,然后通过length来获取list长度即可

  <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"> <strong>{{this.list.length}}</strong> items left </span>
        <button class="clear-completed">
          Clear
        </button>
      </footer>

6、清空功能开发

  • ① 点击清除所有信息(v-on

核心地方就是找到clear按钮位置,然后通过清空方法将list清空掉即可

 <!-- 统计和清空 -->
<footer class="footer">
    <span class="todo-count"> <strong>{{this.list.length}}</strong> items left </span>
    <button class="clear-completed" @click="clearInfo"> 
       Clear
   </button>
</footer>

clearInfo:function(){
    this.list=[]
}

7、隐藏功能开发

  • ① 当没有数据时,隐藏元素,让界面更加美观

这里两种隐藏方式,看个人对界面的感觉:
第一种,隐藏子标签:

 <!-- 统计和清空 -->
      <footer class="footer" >
        <span class="todo-count" v-show="this.list.length!=0"> <strong>{{this.list.length}}</strong> items left </span>
        <button class="clear-completed" @click="clearInfo" v-show="this.list.length!=0"> 
          Clear
        </button>
      </footer>

2020 零基础 Vue快速入门 教开发一个记事本(激发编程乐趣)【整理+源码】_第3张图片

第二种,隐藏父标签:

 <!-- 统计和清空 -->
      <footer class="footer" v-show="this.list.length!=0">
        <span class="todo-count"> <strong>{{this.list.length}}</strong> items left </span>
        <button class="clear-completed" @click="clearInfo"> 
          Clear
        </button>
      </footer>

2020 零基础 Vue快速入门 教开发一个记事本(激发编程乐趣)【整理+源码】_第4张图片

8、结束语

至此,记事本开发就完毕了,你是不是对Vue更加了解了呢,注意一下,过程中的代码并非源代码,直接使用可能会出bug,只是展示了相关功能的部分核心代码,下面附上本次项目源代码:

链接:https://pan.baidu.com/s/15yo5v12myxt3zx2Jjt-MXg
提取码:u4e2


最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~
在这里插入图片描述

点击进入Vue❤学习专栏~

学如逆水行舟,不进则退

你可能感兴趣的:(Vue全家桶系列)