Vue.js教程栏目介绍学习规划和了解 Vue.js,可以一起来学习。
这篇学习笔记将记录一些我个人在学习 Vue.js 框架时所编写的程序代码与学习心得。为此,我会在ProgrammingLanguage/JavaScript
目录下创建一个名为的vuejs
目录,并在该目录下设置以下两个子目录:
note
目录用于存放markdown
格式的笔记。code
目录则用于存放笔记中所记录的程序代码。
学习规划
- 学习基础:
- 掌握 HTML、CSS、JavaScript 相关的基础知识。好吧,我
- 掌握 npm 包管理器的基本用法。
- 了解 B/S 应用程序架构的基本原理。
- 学习资料:
- 视频教程:黑马程序员之 Vue.js 教学视频
- 线上文档:Vue.js 官方教程
- 参考书籍:《深入浅出 Vue.js》
- 学习目标:
- 开发一个"云端记事本"应用。
第 1 部分:了解 Vue.js 框架
这部分笔记将记录我对 Vue.js 框架的概念性了解,以及在项目中引入该框架的具体方法,并编写一个"Hello World"程序。
Vue.js 简介
Vue.js 是一套用于构建用户界面的渐进式框架。该框架被设计为可以自底向上逐层应用,它的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue.js 也完全能够为复杂的单页应用提供驱动。简而言之,Vue.js 具有以下特性:
- 使用了传统 HTML 类似的模版语法,对于新手来说,或许更易于上手。
- 使用了虚拟的 DOM 模型,简化了对页面元素的操作方式。
- 使用了响应式的视图组件,有助于提高程序界面的用户体验。
- 页面渲染速度极快,能赋予应用程序良好的执行性能。
- 既可以像 React 一样提供用于构建复杂大型应用的路由接口。
- 也可以像 jQuery 一样提供使用简单、且封装良好的操作接口。
当然,由于 Vue.js 的作者本身是一个中国人,所以 Vue.js 社区的中文资料也相比其他 JavaScript 框架社区要丰富一些,这对于很多习惯中文阅读的用户来说,或许也是选择使用这一框架的原因。
引入 Vue.js 框架
和大多数 JavaScript 前端程序库和应用框架一样,在自己的项目中引入 Vue.js 框架主要有 CDN 引用和本地引用两种方式,下面分别来学习一下它们。
CDN 引用
CDN 是内容分发网络(Content Delivery Network 或 Content Distribution Network)的缩写,这是一种利用现有的互联网络系统中最靠近目标用户的服务器,更快、更可靠地分发音乐、图片、视频、应用程序以及其他数据资料的方式,目的是提供高性能、可扩展性及低成本的网络内容传递给用户。换而言之,在使用 CDN 这种引用方式时,Vue.js 框架文件会被存储在指定的 CDN 服务网络的某个服务器节点上,由该服务来集中负责针对该框架文件的访问负载并维护该框架的版本,而我们只要在 HTML 文档的<script>
标签中引用相应 CDN 服务的 URL 即可,像这样:
<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 或者 --> <!-- 生产环境版本,优化了文件大小和载入速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
在上述示例中,我测试了使用cdn.jsdelivr.net
提供的 CDN 服务来引用 Vue.js 框架,这也是 Vue.js 官方教程中推荐的服务。至于是该引用开发环境的版本,还是生产环境的版本,这就要取决于具体的使用场景了。在通常情况下,我会选择在程序开发阶段引用反馈信息相对丰富的开发环境版本,而等到程序发布之时再切换至更追求执行效率的生产环境版本。下面来了解一下使用 CDN 这种引用方式的优势:
- CDN 的总承载量可以比单一骨干最大的带宽还要大。这使得内容分发网络可以承载的用户数量比起传统单一服务器多。
- CDN 服务器可以被放置到不同地点,这有助于减少计算机之间互连的流量,进而降低带宽成本。
- CDN 通常会指派较近、较顺畅的服务器节点将资料传输给用户。虽说距离并非影响传输的绝对因素,但这可以尽可能提高性能和用户体验。
- CDN 上存储的资料通常都会有异地备援,即当某个服务器故障时,系统将会调用其他邻近地区的服务器资料,以提高服务的可靠度。
- CDN 提供给服务提供者