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

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

news 2025/9/19 2:46:53

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

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/9/18 14:25:46

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...

编程新知 2025/9/7 0:12:53

剑指offer20_链表中环的入口节点

链表中环的入口节点给定一个链表，若其中包含环，则输出环的入口节点。若其中不包含环，则输出null。数据范围节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。节点 val 值各不相同。链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/8/22 22:30:54

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/8/25 21:03:32

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/7/25 23:24:13

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/9/16 6:14:35

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/9/7 8:51:17