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

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

news 2025/11/5 5:57:51

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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/10/22 15:55:37

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/11/1 22:49:39

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/11/3 19:35:48

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/10/30 3:39:37

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/3 19:02:52

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/10/30 3:54:07

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/10/26 17:23:14