没有合适的资源?快使用搜索试试~ 我知道了~
前端开发-第一章 Vue入门.docx
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 97 浏览量
2023-02-22
21:24:52
上传
评论
收藏 1.14MB DOCX 举报
温馨提示
前端开发-第一章 Vue入门.docx
资源推荐
资源详情
资源评论
第一章 Vue.js 入门
在学习 Vue 前,您应该有 HTML,CSS 和 JavaScript 的基本知识。本教材使
用 WebStrom 工具开发并调试,案例源码基于 Vue 2.6.1 版本测试,样式表使
用 LayUI 样式实现。
本章要点
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。
1 / 23
Vue.js 自身不是一个全能框架,它只聚焦于视图层,
采用自底向上增量开发的设
计
,因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具
和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组
件。
如果你之前已经习惯了用 jQuery 操作 DOM,学习 Vue.js 时请先抛开手动操作 DOM 的
思维,因为 Vue.js 是数据驱动的,你无需手动操作 DOM。它通过一些特殊的 HTML 语法,
将 DOM 和数据绑定起来,一旦你创建了绑定,DOM 将和数据保持同步,每当变更了数据,
DOM 也会相应地更新。
Vue.js 的特性
1.1.2
1.遵循 MVVM 模式(m->model(数据对象) v->view(视图) vm->view
model);
2.编码简洁,体积小,运行效率高,适合移动端/PC 端;
3.它本身只关注 UI,可以轻松引入 Vue 插件或其他第三方库开发项目;
Vue 扩展插件:
vue-lazyload:图片懒加载
mint-ui:基于 Vue 的 UI 组件库(移动端)
2 / 23
1.1.3 Vue 优势
1. 可进行组件化开发,使代码量减少;
3. 编写出来界面效果本身是响应式的,使网页能显示好看效果;
4. 实现网络页面之间跳转,与 Vue 路由相比,超链接不会页面刷新;
1.1.4 为什么使用 Vue
由于近两年前端技术变革速度太快,vue 不论针对 web 项目开发,网站制
作,还是 app,小程序开发,都越来越流行,其便捷性及易用程度都让你不得
不考虑去学习。如果仅仅还是采用传统的各种开源代码建站仿站,显然你的技
术已经跟不上了,如果你开发的项目数据交互较多,并且前后端分离明显,那
么 vue 将会是你未来技术增长的不二选择。
简单来说,在传统 web 开发中,我们搭建项目都以 html 结构为基础,然后
通过 jquery 或者 js 来添加各种特效功能,需要去选中每一个元素进行命令。
这些内容在简单的项目中或者不变的项目中还能应付得来,一旦项目改动或者
项目工程较大,代码的修改将是复杂繁琐的,而这时候如果用了 Vue.js,这些
问题都不复存在。比如一些单网页制作成的应用程序,一般涉及到数据交互的
内容都很多,而应用了 Vue 之后也将大大缩减工作量。
再简单来说,当前端页面和后端数据做一些操作的时候,可以通过 AJAX 请
求对后端做数据持久化,不需要刷新整个页面,只需要改动 DOM 里需要改动的
那部分数据即可。
1.2 MVVM 模式
MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版。MVVM 就是将其
中的 View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。
3 / 23
下图 1-1 不仅概括了 MVVM 模式(Model-View-ViewModel),还描述了在 Vue.js 中
ViewModel 是如何和 View 以及 Model 进行交互的。
图 1-1 MVVM 模式交互图
ViewModel 是 Vue.js 的核心,它是一个 Vue 实例。Vue 实例是作用于某一
个 HTML 元素上的,这个元素可以是 HTML 的 body 元素,也可以是指定了 id 的
某个元素。
首先,我们将上图 1-1 中的 DOM Listeners 和 Data Bindings 看作两个工
具,它们是实现双向绑定的关键。
从 View 层看,ViewModel 中的 DOM Listeners 工具会帮我们监测页面上
DOM 元素的变化,如果有变化,则更改 Model 中的数据;
从 Model 层看,当我们更新 Model 中的数据时,Data Bindings 工具会帮
我们更新页面中的 DOM 元素。
专家提示
Vue 必须在 ES5 版本以上的环境下使用,一些不支持 ES5 的旧浏览器无法运行 Vue。
4 / 23
1.3 Vue.js 的下载及使用
安装步骤:
3. 创建一个基于 webpack 模板的新项目
4. 使用 cd 命令进入项目 my-project 中,并安装项目依赖项
5. 使用 cnpm run dev 运行项目
6. 成功执行以上命令后访问
第一步:首先安装 Node.js,搭建 Vue 环境
访问 Node.js 官网(https://nodejs.org/en/download/)进行安装包下载。
下载成功之后运行安装程序,进行安装。建议不要安装在系统盘(如
C:)。
如果是用安装程序进行安装,在安装过程中会自动进行 Nodejs 环境变量的
配置,如果是通过其他方式进行安装,可能需要手动配置环境变量。
5 / 23
剩余22页未读,继续阅读
资源评论
我是你的春哥!
- 粉丝: 1w+
- 资源: 9094
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功