Article Directory
1 Introduction
Recently it is also in self-Vue by learning while recording, recording papers to be a growing, this blog with a simple notepad development, stimulate interest in front-end development, the process does not show some style, only shows part of the core code. Need the source code, then provide the source of this project will be the end of the article, please enlighten ~
2, an overview notepad
The Notepad named "Garfield's Notepad", as to why this name do not get to the bottom of the Ha ~
notepad main functions:
- ① New task function
- ② delete task function
- ③ statistical tasks function
- ④ emptied tasking capabilities
- ⑤ hide-tasking capabilities
So, we will work together to develop!
Notepad involves knowledge:
① list structure may be combined with the data generated by the v-for command
binding event modifier may be limited to events ② v-on, such .enter
③ ON V-custom parameters can pass when binding event
④ quickly by v-model setting and getting values of the form element
⑤ based on data developed embodiment
Notepad full version renderings show:
3, showing the template
<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>
4, the development of new features
- ① generates a list structure (v-for arrays)
- ② get user input (v-model)
- ③ carriage return, new data (v-on .enter Add Data)
<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, delete function development
- ① Click the Delete content (v-on splice index)
Delete function splice is to use an array (corresponding index, howmany delete the number)
by examining the elements, we find the location of the binding event can be a little 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, the development of statistical functions
- ① statistical information about the number (v-text length)
The core is to find the position of the place, and then to get the list by length to length
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count"> <strong>{{this.list.length}}</strong> items left </span>
<button class="clear-completed">
Clear
</button>
</footer>
6, emptying function development
- ① Click to clear all of the information ( v-ON )
The core is the place to find position clear button, and then by emptying the list method can be emptied out
<!-- 统计和清空 -->
<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, hidden feature development
- ① When there is no data, hidden elements, make the interface more attractive
Here two kinds of hidden ways, a matter of personal perception of the interface:
the first, hidden sub-tabs:
<!-- 统计和清空 -->
<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>
The second, hidden parent tag:
<!-- 统计和清空 -->
<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>
8. Conclusion
So far, the development on the notepad finished, you are not on the Vue a better understanding of it, pay attention to the process of the code is not the source code may be used directly out of bug, shows some knowledge related functions of the core code, attached below The project source code:
Link: https: //pan.baidu.com/s/15yo5v12myxt3zx2Jjt-MXg
extraction code: u4e2
学如逆水行舟，不进则退
