第一章 Vue.js入门
在学习Vue前，您应该有HTML，CSS和JavaScript的基本知识。本教材使用WebStrom工具开发并调试，案例源码基于 Vue 2.6.1 版本测试，样式表使用LayUI样式实现。
本章要点
☐ 了解什么是Vue.js
☐ 了解Vue中的MVVM模式
☐ Vue开发环境的准备与配置
☐ 了解Vue项目目录结构
☐ 实例化Vue对象、数据与方法
☐ 通过综合实例学习Vue原理与开发过程
1.1 Vue简述
1.1.1 什么是Vue.js
Vue.js的作者为Evan You（尤雨溪），曾任职于Google Creative Lab，虽然是Vue是一个个人项目，但在发展前景上个人认为绝不输于Google的Angular.js和Facebook的React.js。
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架,是当下很火的一套响应式系统的JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。类似其他前端开发库也有很多，比如Angular.js，React.js等。Vue.js是前端主流框架中的集大成者，它吸取了Angular.js，React.js的经验，支持各种模式写法，入门非常简单，相比于Angular.js和React.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
Vue.js 自身不是一个全能框架，它只聚焦于视图层，采用自底向上增量开发的设计，因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起
使用时，Vue.js 也能完美地驱动复杂的单页应用。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来，一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
1.1.2 Vue.js的特性
1.遵循MVVM模式（m->model(数据对象) v->view(视图) vm->view model）；
2.编码简洁，体积小，运行效率高，适合移动端/PC端；
3.它本身只关注UI，可以轻松引入Vue插件或其他第三方库开发项目；
Vue扩展插件：
vue-cli:Vue脚手架
vue-resource(axios):ajax请求
vue-router:路由
vuex:状态管理
vue-lazyload:图片懒加载
vue-scroller:页面滑动相关
mint-ui:基于Vue的UI组件库（移动端）
1.1.3 Vue优势
1. 可进行组件化开发，使代码量减少；
2. 可对数据进行双向绑定；
3. 编写出来界面效果本身是响应式的，使网页能显示好看效果；
4. 实现网络页面之间跳转，与Vue 路由相比，超链接不会页面刷新；
1.1.4 为什么使用Vue
由于近两年前端技术变革速度太快，vue不论针对web项目开发，网站制作，还是app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。如果仅仅还是采用传统的各种开源代码建站仿站，显然你的技术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那么vue将会是代码运行js特效你未来技术增长的不二选择。
简单来说，在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令。这些内容在简单的项目中或者不变的项目中还能应付得来，一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候如果用了Vue.js，这些问题都不复存在。比如一些单网页制作成的应用程序，一般涉及到数据交互的内容都很多，而应用了Vue之后也将大大缩减工作量。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论