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

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

news 文章来源：https://blog.csdn.net/Argonaut_/article/details/129120076 2025/5/24 19:27:26

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

【5G RRC】5G系统消息SIB2介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…...

编程日记 2023/5/7 23:25:57

自托管提醒平台Noted Reminders

什么是 Noted Reminders ? Noted 是一个简单的自托管应用程序&#xff0c;用于创建使用 Apprise API 推送到设备的提醒。您可以向几乎每个平台发送消息&#xff0c;包括定时电子邮件&#xff01; 什么是 Apprise API &#xff1f; Apprise 允许您向我们今天可用的几乎所有最流…...

编程日记 2023/4/29 12:52:34

LockSupport常用方法源码分析

前言&#xff1a;本文将介绍LockSupport类中的方法和部分源码&#xff0c;以及面试常问到的一个小问题&#xff0c;感兴趣的大佬可以指点下。 希望能够加深自己的印象以及帮助到其他的小伙伴儿们&#x1f609;&#x1f609;。 如果文章有什么需要改进的地方还请大佬不吝赐教&am…...

编程日记 2023/5/8 11:05:35

Mybatis Notes

文章目录1 Mybatis 介绍1.1 快速入门2 JDBC2.1 JDBC介绍2.3 JDBC问题分析2.4 Mybatis与JDBC技术对比3 数据库连接池3.1 数据库连接池介绍3.2 数据库连接池产品产品3.3 Druid引入项目4lombok4.1 lombok介绍4.2 lombok使用4.2.1 在pom.xml文件中引入依赖4.2.2 pojo类代码引入1 My…...

编程日记 2023/5/8 17:43:11

MySQL 10：MySQL事务

MySQL 中的事务是由存储引擎实现的。在 MySQL 中&#xff0c;只有 InnoDB 存储引擎支持事务。事务处理可用于维护数据库的完整性&#xff0c;确保批处理的 SQL 语句要么执行要么根本不执行。事务用于管理 DDL、DML 和 DCL 操作&#xff0c;例如插入、更新和删除语句&#xff0c…...

编程日记 2023/5/9 15:51:34

软件设计（十三）-原码、反码、补码、移码

软件设计&#xff08;十二&#xff09;数据结构(下)https://blog.csdn.net/ke1ying/article/details/129035300 下面把一个数转成二进制表达形式 原码&#xff1a; 数值1 &#xff1a; 0000 0001 数值-1 &#xff1a; 1000 0001 1 (- 1) &#xff1a; 1000 0010 这是8个…...

编程日记 2023/5/4 13:23:55

5.4 BGP地址聚合

5.3.1配置BGP地址聚合 1. 实验目的 熟悉BGP地址聚合的应用场景掌握BGP地址聚合的配置方法2. 实验拓扑 实验拓扑如图5-4所示： 图5-4：配置BGP地址聚合 3. 实验步骤 （1）配置IP地址 R1的配置 <Huawe…...

编程日记 2023/5/9 10:31:18

华为OD机试 - 数列还原（Python） | 机试题算法思路 【2023】

最近更新的博客 华为OD机试 - 自动曝光（Python） | 机试题算法思路 【2023】 华为OD机试 - 双十一（Python） | 机试题算法思路 【2023】 华为OD机试 - 删除最少字符（Python） | 机试题算法思路 【2023-02】 华为OD机试 - Excel 单元格数值统计（Python） | 机试题算法思路 …...

编程日记 2023/5/7 22:52:39

华为OD机试题 - 新工号系统（JavaScript）| 代码+思路+重要知识点

最近更新的博客 华为OD机试题 - 字符串加密（JavaScript） 华为OD机试题 - 字母消消乐（JavaScript） 华为OD机试题 - 字母计数（JavaScript） 华为OD机试题 - 整数分解（JavaScript） 华为OD机试题 - 单词反转（JavaScript） 使用说明 参加华为od机试，一定要注意不要完全背…...

编程日记 2023/5/9 15:52:34

Java-算法竞赛中常用的Java API之大数类

Java-算法竞赛中常用的Java API之大数类摘要BigInteger和BigDecimal创建赋值加法减法乘法除法*取余*求最大公因数求最值*(a^b)%mod比较大小*进制转化类型转化BigDecimal精度问题保留n位小数摘要 java中的基础数据类型能存储的最大的二进制数是 2 ^ 63 - 1, 对应的十进制数是92…...

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