简介
本节将带领大家了解 Vue.js 是一个什么样的前端框架,与其他框架的区别以及它的特点,怎么去安装使用它。
知识点
- Vue 与其他框架的对比及特点
- 安装 Vue 的方法
- node 的安装
- vue-cli 的安装
- Vue 开发者工具的安装
- Vue 创建实例
- Vue 数据的双向绑定及响应式
官网
Vue.js
Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。<信息来源:vue 官网>
作者
尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于上 Colgate University,后在 Parsons 设计学院获得 Design & Technology 艺术硕士学位,任职于纽约 Google Creative Lab。<信息来源:百度百科>
作用
Vue.js 框架的作用主要注重动态的构建用户界面,前端工程化和模块化开发。
Vue 与其他框架的对比
框架 | 设计模式 | 数据绑定 | 灵活度 | 文件模式 | 复杂性 | 学习曲线 | 生态 |
---|---|---|---|---|---|---|---|
Vue | MVVM | 双向 | 灵活 | 单文件 | 小 | 缓 | 完善 |
React | MVC | 单向 | 较灵活 | all in js | 大 | 陡 | 丰富 |
Angular | MVC | 双向 | 固定 | 多文件 | 较大 | 较陡(Typescript) | 独立 |
更多对比细节:vue 官网:https://cn.vuejs.org/v2/guide/comparison.html
Vue 是一个推陈出新的前端框架,吸收了很多前端框架的优点。例如,Vue 借鉴了 React 的组件化和虚拟 DOM ,借鉴了 Angular 的模块化和数据绑定。因此,我们以 Vue.js 作为入手,以后深入学习其他框架,你会发现他们的共通之处,更好地高效地学习。
选择 Vue.js 的更多原因是,就框架的 API 而言,对比之下,Vue 更加轻便简洁。Vue 自身拥有开箱即用的生态开发包(Vuex,Vue-Router)等,复杂性低、学习成本低,是一门比较好入门的前端框架。
如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的选择,推荐进入实验楼前端基础知识课程。假入你已掌握了关于HTML
、CSS
和JavaScript
的中级知识,那让我们进入 Vue 的学习吧!
安装
<script>
标签引入
标签引入模式,和平常引入JQuery
一样,直接下载并用<script>
标签引入
下载地址:https://vuejs.org/js/vue.js
<script src="js/vue.min.js"></script>
CDN
引入
不用下载到本地,即引即用,学习推荐使用这种模式:
推荐 2 个较稳定的 cdn,以下任选其一
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
由于非会员用户无法访问外网,所以后续的代码中,统一使用引用链接为
https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js
。
脚手架工具
由于安装需要使用到外网,非会员用户不能访问外网。所以实验楼提供的在线环境已经安装好了所需工具,可以直接使用。步骤 1、2、3 可以直接略过。
1、vue-cli
是基于npm
的,所以应该先安装node
环境,通过node
官网:http://nodejs.cn/下载系统对应的node
安装程序。
注意: NPM 是随同 Node.js 一起安装的包管理工具。因此当我们安装好 Node.js 的时候,也安装好了 NPM。由于实验楼的环境下已经安装好了 Node.js,大家可以直接使用,实验楼环境中跳过安装 Node 步骤,直接进行第二步。
2、node
安装完毕使用,npm
包管理工具全局安装vue-cli
npm install -g vue-cli
3、命令行输入vue
,出现 Usage 表示安装成功。
4、使用指令生成一个 vue 应用
vue init webpack sylApp # sylApp 这里是项目名AppName
参考上图在命令行中输入对应的内容。
5、命令行进入刚刚创建的 app 的文件夹内,输入npm run start
将 vue 应用运行起来
cd sylApp
npm run start
6、成功执行命令行后,我们打开浏览器输入http://localhost:8080,即可看到一个vue 应用。
这是正常的操作流程,由于实验楼环境特殊,使用该方法需要额外的配置,我们需要修改一些文件:打开 sylApp/build/webpack.dev.conf.js,修改devServer
选项下的 host 配置代码为host: HOST || '0.0.0.0'
, 在 devServer 中添加disableHostCheck:true,
,修改成下图,所示
接着我们重复第五步的步骤,构建成功后,我们打开工具中的 Web 服务:
vue 开发者工具安装
注意: 由于实验楼环境使用的是 Preview 或 Mini Browser 是一个轻量级的浏览器,不支持插件安装,如需安装,请在自己的电脑上对应安装。
在使用 Vue 时,我们推荐在你的浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
1、下载对应浏览器的 Vue Devtools
- Get the Chrome Extension/ (beta channel)
- Get the Firefox Addon/ (beta channel)
- Get standalone Electron app (works with any environment!)
2、打开浏览器,打开设置>开发工具>扩展程序,将下载好的 Vue Devtools 拖到界面中,即可完成安装(谷歌浏览器为例)。
3、你就可以在浏览器中轻松调试你的 vue 应用
更多安装方式
其他安装方式请参考:官网教程
使用
根据上面的安装教程,初学者不推荐采用 vue-cli 的方式,因为你可能对 npm 包管理工具不太了解,推荐大家使用<script>
引入或者 cdn 引入的方法,后续教程也将采用 cdn 引入这种方式,那么我们开始创建第一个 Vue 应用。
创建第一个实例
每个 Vue 应用都是通过用Vue
函数创建一个新的 Vue 实例 开始的:
var app = new Vue({
// 选项
});
由于实验楼使用是 WebIDE 的在线环境,所以有不熟悉对同学请阅读下:实验楼 WebIDE 使用指南,
前端开发
部分的内容。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,我们新建一个.html 后缀的文件,输入以下代码,运行(右击文件 > open with > Preview 或 Mini Browser),你就会看到 {{msg}} 被渲染成 hello
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>syl-vue-test</title>
<!-- 通过cdn方式引入 vue.js -->
<script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
</head>
<body>
<div id="app">{{msg}}</div>
<script>
var app = new Vue({
el: "#app", //dom挂载点
data: {
//数据项
msg: "hello syl",
},
});
</script>
</body>
</html>
运行效果:
说明: el 为实例挂载点,上面表示挂载在 id 为 app 的 dom 元素中。data 选项为数据选项,存放绑定数据。除了这两个之外还有实例选项,methods(实例方法)、computed(计算属性) 等,后面我们会学习到。
理解 Vue 的 MVVM 模式
M:Model 即数据逻辑处理
V:View 即视图(用户界面)
VM:ViewModel 即数据视图,用于监听更新,View 与 Model 数据的双向绑定
所以,Vue 一大特点就是数据双向绑定,另一大特点就是响应式,接下来,我们来看看他的魅力。
数据双向绑定
在 Vue 中数据双向绑定随处可见,最常见的是表单数据中的双向绑定,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>syl-vue</title>
<!-- 通过cdn方式引入 vue.js -->
<script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
</head>
<body>
<!-- 数据双向绑定 -->
<div id="app">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
<script>
var app = new Vue({
el: "#app", //el: 挂载点
data: {
//data:数据选项
msg: "hello",
},
});
</script>
</body>
</html>
在我们对文本框输入值时,实例 data 中的 msg 值也随之变化。运行效果:
感受响应式
上面我们了解到 Vue 是一个 MVVM 架构的框架,成功创建了一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是 响应式的。我们可以看看他是不是响应式的,打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改app.msg
的值,你将看到上例相应地更新,更改数据也触发视图的相应更新。
注:由于实验楼环境特殊,上述操作需要在自己电脑上的浏览器中完成。
总结
我们学习了以下内容:
- Vue 与其他框架的对比及特点
- 安装 Vue 的方法
- node 的安装
- vue-cli 的安装
- Vue 开发者工具的安装
- Vue 创建实例
- Vue 数据的双向绑定及响应式
本节内容让我们掌握了 vue 的基础安装,以及怎么样去实例化第一个 vue 应用,需要自己亲手去写代码,初步感受一下 vue 的神奇之处。