没有合适的资源?快使用搜索试试~ 我知道了~
首页Vue进阶:轻量级框架与CSS预处理器应用
Vue进阶笔记讲义是一份详细的文档,针对Vue这一现代前端开发框架进行了深入讲解。Vue作为渐进式框架,旨在让开发者能够逐步采用,核心库专注于视图层,提供了简单易学的声明式编程模型,方便与其他库和项目集成。它的灵活性使得开发者可以根据项目需求选择性地使用Vue的功能,例如仅使用声明式渲染或组件系统。 在前端开发中,Vue的学习目标通常涉及理解前端知识体系,即HTML、CSS和JavaScript这三个关键要素。HTML负责网页的结构和内容,CSS则负责网页的外观和布局,而JavaScript则是控制网页交互和动态行为的核心。CSS层叠样式表(CSS)在早期由于缺乏强大的语法和复用机制,导致维护困难。为解决这些问题,前端开发者引入了CSS预处理器,如SASS和LESS。SASS基于Ruby,功能强大且解析效率高,但学习曲线较陡峭;LESS基于NodeJS,易用但功能相对简单,更适合日常开发。 JavaScript作为行为层,是前端开发的核心。原始的JavaScript(简称原生JS)遵循ECMAScript标准,有多个版本,从早期的ES3到现在的ES6,其中ES6版本因其广泛支持和实用性成为首选。原生JS开发允许开发者利用浏览器原生功能进行开发,尽管随着框架和库的发展,像Vue这样的库提供了更高级的API和更好的性能优化。 Vue进阶笔记讲义不仅涵盖了基础概念,还深入探讨了如何利用Vue的优势以及如何通过CSS预处理器和原生JS提升开发效率。这份文档对于想要进一步提升Vue技能,或者正在面临CSS和JavaScript复杂性的开发者来说,是一份宝贵的参考资料。
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/88211895/bgc.jpg)
互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的重要
一
环`。
概述
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的
是,
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三
方库
(如: vue-router , vue-resource , vuex )或既有项目整合。另一方面,当与现代化的工具
链以及
各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
MVVM 模式的实现者
我们知道 MVVM 表示如下:
Model:模型层,在这里表示 JavaScript 对象
View:视图层,在这里表示 DOM(HTML 操作的元素)
ViewModel:连接视图和数据的中间件,Vue.js 就是 MVVM 中的 ViewModel 层的实现者在
MVVM 架构中,是不允许 数据 和 视图 直接通信的,只能通过 ViewModel 来通信,而
ViewModel
就是定义了一个 Observer 观察者
ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化,并能够通知数据发生改变
![](https://csdnimg.cn/release/download_crawler_static/88211895/bgd.jpg)
至此,我们就明白了,Vue.js 就是一个 MVVM 的实现者,他的核心就是实现了 DOM 监听 与 数据
绑定
其它 MVVM 实现者
AngularJS
ReactJS
微信小程序
为什么要使用 Vue.js
轻量级,体积小是一个重要指标。Vue.js 压缩后有只有 30 多 kb (Angular 压缩后 56kb+,
React
压缩后 44kb+)
移动优先。更适合移动端,比如移动端的 Touch 事件
易上手,学习曲线平稳,文档齐全
吸取了 Angular( 模块化 )和 React( 虚拟 DOM )的长处,并拥有自己独特的功能,如: 计算属
性
开源,社区活跃度高
Vue.js 的两大核心要素
数据驱动当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象
所有的属性,并使用
Object.defineProperty 把这些属性全部转为 getter/setter 。Object.defineProperty 是
ES5 中
一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。
这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和
修改时
![](https://csdnimg.cn/release/download_crawler_static/88211895/bge.jpg)
通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,
所以
你可能需要安装 vue-devtools 来获取更加友好的检查接口。
每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当
依
赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。
组件化
页面上每个独立的可交互的区域视为一个组件
每个组件对应一个工程目录,组件所需的各种资源在这个目录下就近维护
页面不过是组件的容器,组件可以嵌套自由组合(复用)形成完整的页面
第一个 Vue 应用程序
兼容性
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支
持所有兼容
ECMAScript 5 的浏览器。
下载地址
开发版本
包含完整的警告和调试模式
删除了警告,30.96KB min + gzip
CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>第一个 Vue
应用程序
![](https://csdnimg.cn/release/download_crawler_static/88211895/bgf.jpg)
Vue.js 的核心是实现了 MVVM 模式,她扮演的角色就是 ViewModel 层,那么所谓的第一个应用
程序就
是展示她的 数据绑定 功能,操作流程如下:
创建一个 HTML 文件
引入 Vue.js
创建一个 Vue 的实例
说明
el:'#app' :绑定元素的 ID
data:{message:'Hello Vue!'} :数据对象中有一个名为 message 的属性,并设置了初始值
Hello Vue!
将数据绑定到页面元素将数据绑定到页面元素
说明:只需要在绑定的元素中使用 双花括号 将 Vue 创建的名为 message 属性包裹起来,即可实现
数
据绑定功能,也就实现了 ViewModel 层所需的效果,是不是和 EL 表达式非常像?
<html>
<head>
<meta charset="utf-8" />
<title>第一个 Vue 应用程序</title>
<!-- vue 核心库 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
<!-- 编写 Vue 组件 -->
var app = new Vue({
// element 的简写 挂载元素
el:'#app',
// 组件内部数据
data:{
message:'Hello Vue!'
剩余72页未读,继续阅读
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/179198b48a964d96b251adada04e7866_pleaseprintf.jpg!1)
Java毕设王
- 粉丝: 7913
- 资源: 1093
上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
会员权益专享
最新资源
- VMP技术解析:Handle块优化与壳模板初始化
- C++ Primer 第四版更新:现代编程风格与标准库
- 计算机系统基础实验:缓冲区溢出攻击(Lab3)
- 中国结算网上业务平台:证券登记操作详解与常见问题
- FPGA驱动的五子棋博弈系统:加速与创新娱乐体验
- 多旋翼飞行器定点位置控制器设计实验
- 基于流量预测与潮汐效应的动态载频优化策略
- SQL练习:查询分析与高级操作
- 海底数据中心散热优化:从MATLAB到动态模拟
- 移动应用作业:MyDiaryBook - Google Material Design 日记APP
- Linux提权技术详解:从内核漏洞到Sudo配置错误
- 93分钟快速入门 LaTeX:从入门到实践
- 5G测试新挑战与罗德与施瓦茨解决方案
- EAS系统性能优化与故障诊断指南
- Java并发编程:JUC核心概念解析与应用
- 数据结构实验报告:基于不同存储结构的线性表和树实现
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)