认识Vue

最新推荐文章于 2024-08-23 13:45:37 发布

IT小崽子

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量88

点赞数 1

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52129860/article/details/129319593

版权

Vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

认识Vue

1.实验介绍

知识点

Vue 与其他框架的对比及特点
安装 Vue 的方法
node 的安装
vue-cli 的安装
Vue 开发者工具的安装
Vue 创建实例
Vue 数据的双向绑定及响应式

官网

中文：https://cn.vuejs.org/
英文：https://vuejs.org/

2.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 是一个推陈出新的前端框架，吸收了很多前端框架的优点。例如，Vue 借鉴了 React 的组件化和虚拟 DOM ，借鉴了 Angular 的模块化和数据绑定。因此，我们以 Vue.js 作为入手，以后深入学习其他框架，你会发现他们的共通之处，更好地高效地学习。

选择 Vue.js 的更多原因是，就框架的 API 而言，对比之下，Vue 更加轻便简洁。Vue 自身拥有开箱即用的生态开发包（Vuex、Vue-Router）等，复杂性低、学习成本低，是一门比较好入门的前端框架。

如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的选择，推荐进入实验楼前端基础知识课程。假入你已掌握了关于 HTML、CSS 和 JavaScript 的中级知识，那让我们进入 Vue 的学习吧!

3.安装

CDN 引入
不用下载到本地，即引即用，学习推荐使用这种模式：

推荐 2 个较稳定的 cdn，以下任选其一

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

由于非会员用户无法访问外网，所以统一使用引用链接为 https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js。

脚手架工具

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 i -g @vue/cli-init

在这里插入图片描述
3、命令行输入 vue，出现 Usage 表示安装成功。

4、使用 vue create 命令来创建一个 Vue 项目。

vue create first-vue # 这里的 first-vue 项目名

在这里插入图片描述

5、完成配置后，使用以下命令将 Vue 项目运行起来。

cd first-vue
npm run serve

在这里插入图片描述
6、成功执行命令行后，我们打开http://localhost:8080，即可访问项目的页面。

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 应用。

更多安装方式
其他安装方式请参考：官网教程

4.使用

创建第一个实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var app = new Vue({
  // 选项
});

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，我们新建一个 .html 后缀的文件，输入以下代码，运行（右击文件 > open with > Preview 或 Mini Browser），你就会看到 {{msg}} 被渲染成 hello。

使用以下命令获取 vue.js 文件。

wget https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js

在 html 文件中写入以下代码。

<!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>
    <!--引入 vue.js-->
    <script src="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（计算属性）等，后面我们会学习到。

5.理解 Vue 的 MVVM 模式

在这里插入图片描述

M：Model 即数据逻辑处理。

V：View 即视图（用户界面）。

VM：ViewModel 即数据视图，用于监听更新，View 与 Model 数据的双向绑定。

所以，Vue 一大特点就是数据双向绑定，另一大特点就是响应式，接下来，我们来看看它的魅力。

6.数据双向绑定

在 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>
    <!--引入 vue.js-->
    <script src="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 的值，你将看到上例相应地更新，更改数据也触发视图的相应更新。
在这里插入图片描述

7.实验总结

我们学习了以下内容：

Vue 与其他框架的对比及特点
安装 Vue 的方法
node 的安装
vue-cli 的安装
Vue 开发者工具的安装
Vue 创建实例
Vue 数据的双向绑定及响应式

本节内容让我们掌握了 vue 的基础安装，以及怎么样去实例化第一个 vue 应用，需要自己亲手去写代码，初步感受一下 vue 的神奇之处。

IT小崽子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
认识Vue

知识点Vue 与其他框架的对比及特点安装 Vue 的方法node 的安装vue-cli 的安装Vue 开发者工具的安装Vue 创建实例Vue 数据的双向绑定及响应式官网Vue 与其他框架的对比及特点安装 Vue 的方法node 的安装vue-cli 的安装Vue 开发者工具的安装Vue 创建实例Vue 数据的双向绑定及响应式。
复制链接

扫一扫