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

什么是VUE 创建第一个VUE实例

news 2026/2/7 14:40:32

一、什么是Vue

概念：Vue (读音 /vjuː/，类似于 view) 是一套 构建用户界面 的 渐进式 框架

Vue2官网：Vue.js

1.什么是构建用户界面

基于数据渲染出用户可以看到的界面

2.什么是渐进式

所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

Vue的两种开发方式：
  1. Vue核心包开发
    场景：局部模块改造
  2. Vue核心包&Vue插件&工程化
    场景：整站开发

3.什么是框架

所谓框架：就是一套完整的解决方案

举个栗子

如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。

我们只需要在“毛坯房”的基础上，增加功能代码即可。

提到框架，不得不提一下库

  • 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
  • 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

下图是 库 和 框架的对比。

框架的特点：有一套必须让开发者遵守的规则或者约束

咱们学框架就是学习的这些规则 官网

二、创建第一个VUE实例 

我们已经知道了Vue框架可以 基于数据帮助我们渲染出用户界面，那应该怎么做呢？

比如就上面这个数据，基于提供好的msg 怎么渲染后右侧可展示的数据呢？

核心步骤（4步）：

  1. 准备容器
  2. 引包（官网） — 开发版本/生产版本
  3. 创建Vue实例  new Vue()
  4. 指定配置项，渲染数据
    1. el:指定挂载点
    2. data提供数据
<body><!-- 创建Vue实例，初始化渲染1. 准备容器 (Vue所管理的范围)2. 引包 (开发版本包 / 生产版本包) 官网3. 创建实例4. 添加配置项 => 完成渲染
--><!-- 不是Vue管理的范围 --><div class="box2">box2 -- {{ count }}</div><div class="box">box -- {{ msg }}</div>-----------------------------------------------------<!-- Vue所管理的范围 --><div id="app"><!-- 这里将来会编写一些用于渲染的代码逻辑 --><h1>{{ msg }}</h1><a href="#">{{ count }}</a></div><!-- 引入的是开发版本包 - 包含完整的注释和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数const app = new Vue({// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子el: "#app",// 通过 data 提供数据data: {msg: "Hello 娜娜",count: 666,},});</script></body>

运行结果如下： box2和box不是Vue管理的容器，所以不能够拿到数据进行渲染

 

相关文章：

什么是VUE 创建第一个VUE实例

一、什么是Vue 概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套 构建用户界面 的 渐进式 框架 Vue2官网&#xff1a;Vue.js 1.什么是构建用户界面 基于数据渲染出用户可以看到的界面 2.什么是渐进式 所谓渐进式就是循序渐进&#xff0c;不一定非得把Vu…...

编程日记 2024/1/22 0:00:51

进程间协同：从进程启动、同步与互斥到进程间通信

进程间协同的目的 在操作系统中&#xff0c;进程是计算机进行任务分配和调度的基本单位。在计算机系统中&#xff0c;有很多任务是无法由单个进程独立完成的&#xff0c;需要多个进程共同参与并协作完成。这就像在现实生活中&#xff0c;有些工作需要一个团队来完成&#xff0…...

编程日记 2024/1/21 23:58:50

【驱动】TI AM437x(内核调试-06)：网卡（PHY和MAC）、七层OSI

1、网络基础知识 1.1 七层OSI 第一层：物理层。 1）需求： 两个电脑之间如何进行通信？ 具体就是一台发比特流，另一台能够收到。于是就有了物理层：主要是定义设备标准，如网线的额接口类型、管线的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流，就是从1/0…...

编程日记 2024/1/21 23:57:49

Java基础面试题 Object

Java基础面试题 Object 文章目录 Java基础面试题 ObjectObjectObject 类的常见方法有哪些&#xff1f; 和 equals() 的区别hashCode() 有什么用&#xff1f;为什么要有 hashCode&#xff1f;为什么重写 equals() 时必须重写 hashCode() 方法&#xff1f; 文章来自Java Guide 用…...

编程日记 2024/1/21 23:55:47

5G_射频测试_接收机测量（五）

7.2 Reference sensitivity level 接收灵敏度是表示接收机能解析出信号的最小功率&#xff08;和接收机noise figure相关所以RX lineup的大部分工作就是在调整Gain达到最佳NF&#xff09;The throughput shall be ≥ 95%&#xff08;BER&#xff1a;bit error rate 并不是L3ca…...

编程日记 2024/1/21 23:53:45

ESP32-HTTP_webServer库(Arduino)

ESP32-HTTP 介绍 ESP32是一款功能强大的微控制器&#xff0c;具有丰富的网络和通信功能。其中之一就是支持HTTP协议&#xff0c;这使得ESP32可以用于创建Web服务器。 HTTP是什么&#xff1f; HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;&#xff0c;即超文本传…...

编程日记 2024/1/21 23:51:38

无法找到mfc100.dll的解决方法分享，如何快速修复mfc100.dll文件

在日常使用电脑时&#xff0c;我们可能会碰到一些系统错误提示&#xff0c;比如“无法找到mfc100.dll”的信息。这种错误通常会阻碍代码的执行或某些应用程序的启动。为了帮助您解决这一问题&#xff0c;本文将深入探讨其成因&#xff0c;并提供几种不同的mfc100.dll解决方案。…...

编程日记 2024/1/21 23:50:37

[VulnHub靶机渗透]：billu_b0x 快速通关

🍬 博主介绍👨‍🎓 博主介绍：大家好，我是 hacker-routing ，很高兴认识大家~ ✨主攻领域：【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏 == 养成习惯（一键三连）😋 🎉欢迎关注💗一起学习👍一起讨论⭐️一起进步…...

编程日记 2024/1/21 23:48:35

Docker安装开源Blog（Typecho）

前言 首先这个镜像是centos7.9进行安装PHP环境&#xff0c;然后挂载目录去运行的&#xff0c;镜像大概300MB左右&#xff0c;没学过PHP&#xff0c;没办法给Dockerfile文件 参考文章&#xff1a;Docker安装Typecho | D-y Blog感知不强&#xff0c;图一乐https://www.wlul.top…...

编程日记 2024/1/21 23:47:34

【Qt-license】误操作qt下载导致只能安装商业版试用十天，无法安装社区版

背景&#xff1a; 原本是为了学习qml&#xff0c;需要下载一个design studio&#xff0c;而这个需要比较新版的安装程序&#xff0c;但新版的安装程序官方都是online安装。于是从官网找下载链接。毕竟是英文的&#xff0c;又心急&#xff0c;误打误撞中我选择了商业版试用。 其…...

编程日记 2024/1/21 23:44:32

数据操作——缺失值处理

缺失值处理 缺失值的处理思路 如果想探究如何处理无效值, 首先要知道无效值从哪来, 从而分析可能产生的无效值有哪些类型, 在分别去看如何处理无效值 什么是缺失值 一个值本身的含义是这个值不存在则称之为缺失值, 也就是说这个值本身代表着缺失, 或者这个值本身无意义, 比如…...

编程日记 2024/1/21 23:43:31

【刷题笔记4】

动态规划题目汇总 斐波那契数列&#xff1a;1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8&#xff0c;13…… 递归一把解决三类问题&#xff1a;1.数据定义是按照递归的&#xff08;斐波那契数列&#xff09;。2.问题解法是按递归算法实现的。 3.数据…...

编程日记 2024/1/21 23:40:27

cuda二进制文件中到底有些什么

大家好。今天我们来讨论一下&#xff0c;相比gcc编译器编译的二进制elf文件&#xff0c;包含有 cuda kernel 的源文件编译出来的 elf 文件有什么不同呢&#xff1f; 之前研究过一点 tvm。从 BYOC 的框架中可以得知&#xff0c;前端将模型 partition 成 host 和 accel(accel 表…...

编程日记 2024/1/21 23:38:26

怎么从视频中提取动图？一个方法快速提取gif

视频以连续的方式播放一系列图像帧&#xff0c;通过每秒播放的帧数&#xff08;帧率&#xff09;来创做&#xff0c;由于GIF动图则以循环播放一系列静态图像帧的方式展现动画效果。由于视频的优势在于流畅的动画、丰富的细节和长时间播放&#xff0c;因此常用于电影、电视节目、…...

编程日记 2024/1/21 23:37:24

String字符串的比较和hash函数减少哈希冲突

1.为什么比较字符串通过hash值比通过字符串本身效率更高 比较两个字符串的哈希值相对于比较两个字符串本身的效率更高&#xff0c;原因如下&#xff1a; 哈希函数具有快速计算的特性&#xff1a;哈希函数可以将一个字符串转换为一个固定长度的哈希值。这个转换过程通常是非常…...

编程日记 2024/1/21 23:36:23

【数据库原理】（38）数据仓库

数据仓库&#xff08;Data Warehouse, DW&#xff09;是为了满足企业决策分析需求而设计的数据环境&#xff0c;它与传统数据库有明显的不同。 一.数据库仓库概述 定义: 数据仓库是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合&#xff0c;用于支持企业管理和…...

编程日记 2024/1/21 23:35:22

C++17新特性（四）已有标准库的拓展和修改

这一部分介绍C17对已有标准库组件的拓展和修改。 1. 类型特征拓展 1.1 类型特征后缀_v 自从C17起&#xff0c;对所有返回值的类型特征使用后缀_v&#xff0c;例如&#xff1a; std::is_const_v<T>; // C17 std::is_const<T>::value; // C11这适用于所有返回值的…...

编程日记 2024/1/21 23:32:17

软件是什么？前端，后端，数据库

软件是什么&#xff1f; 由于很多东西没有实际接触&#xff0c;很难理解&#xff0c;对于软件的定义也是各种各样。但是我还是不理解&#xff0c;软件开发中的前端&#xff0c;后端&#xff0c;数据库到底有什么关系呢&#xff01; 这个问题足足困扰了三年半&#xff0c;练习时…...

编程日记 2024/1/21 23:29:15

Vue3+ElementUI 多选框中复选框和名字点击方法效果分离

现在的需求为 比如我点击了Option A &#xff0c;触发点击Option A的方法&#xff0c;并且复选框不会取消勾选&#xff0c;分离的方法。 <el-checkbox-group v-model"mapWork.model_checkArray.value"> <div class"naipTypeDom" v-for"item …...

编程日记 2024/1/21 23:28:14

设计模式篇章（4）——十一种行为型模式

这个设计模式主要思考的是如何分配对象的职责和将对象之间相互协作完成单个对象无法完成的任务&#xff0c;这个与结构型模式有点像&#xff0c;结构型可以理解为静态的组合&#xff0c;例如将不同的组件拼起来成为一个更大的组件&#xff1b;而行为型更是一种动态或者具有某个…...

编程日记 2024/1/21 23:24:10

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/1/26 19:01:00

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14