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

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

news 2026/4/6 3:02:39

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>

1
说明： 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] 是一款苹果生态内的任务管理软件&#xff0c;是一家德国公司做的&#xff0c;非常好用。我前后尝试了众多任务管理软件&#xff0c;最终选定 things3&#xff0c;以后有机会会写文章介绍我是如何用 things3 来管理我的日常任务。本文主要介绍欧神写的 tli[2] 工具来…...

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

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

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

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

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

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

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

Docker入门和安装教程

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

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

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

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

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

LeetCode——51. N 皇后

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

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

jQuery基本操作

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

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

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

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

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

第二章 Kafka设计原理详解

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

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

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

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

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

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

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

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

K8S 部署 Jenkins

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

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

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

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

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

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

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

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

Typora常用快捷键

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

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

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

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

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

C++_复习Recording

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

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

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

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

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

【C++】RBTree——红黑树

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

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

OpenClaw自动化周报：Qwen3.5-9B-AWQ-4bit整合截图生成工作总结

OpenClaw自动化周报&#xff1a;Qwen3.5-9B-AWQ-4bit整合截图生成工作总结 1. 为什么需要自动化周报 每周五下午&#xff0c;我的电脑屏幕总会同时开着十几个窗口&#xff1a;项目管理系统截图、代码提交记录、会议纪要文档、临时笔记文件……把这些碎片信息整理成结构化周报…...

编程新知 2026/4/6 1:31:48

2026届最火的AI论文助手推荐榜单

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 要想切实有效地把文本的AIGC检测概率给降低下去&#xff0c;就得从词汇多样性、句式结构以及…...

编程新知 2026/4/5 22:05:55

PX4开发实战：uORB通信机制详解与代码实操（附避坑指南）

PX4开发实战&#xff1a;uORB通信机制详解与代码实操&#xff08;附避坑指南&#xff09; 在PX4飞控开发中&#xff0c;uORB&#xff08;Micro Object Request Broker&#xff09;作为核心通信机制&#xff0c;承担着模块间数据交换的重要职责。不同于传统嵌入式系统中的全局变…...

编程新知 2026/4/5 20:18:18

水下图像增强，水下增强，失真矫正，矫正复原含讲解复现，含代码注释，程序一看就懂。

水下图像增强&#xff0c;水下增强&#xff0c;失真矫正&#xff0c;矫正复原 含讲解复现&#xff0c;含代码注释&#xff0c;程序一看就懂。...

编程新知 2026/4/5 20:03:37

样本收集的致命误区：为什么你的AI模型“一上产线就拉胯”？

很多工程师在收集TVA训练集时&#xff0c;喜欢从良品堆里挑50个&#xff0c;再从废品筐里挑50个&#xff0c;觉得凑够100个样本就能让AI“快速学习”了。结果一上线&#xff0c;只要背景稍微有点灰尘&#xff0c;或者螺母有点偏转角度&#xff0c;系统就疯狂误报。这就是典型的…...

编程新知 2026/4/5 19:39:19

2026最权威的六大降AI率平台推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 当前&#xff0c;人工智能技术已然渗透到学术写作领域之中&#xff0c;借助AI辅助来撰写毕业…...

编程新知 2026/4/5 19:15:00

2026届毕业生推荐的AI辅助写作网站实际效果

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 身为智能写作辅助工具的DeepSeek&#xff0c;于学术论文创作里呈现出明显效能&#xff0c;用…...

编程新知 2026/4/5 18:38:26

Pytorch自动微分模块：从原理到实战，解锁反向传播核心奥秘

Pytorch自动微分模块&#xff1a;从原理到实战&#xff0c;解锁反向传播核心奥秘一、核心认知&#xff1a;自动微分&#xff0c;深度学习的求导"神器"1.1 自动微分的核心价值1.2 核心公式&#xff1a;参数更新的底层逻辑&#xff08;1&#xff09;权重更新公式&#…...

编程新知 2026/4/5 18:36:26

**光计算驱动下的编程新范式：用Python探索光子芯片加速的AI推理**在传统电子计算面临物理极限

光计算驱动下的编程新范式&#xff1a;用Python探索光子芯片加速的AI推理 在传统电子计算面临物理极限的今天&#xff0c;**光计算&#xff08;Photonic Computing&#xff09;**正从实验室走向产业化落地。它利用光子替代电子进行信息传输和处理&#xff0c;具备超低功耗、超…...

编程新知 2026/4/5 17:39:36

5步激活群晖设备AI人脸识别功能

5步激活群晖设备AI人脸识别功能 【免费下载链接】Synology_Photos_Face_Patch Synology Photos Facial Recognition Patch 项目地址: https://gitcode.com/gh_mirrors/sy/Synology_Photos_Face_Patch 一、诊断被锁定的AI能力 许多群晖用户在使用Synology Photos时会遇到…...

编程新知 2026/4/5 16:53:02