Vue.js快速入门

KitorinZero 发布于2019-08-20 19:06 / 514人阅读

摘要：今年以来，的文档更新很快完善社区也日渐状大，再加上于某厂你懂的大力的推广，的前景十分光明。一般情况下，中小型的系统从迁移到版本大概只需要天的时间。快去动手尝试吧原创新书移动前端高效开发实战已在亚马逊京东当当开售。

作者：晓飞（沪江Web前端开发工程师）
本文原创，转载请注明作者及出处

Vue.js框架已经火了好长一段时间了，早在2015年的双11中，淘宝的部分导购业务——如：双十一晚会摇一摇清单、我的双十一标签进入的人群会场寻找与自身匹配的商品。今年以来，vue的文档更新很快完善、社区也日渐状大，再加上于某厂（你懂的）大力的推广，vue的前景十分光明。本文目的：通过这篇文章了解一些vue的基本概念以及如何在实际编码中使用vue，文末有demo的仓库地址，大家可以clone后，本地查看、运行一下。

文章开始，先比较一下vue和react。

先说它们的相似之处：

使用 Virtual DOM，提供了响应式编程和组件化的视图组件；

不同于angualr的大而全，vue、react将注意力集中保持在核心库，如果如果你需要用到其他的话，可以在社区中寻找或者自己开发一个，如vue-router（路由）和vuex(负责处理全局状态管理的库)；

然后是不同之处：

性能：据vue.js官网声称vue的性能在某些场景下是优于react的——渲染性能 10,000 个列表项 100 次，vue较之react平均快100ms；Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧，因此在开发类似动画这样的应用时，vue.js更占优势；

html模板绑定：react使用JSX，vue也支持JSX，但建议使用其内置的模板引擎，也可以使用Jade。JSX的不足在于：当绑定页面用到if判断、循环时，jsx的语法让代码看起来很混乱、也不直观；当然，jsx也有自己的优势——支持linting等检查；

CSS： vue通过在DOM上增加scoped，就可以实现CSS Modules的功能；

React相比Vue也有自己的优势，react的生态系统更丰富、完善；

看起来vue很"niubility"的样子，那vue小白用户如何快速的动手尝试呢？下面以首页（index.vue）为例，了解一下具体的用法，里面包含了组件的写法及在页面中如何组合、模板数据及事件绑定。

目录结构

效果图

index.vue(views文件夹下，views文件夹下的每一个页面由components中的多个组件拼合而成）。此页面分为3块，每一个组件都是多带带一个vue（里面定义自己的样式和交互事件）。

footer组件（components文件夹下）

最后附上，最终生成的主html的结构：

如果你想新建多个页面，你也可以在项目中进行相应的配置。

main.js

在下面提到的项目里，也有我们常规的列表（views/blog.vue）及todolist （views/blogManage.vue）的demo，下面是截图：

如果你想本地实践一下，可以通过下面的两种方式找到整个项目（readme文档里有详细的使用说明，运行起来只需要两步）

点击链接（https://github.com/coder-Yin/...）；

在github上搜索learn-vue,第一个项目就是；

阿里也推出了Weex，其实叫Vue-Native也可以(这个名字只是为了让你大致了解Weex是用来干嘛的，不要真的在网上搜~~)；另外，vue今年推出了2.0版本，相较1.0，主要做了下面的一些改变：

2.0 用一个 fork 自 snabbdom 的轻量 Virtual DOM 实现对渲染层进行了重写；

改变了一些代码写法，如循环v-for——当含有 index 时，以前传递的参数顺序是(index, value)，现在变成了(value, index)。

官方支持的库和工具——vue-router、vuex、vue-loader等都已经升级并支持 2.0 了；

虽然看起来做了一些大的变化，但是几乎90%的 API 和核心概念都没有变，官方推出了从1.0到2.0的迁移方案，同时出了一个migration helper的工具，这个工具发现了一个弃用的用法之后，就会给出通知和建议，并附上关于详细信息的链接。一般情况下，中小型的系统从vue1.0迁移到2.0版本大概只需要1天的时间。快去动手尝试吧~

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

GPU云服务器云服务器前端快速入门云计算快速入门 css快速入门 html快速入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85143.html

vue.js快速入门

摘要：但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。不知道还要不要再来一个快速入门，发展得挺快，东西也像类似的全家。以前看到多少天学习系列，我都深感烦躁，短短几天怎么可以精通，那是对于他们而言。但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。回到vue本身...

MkkHou 2019-08-20 10:45 评论0 收藏0
前端必须要珍藏的技术文章和面试题

摘要：前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下前端工程师日常工作所需要的学习资料查找，帮助学习者快速掌握前端工程师开发的基本知识编程始于足下记住再牛逼的梦想也抵不住傻逼似的坚持蝴蝶前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下web前端工程师日常工作所需要的学习资料...

MoAir 2019-08-26 10:29 评论0 收藏0
vue.js快速入门

摘要：的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的中英文都有提供快速入门准备地址地址没错就只需要这两个就可以开发了是核心文件，在这里只是为了提高开发效率而引用的，是可选的。专门存储一些数据的属性，数据一定是对象格式。 **关于前阵子的文章错误有点多所以从新修改了并添加了一些在官方脚手架vue-cli开发时需要注意的事项，Vue.js是一个轻巧、高性能、可组件化的MVVM库。...

dantezhao 2019-08-20 13:46 评论0 收藏0
Vue.js 快速入门

摘要：改变其中的任何一层，另外一层都会改变。插值相信你也注意到了，通过的形式就能取到的值，并与进行绑定。中改变中的值时相应也改变了中的，从而也得到改变。上面的代码改为这样则不会随着数据的改变而更新。顾名思义，用于条件判断，和是一对。什么是Vue.js showImg(http://7xawrk.com1.z0.glb.clouddn.com/15-11-8/16479285.jpg); v...

caspar 2019-08-21 10:46 评论0 收藏0