当前位置：首页 > news >正文

简单的认识 Vue(vue-cli安装、node安装、开发者工具)

news 2026/4/6 1:20:05

Vue

1、Vue 与其他框架的对比及特点
- 1.1 Vue.js 是什么
- 1.2 作者
- 1.3 作用
- 1.4 Vue 与其他框架的对比
2、安装 Vue 的方法
- 2.1 CDN 引入
- 2.2 脚手架工具
- 2.3 vue 开发者工具安装
3、创建第一个实例
4、理解 Vue 的 MVVM 模式
5、数据双向绑定
- 5.1 感受响应式
实验总结

1、Vue 与其他框架的对比及特点

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

1.1 Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。<信息来源：Vue 官网>

1.2 作者

尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于 Colgate University，后在 Parsons 设计学院获得 Design & Technology 艺术硕士学位，任职于纽约 Google Creative Lab。<信息来源：百度百科>

1.3 作用

Vue.js 框架的作用主要注重动态的构建用户界面，前端工程化和模块化开发。

1.4 Vue 与其他框架的对比

在这里插入图片描述

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

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

2、安装 Vue 的方法

2.1 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。

2.2 脚手架工具

1、vue-cli 是基于 npm 的，所以应该先安装 node 环境，通过 node 官网：http://nodejs.cn/ 下载系统对应的 node 安装程序。

注意： NPM 是随同 Node.js 一起安装的包管理工具。因此当我们安装好 Node.js 的时候，也安装好了 NPM。

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、成功执行命令行后，我们打开右侧的 Web 服务，即可访问项目的页面。

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

3、创建第一个实例

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

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

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><!--引入 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（计算属性）等

4、理解 Vue 的 MVVM 模式

在这里插入图片描述

M：Model 即数据逻辑处理。
V：View 即视图（用户界面）。
VM：ViewModel 即数据视图，用于监听更新，View 与 Model 数据的双向绑定。

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

5、数据双向绑定

在 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 值也随之变化。运行效果：
在这里插入图片描述

5.1 感受响应式

上面我们了解到 Vue 是一个 MVVM 架构的框架，成功创建了一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们可以看看他是不是响应式的，打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.msg 的值，你将看到上例相应地更新，更改数据也触发视图的相应更新。

实验总结

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

简单的认识 Vue(vue-cli安装、node安装、开发者工具)

Vue1、Vue 与其他框架的对比及特点1.1 Vue.js 是什么1.2 作者1.3 作用1.4 Vue 与其他框架的对比2、安装 Vue 的方法2.1 CDN 引入2.2 脚手架工具2.3 vue 开发者工具安装3、创建第一个实例4、理解 Vue 的 MVVM 模式5、数据双向绑定5.1 感受响应式实验总结1、Vue 与其他框架的对比…...

编程日记 2023/5/2 19:14:13

如何写一个 things3 client

Things3[1] 是一款苹果生态内的任务管理软件，是一家德国公司做的，非常好用。我前后尝试了众多任务管理软件，最终选定 things3，以后有机会会写文章介绍我是如何用 things3 来管理我的日常任务。本文主要介绍欧神写的 tli[2] 工具来…...

编程日记 2023/4/15 23:00:17

人工智能原理复习 | 命题逻辑和谓词演算

文章目录一、前言二、命题逻辑三、谓词逻辑CSDN 叶庭云：https://yetingyun.blog.csdn.net/ 一、前言数理逻辑思想的起源：莱布尼茨之梦。古典数理逻辑主要包括两部分：命题逻辑和谓词逻辑，命题逻辑又是谓词逻辑的一种简单情形。逻辑研究的基本内容：语法。语言部分：基…...

编程日记 2023/5/3 20:38:09

前端基础面试题：如何判断对象是否具有某属性？遍历数组的方法有哪些？

一、如何判断对象具有某属性？ 如：let obj{name:zhangsan,age:21} 有以下方法 ( property 为属性名的变量，实际上是key，键名)： 1. property in obj 效果如图： in 运算符 2. Reflect.has(obj, property)…...

编程日记 2023/5/5 22:56:24

Docker入门和安装教程

一、Docker入门简介 Docker 是一个基于GO语言开发的开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的Linux机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会…...

编程日记 2023/5/9 15:50:27

有了java基础，迅速学完Python并做了一份笔记-全套Python，建议收藏

面向过程Python简介Python和Java的解释方式对比Java：源代码 -> 编译成class -> Jvm解释运行Python：源代码 -> Python解释器解释运行我经常和身边的Java开发者开玩笑说：“Java真变态，别的语言都是要么直接编译要么直接解释…...

编程日记 2023/5/9 3:30:14

LeetCode——51. N 皇后

一、题目按照国际象棋的规则，皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题研究的是如何将 n 个皇后放置在 nn 的棋盘上，并且使皇后彼此之间不能相互攻击。给你一个整数 n ，返回所有不同的 n 皇后问题的解决方案…...

编程日记 2023/5/5 10:49:06

jQuery基本操作

学习目标： 会使用基本选择器获取元素会使用层次选择器获取元素会使用属性选择器获取元素会使用过滤选择器获取元素学习内容： 1.回顾jQuery语法结构语法 $(selector).action; 工厂函数$()：将DOM对象转化为jQuery对象。选择器 sele…...

编程日记 2023/5/7 20:47:50

基于蜣螂算法优化Kmeans图像分割-附代码

基于蜣螂优化Kmeans图像分割算法 - 附代码文章目录基于蜣螂优化Kmeans图像分割算法 - 附代码1.Kmeans原理2.基于蜣螂算法的Kmeans聚类3.算法实验结果4.Matlab代码摘要：基于蜣螂优化Kmeans图像分割算法。1.Kmeans原理 K-Means算法是一种无监督分类算法，…...

编程日记 2023/5/10 7:24:00

第二章 Kafka设计原理详解

第二章 Kafka设计原理详解 1、Kafka核心总控制器Controller 在 Kafka 集群中会有一个或者多个 broker，其中有一个 broker 会被选举为控制器（Kafka Controller），它负责管理整个集群中所有分区和副本的状态。当某个分区的 leader…...

编程日记 2023/5/5 15:55:21

《NFL橄榄球》：费城老鹰·橄榄1号位

费城老鹰（英语：Philadelphia Eagles）是美国橄榄球联盟在宾夕法尼亚州费城的一支球队。1933年在国家橄榄球联盟扩编时与匹兹堡钢人和辛辛那提红人一起加入；1943年赛季因二次大战的缘故，和匹兹堡钢人作短暂的合并。在20…...

编程日记 2023/5/5 1:45:00

【人工智能AI】四、NoSQL进阶《NoSQL 企业级基础入门与进阶实战》

帮我写一篇介绍NoSQL的技术文章，文章的标题是《四、NoSQL进阶》，不少于3000字。帮我细化到三级目录，使用markdown格式。这篇文章的目录是： 四、NoSQL 进阶 4.1 NoSQL 高可用 4.2 NoSQL 数据安全 4.3 NoSQL 性能优化 4.4 总结四、…...

编程日记 2023/5/2 5:31:08

本文使用 bitnami 镜像部署 Jenkins 官方文档：https://github.com/bitnami/charts/tree/main/bitnami/jenkins 添加 bitnami 仓库 helm repo add bitnami https://charts.bitnami.com/bitnami自定义 values.yaml storageClass：集群的存储类&#xff…...

编程日记 2023/5/10 7:24:52

【人工智能AI】五、NoSQL 应用实践《NoSQL 企业级基础入门与进阶实战》

帮我写一篇介绍NoSQL的技术文章，文章的标题是《五、NoSQL 应用实践》，不少于3000字。目录需要细化到三级目录，使用markdown格式。这篇文章的大的目录是： 五、NoSQL 应用实践 5.1 NoSQL 实时数据分析 5.2 NoSQL 分布式系统 5.3 NoS…...

编程日记 2023/5/7 6:30:22

Java爬虫系列 - 爬虫补充内容+ElasticSearch展示数据

一，定时任务Cron表达式Component public class TaskTest {Scheduled(cron "0/5 * * * * *") // 从0秒开始，每个五秒执行一次 { 秒分时天月周 }public void test(){System.out.println("定时任务执行了");} }二，网…...

编程日记 2023/4/30 7:55:14

Typora常用快捷键

Typora常用快捷键大全 ctrl1到6：1~6级标题，标题用ctrlH是没用的 ctrlshiftk：随时随地插入代码块，极为方便。 ctrlt：创建表格，也可直接输入|列1|列2|列3|并回车来创建表 ctrlshiftq：能实现添加…...

编程日记 2023/5/5 11:01:05

开学季好用电容笔有哪些？好用实惠的电容笔推荐

随着科学技术的快速发展，ipad的影响力越来越大，而且ipad的用户也越来越多，如果要提高ipad的功能，让ipad更加有趣，那么就需要一款非常适合自己，并且非常实用的电容笔。那么，究竟该选择哪个品牌的…...

编程日记 2023/5/7 22:50:17

C++_复习Recording

文章目录C复习课填空题编程题C复习课试卷说明： 题型： 填空编程题目填空题构造函数无返回类型，与类名同名; 复制构造函数用于创建对象，形实参结合，返回和接收对象。补充： 只有在声明语句中使用一个变…...

编程日记 2023/5/6 12:54:06

【java】Spring Cloud --Spring Cloud 的核心组件

文章目录前言一、Eureka（注册中心）二、Zuul（服务网关）三、 Ribbon（负载均衡）四、Hystrix（熔断保护器）五、 Feign（REST转换器）六、 Config（分布式配…...

编程日记 2023/5/8 22:34:08

【C++】RBTree——红黑树

文章目录一、红黑树的概念二、红黑树的性质三、红黑树节点的定义四、红黑树的插入五、代码实现一、红黑树的概念红黑树，是一种二叉搜索树，但在每个结点上增加一个存储位表示结点的颜色，可以是Red或Black。通过对任何一条从根到叶子的路径上…...

编程日记 2023/4/22 9:09:21

ESP32开发板变身万能协议分析仪

1. ESP32开发板的隐藏潜力：从物联网到万能协议分析仪当大多数人拿到ESP32开发板时，第一反应都是用它来做物联网项目。确实，这款集成了Wi-Fi和蓝牙功能的微控制器在智能家居、远程监控等领域表现出色。但今天我要告诉你的是，ESP32的…...

编程新知 2026/4/6 0:59:28

嵌入式系统引导程序uboot原理与应用详解

1. 为什么嵌入式系统需要uboot1.1 计算机系统启动的基本原理任何计算机系统启动时都需要一个引导程序来完成硬件初始化和操作系统加载的工作。无论是PC机还是嵌入式设备，这个基本原理都是相通的。在PC架构中，这个引导程序叫做BIOS（基本输入输…...

编程新知 2026/4/6 0:55:25

说说 TCP 的三次握手：为什么是三次而不是两次或四次？

说说 TCP 的三次握手：为什么是三次而不是两次或四次？01. 前言：TCP 连接的“破冰仪式”02. 三次握手的完整流程2.1 流程图2.2 三个报文详解2.3 状态变化追踪03. 为什么需要三次握手？（核心问题）3.1 问题一&am…...

编程新知 2026/4/5 23:58:23

工资条生成器：财务人员的高效办公利器

在企业财务管理工作中，工资条的制作与发放是一项既繁琐又重要的任务。传统的手工制作方式不仅耗时耗力，还容易出现数据错误和格式不统一的问题。工资条生成器的出现，为财务人员带来了全新的解决方案。这款软件专门针对财务工作场景设计…...

编程新知 2026/4/5 23:42:14

国产DSP

1. 知识关联图（Mermaid）1.1 中断层级图graph LR A[Input Event<br>(SRIO/DMA/定时器等)] --> B[CIC中断分发控制器] B --> C[核内INTC中断控制器] C --> D[CorePac DSP核心] style B fill:#f0f0ff,stroke:#333 note right of B: &#x1…...

编程新知 2026/4/5 23:21:39