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

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

news 2026/3/30 9:56:10

一、什么是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

Nunchaku-flux-1-dev在AI编程教学中的应用：代码纠错与优化

Nunchaku-flux-1-dev在AI编程教学中的应用&#xff1a;代码纠错与优化 1. 引言 编程学习过程中&#xff0c;很多初学者都会遇到这样的困境&#xff1a;写出的代码运行报错&#xff0c;却不知道错在哪里&#xff1b;代码虽然能运行&#xff0c;但效率低下、结构混乱&#xff0…...

编程新知 2026/3/30 9:51:57

Android开发者必看：知乎Matisse图片选择器实战教程（附Glide/Picasso配置对比）

Android图片选择器深度实战&#xff1a;Matisse与Glide/Picasso的终极配置指南 每次看到微信那个丝滑的图片选择界面&#xff0c;你是不是也想过在自己的App里实现类似效果&#xff1f;作为知乎开源的明星项目&#xff0c;Matisse确实能帮你快速搭建专业级图片选择功能。但真正…...

编程新知 2026/3/30 6:48:54

Java 25虚拟线程资源隔离配置，深度剖析JEP 477 ScopedValue与CarrierThread绑定机制

第一章&#xff1a;Java 25虚拟线程资源隔离配置概览Java 25正式将虚拟线程&#xff08;Virtual Threads&#xff09;纳入长期支持特性&#xff0c;并强化了其在高并发场景下的资源隔离能力。虚拟线程本身轻量、按需调度&#xff0c;但若缺乏显式资源约束&#xff0c;仍可能因共…...

编程新知 2026/3/30 6:32:51

ANSYS接触分析实战：从法兰连接案例看MPC绑定与标准接触设置技巧

ANSYS接触分析实战&#xff1a;法兰连接中的MPC绑定与标准接触配置全解析 在机械工程领域&#xff0c;法兰连接作为管道系统中最常见的连接方式之一&#xff0c;其可靠性直接影响整个系统的安全运行。传统设计方法往往依赖经验公式和安全系数&#xff0c;难以准确预测复杂工况下…...

编程新知 2026/3/30 5:56:34

电路分析不再难：手把手教你用拉式变换搞定零输入与零状态响应（附考研真题解析）

电路分析不再难&#xff1a;手把手教你用拉式变换搞定零输入与零状态响应&#xff08;附考研真题解析&#xff09; 在电子工程与自动化领域&#xff0c;电路分析始终是核心技能之一。面对复杂的动态电路&#xff0c;传统时域分析方法常让人望而生畏——微分方程的建立与求解不仅…...

编程新知 2026/3/30 5:36:23

写作压力小了！2026最新AI论文写作工具测评与推荐

2026年真正好用的AI论文写作工具&#xff0c;核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测&#xff0c;千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队&#xff0c;覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 …...

编程新知 2026/3/30 5:16:16

LeetCode 231. Power of Two 题解

LeetCode 231. Power of Two 题解 题目描述 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;n 1 输出&#xff1a;true 解释&#xff1a;2^0 1示例…...

编程新知 2026/3/30 3:49:13

Python内存管理进入“自动驾驶”时代：详解memguard-core插件的AI预测式回收机制，安装仅需3行命令

第一章&#xff1a;Python智能体内存管理策略Python智能体&#xff08;如基于LLM的Agent、ReAct架构或Tool-Calling Agent&#xff09;在运行过程中常面临对象生命周期长、中间状态缓存多、工具调用频繁导致引用残留等问题。其内存管理不能仅依赖CPython默认的引用计数与循环垃…...

编程新知 2026/3/30 3:41:05

C# DateTime.ParseExact实战：如何避免日期字符串转换中的常见坑（附完整代码示例）

C# DateTime.ParseExact实战&#xff1a;如何避免日期字符串转换中的常见坑&#xff08;附完整代码示例&#xff09; 在数据处理和用户交互场景中&#xff0c;日期字符串的精确解析是每个C#开发者必须掌握的技能。想象一下这样的场景&#xff1a;你的应用程序需要处理来自不同地…...

编程新知 2026/3/30 3:32:53

智能预处理预览功能详解：Anything to RealCharacters 2.5D引擎稳定性保障机制

智能预处理预览功能详解&#xff1a;Anything to RealCharacters 2.5D引擎稳定性保障机制 1. 项目概述 Anything to RealCharacters 2.5D转真人引擎是一款专为RTX 4090显卡优化的图像转换系统&#xff0c;能够将卡通、二次元、2.5D风格的图像高质量转换为写实真人照片。该系统…...

编程新知 2026/3/30 3:26:51