摘要：但是关于入门基础的文章，我还没有写过，那么今天就写入门的三个小实例，这三个小实例是我刚接触的时候的练手作品，难度从很简单到简单，都是入门级的。如果等于，第二个显示，其它三个不显示。
1.前言
用vue做项目也有一段时间了，之前也是写过关于vue和webpack构建项目的相关文章，大家有兴趣可以去看下webpack+vue项目实战（一,搭建运行环境和相关配置）（这个系列一共有5篇文章，这是第一篇，其它几篇文章链接就不贴了）。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我刚接触vue的时候的练手作品，难度从很简单到简单，都是入门级的。希望能帮到大家更好的学习和了解vue，也是让自己能够复习一下vue。如果发现文章写得有什么不好，写错了，或者有什么建议！欢迎大家指点迷津！
1.本篇文章使用的vue版本是2.4.2，大家要注意版本问题2.什么是vue
2.现在我也是假设您有基础的html,css,javascript的知识，也已经看过了官网的基本介绍，对vue有了一个大概的认识了，了解了常用的vue指令(v-model,v-show,v-if,v-for,v-on,v-bind等)！如果刚接触前端的话，你看着文章可能会蒙圈，建议先学习基础，掌握了基础知识再来看！
3.下面的实例，建议大家边看文章边动手做！这样思路会非常清晰，不易混乱！也不会觉得文章长！如果只看文章，你可能未必会看完，因为文章我讲得比较细，比较长！
4.这几个实例，摘自我自己的平常练习的项目，代码已经提到github上面了(vue-demos)。欢迎大家star。！
vue是现在很火的一个前端MVVM框架，它以数据驱动和组件化的思想构建，与angular和react并称前端三大框架。相比angular和react，vue更加轻巧、高性能、也很容易上手。大家也可以移步，看一下vue的介绍和核心功能官网介绍。简单粗暴的理解就是：用vue开发的时候，就是操作数据，然后vue就会处理，以数据驱动去改变DOM（不知道有没有理解错，理解错了指点下）。
下面就是一个最简单的说明例子
代码如下
html
{{ message }}
js
new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
相信也不难理解，就是input绑定了message这个值，然后在input修改的时候，message就改了，由于双向绑定，同时页面的html（{{ message }}）进行了修改！
好，下面进入例子学习！
这个很简单，无非就是一个点击切换显示而已。但是大家也要实现。如果这个看明白了，再看下面两个！这个实例应该只是一个热身和熟悉的作用！
这个的步骤只有一步，原理也没什么。我直接在代码打注释，看了注释，大家就明白了！
完整代码
Title
html
css
javascript
vue
4.统计总价
运行效果
原理分析和实现
首先，还是先把布局写好，和引入vue，准备vue实例，这个不多说，代码如下
Title
购物清单
全选
商品
数量
单价(元)
金额(元)
操作
共有N个目标
-
html5
X
-
css3
X
布局有了，相当于一个骨架就有了，下面实现功能，一个一个来
步骤1
输入并回车，多一条记录。下面的记录文字也会改变
首先，大的输入框回车要添加纪录，那么输入框必须绑定一个值和一个添加纪录的方法。
代码如下：
然后，下面的记录也要改变，所以，下面的记录也要帮一个值，因为这个记录可能会有多个，这个值就是一个数组，也可以看到，记录除了名称，还有记录是否完成的状态，所以，绑定记录的这个值肯定是一个对象数组！代码如下
最后，记录文字要改变。这个只是一个当前记录的长度即可！
为了着重表示我修改了什么地方，代码我现在只贴出修改的部分，大家对着上面的布局，就很容易知道我改的是什么地方了！下面也是这样操作！
html代码
共有{{prolist.length}}个目标
{{list.name}}
X
js代码
new Vue({
el: "#app",
data: {
addText:"",
//name-名称,status-完成状态
prolist:[
{name:"HTML5",status:false},
{name:"CSS3",status:false},
{name:"vue",status:false},
{name:"react",status:false}
]
},
computed:{
},
methods:{
addList(){
//添加进来默认status=false,就是未完成状态
this.prolist.push({
name:this.addText,
status:false
});
//添加后，清空addText
this.addText="";
}
}
});
测试一下，没问题
步骤2
点击切换，下面记录会改变
看到三个选项，也很简单，无非就是三个选择，一个是所有的目标，一个是所有已经完成的目标，一个是所有没完成的目标。
首先.新建一个新的变量（newList），储存prolist。遍历的时候不再遍历prolist，而是遍历newList。改变也是改变newList。
然后.选择所有目标的时候，显示全部prolist，把prolist赋值给newList。
然后.选择所有已经完成目标的时候，只显示prolist中，status为true的目标，把prolist中，status为true的项赋值给newList，
最后.选择所有未完成目标的时候，只显示status为false的目标，把prolist中，status为false的项赋值给newList。
代码如下
html
-
{{list.name}}
X
js
new Vue({
el: "#app",
data: {
addText:"",
//name-名称,status-完成状态
prolist:[
{name:"HTML5",status:false},
{name:"CSS3",status:false},
{name:"vue",status:false},
{name:"react",status:false}
],
newList:[]
},
computed:{
noend:function(){
return this.prolist.filter(function(item){
return !item.status
}).length;
}
},
methods:{
addList(){
//添加进来默认status=false,就是未完成状态
this.prolist.push({
name:this.addText,
status:false
});
//添加后，清空addText
this.addText="";
},
chooseList(type){
//type=1时，选择所有目标
//type=2时，选择所有已完成目标
//type=3时，选择所有未完成目标
switch(type){
case 1:this.newList=this.prolist;break;
case 2:this.newList=this.prolist.filter(function(item){return item.status});break;
case 3:this.newList=this.prolist.filter(function(item){return !item.status});break;
}
},
delectList(index){
//根据索引，删除数组某一项
this.prolist.splice(index,1);
//更新newList newList可能经过this.prolist.filter()赋值，这样的话，删除了prolist不会影响到newList 那么就要手动更新newList
this.newList=this.prolist;
},
},
mounted(){
//初始化，把prolist赋值给newList。默认显示所有目标
this.newList=this.prolist;
}
});
运行结果
步骤3
红色关闭标识，点击会删除该记录。前面按钮点击会切换该记录完成状态，颜色也改变，记录文字也跟着改变
首先点击红色关闭标识，点击会删除该记录。这个应该没什么问题，就是删除prolist的一条记录！
然后前面按钮点击会切换该记录完成状态。这个也没什么，就是改变prolist的一条记录的status字段！
最后记录文字的改变，就是记录prolist中status为false的有多少条，prolist中status为true的有多少条而已
html代码
共有{{prolist.length}}个目标，{{noend==0?"全部完成了":"已完成"+(prolist.length-noend)+"，还有"+noend+"条未完成"}}
-
{{list.name}}
X
js
new Vue({
el: "#app",
data: {
addText:"",
//name-名称,status-完成状态
prolist:[
{name:"HTML5",status:false},
{name:"CSS3",status:false},
{name:"vue",status:false},
{name:"react",status:false}
],
newList:[]
},
computed:{
//计算属性，返回未完成目标的条数，就是数组里面status=false的条数
noend:function(){
return this.prolist.filter(function(item){
return !item.status
}).length;
}
},
methods:{
addList(){
//添加进来默认status=false,就是未完成状态
this.prolist.push({
name:this.addText,
status:false
});
//添加后，清空addText
this.addText="";
},
chooseList(type){
switch(type){
case 1:this.newList=this.prolist;break;
case 2:this.newList=this.prolist.filter(function(item){return item.status});break;
case 3:this.newList=this.prolist.filter(function(item){return !item.status});break;
}
},
delectList(index){
//根据索引，删除数组某一项
this.prolist.splice(index,1);
//更新newList newList可能经过this.prolist.filter()赋值，这样的话，删除了prolist不会影响到newList 那么就要手动更新newList
this.newList=this.prolist;
},
},
mounted(){
this.newList=this.prolist;
}
});
运行结果
步骤4
文字双击会出现输入框，可输入文字，如果回车或者失去焦点，就改变文字，如果按下ESC就恢复原来的文字
首先.双击出现输入框，就是双击文字后，给当前的li设置一个类名（‘eidting’），然后写好样式。当li出现这个类名的时候，就出现输入框，并且隐藏其它内容。
然后.回车或者失去焦点，就改变文字这个只需要操作一个，就是把类名（‘eidting’）清除掉。然后输入框就会隐藏，其它内容显示！
最后.按下ESC就恢复原来的文字，就是出现输入框的时候，用一个变量（‘beforeEditText’）先保存当前的内容，然后按下了ESC，就把变量（‘beforeEditText’）赋值给当前操作的值！
代码如下：
html
-
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84820.html
相关文章
-
个人分享--web前端学习资源分享
摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。
1.前言
6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...
-
vue.js快速入门
摘要：但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。不知道还要不要再来一个快速入门，发展得挺快，东西也像类似的全家。
以前看到多少天学习系列，我都深感烦躁，短短几天怎么可以精通，那是对于他们而言。但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。
回到vue本身...
-
美团小程序框架mpvue入门教程
摘要：美团小程序框架入门教程自打写了美团小程序框架蹲坑指南一发不可收拾，今天趁周末空闲，来写个没朋友的简单入门教程，本教程只针对新手，老鸟勿喷。
美团小程序框架mpvue入门教程
自打写了 美团小程序框架mpvue蹲坑指南,一发不可收拾，今天趁周末空闲，来写个mpvue(没朋友)的简单入门教程，本教程只针对新手，老鸟勿喷。
另外，我还专门为本文做了一个简单的项目，如果懒得从头开始搭项目的童鞋...
发表评论
0条评论
vboy1010
男|高级讲师
TA的文章
阅读更多
菜鸟笔记(5)——VS（Visual Studio）的一些常用的设置，( 使用printf和scan
阅读 2457·2021-09-27 13:36
前端面试必问题答疑（2）
阅读 2162·2019-08-29 18:47
CSS预编译语言Less的用法总结
阅读 2129·2019-08-29 15:21
CSS 字体(例如font-awesome)，使用子域名之后不能正确显示
阅读 1393·2019-08-29 11:14
雪碧图sprity 合并多图使用心得
阅读 1978·2019-08-28 18:29
向CSS创始人之一Bert Bos提问！
阅读 1622·2019-08-28 18:04
IE 8 浏览器 placeholder 兼容性处理
阅读 568·2019-08-26 13:58
JavaScript sort() 对json进行排序(数组)
阅读 3206·2019-08-26 12:12
最新活动
阅读需要支付1元查看
