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

Vue 如何快速上手

news 2026/3/29 20:16:26

目录

1. Vue 是什么 （概念）

1.1. Vue 的两种使用方式

1.2. 优点

1.3. 缺点

2. 创建 Vue 实例，初始化渲染

2.1. 步骤（核心步骤 4步）

2.2. 练习——创建一个Vue实例

3. 插值表达式 {{  }}

3.1. 介绍

3.2. 作用

3.3. 语法

3.4. 注意点

3.5. 练习——插值表达式

 4. Vue 响应式特性

4.1. 数据的响应式处理

4.2. 如何访问或者修改data中的数据, 最终会被添加到实例上

4.3. 练习——如何访问或者修改data中的数据

 

1. Vue 是什么 （概念）

  • Vue 是一个用于① 构建用户界面 的 ②渐进式 ③框架

①构建用户界面：基于数据动态渲染出用户看到的页面

 

②渐进式：循序渐进的学习

③框架：一套完整的项目解决方案

1.1. Vue 的两种使用方式

① Vue 核心包开发

  • 场景：局部 模块改造

② Vue 核心包 与 Vue 插件 工程化开发

  • 场景：整站 开发

1.2. 优点

  • 大大提升开发效率 (70%↑)

1.3. 缺点

  • 需要理解记忆规则 → 官网

 

2. 创建 Vue 实例，初始化渲染

2.1. 步骤（核心步骤 4步）

  • 准备容器

Vue所管理的范围

  • 引包 (官网) - 开发版本 / 生产版本

开发版本：<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

注：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

  • 创建 Vue 实例 new Vue()

一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数

  • 指定配置项 → 渲染数据

配置项介绍：

① el 指定挂载点 ——> 通过 el 配置选择器，指定 Vue 管理的是哪个盒子

② data ——> 提供数据

2.2. 练习——创建一个Vue实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><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 Vue2',count: 666}})</script></body>
</html>

 

3. 插值表达式 {{  }}

3.1. 介绍

  • 插值表达式是一种 Vue 的模板语法

3.2. 作用

  • 利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

3.3. 语法

  • {{ 表达式 }}

3.4. 注意点

  • 使用的数据必须存在 （data）

  • 支持的是表达式，而非语句，比如：if for ...

  • 不能在标签属性中使用 {{ }} 插值

3.5. 练习——插值表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 插值表达式：Vue的一种模板语法作用：利用 表达式 进行插值渲染语法：{{ 表达式 }}注意点：1. 使用的数据要存在2. 支持的是表达式，不是语句  if  for3. 不能在标签属性中使用 {{ }}-->
<div id="app"><p>{{ name }}</p><p>{{ name.toUpperCase() }}</p><p>{{ name + '你好' }}</p><p>{{ age >= 18 ? '成年' : '未成年' }}</p><p>{{ friend.name }}</p><p>{{ friend.descript }}</p><!-- ----------------------- --><!-- <p>{{ hobby }}</p> --><!-- <p>{{ if }}</p> --><!-- <p title="{{ nickname }}">我是p标签</p> -->
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {name: 'tom',age: 18,friend: {name: 'jack',descript: '热爱学习 Vue'}}})
</script></body>
</html>

 

 4. Vue 响应式特性

4.1. 数据的响应式处理

  • 响应式：数据变化，视图自动更新

聚焦于数据 → 数据驱动视图

使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

4.2. 如何访问或者修改data中的数据, 最终会被添加到实例上

  • 访问数据： "实例.属性名"

  • 修改数据： "实例.属性名" = "值"

4.3. 练习——如何访问或者修改data中的数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{ msg }}</h1><a href="#">{{ count }}</a>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 响应式数据 → 数据变化了，视图自动更新msg: '你好,Vue2',count: 666}})// data中的数据，是会被添加到实例上// 1. 访问数据  实例.属性名console.log(app.msg)console.log(app.count)// 2. 修改数据  实例.属性名 = 新值app.msg = '你好，前端'
</script>
</body>
</html>

相关文章：

Vue 如何快速上手

目录 1. Vue 是什么 &#xff08;概念&#xff09; 1.1. Vue 的两种使用方式 1.2. 优点 1.3. 缺点 2. 创建 Vue 实例&#xff0c;初始化渲染 2.1. 步骤&#xff08;核心步骤 4步&#xff09; 2.2. 练习——创建一个Vue实例 3. 插值表达式 {{ }} 3.1. 介绍 3.2. 作用…...

编程日记 2024/4/5 7:42:08

Vue3：组件间通信-provide和inject实现祖先组件与后代组件间直接通信

一、情景说明 我们学习了很多的组件间通信 这里在学习一种&#xff0c;祖先组件与后代组件间通信的技术 这里的后代&#xff0c;可以是多层继承关系&#xff0c;子组件&#xff0c;子子组件&#xff0c;子子子组件等等。 在祖先组件中通过provide配置向后代组件提供数据在后代…...

编程日记 2024/4/5 7:41:07

微信小程序——小程序和页面生命周期详解

小程序的生命周期 小程序的生命周期主要分为以下几个阶段&#xff1a; 创建&#xff08;onLoad&#xff09;&#xff1a; 当小程序启动时&#xff0c;或者从其他页面跳转到当前页面时&#xff0c;会触发 onLoad 生命周期函数。 这个阶段通常用于初始化页面数据&#xff0c;从服…...

编程日记 2024/4/5 7:40:05

android studio中添加module依赖

android常用的三种依赖 库依赖&#xff08;Library dependency&#xff09;&#xff1a;以访问网址的形式将依赖库相应版本下载到本地; 文件依赖&#xff08;File dependency&#xff09;&#xff1a; 将下载下来的依赖库以.jar文件的形式添加依赖. module依赖&#xff08;Modu…...

编程日记 2024/4/5 7:39:04

【.NET全栈】.NET全栈学习路线

一、微软官方C#学习 https://learn.microsoft.com/zh-cn/dotnet/csharp/tour-of-csharp/ C#中的数据类型 二、2021 ASP.NET Core 开发者路线图 GitHub地址&#xff1a;https://github.com/MoienTajik/AspNetCore-Developer-Roadmap/blob/master/ReadMe.zh-Hans.md 三、路线…...

编程日记 2024/4/5 7:38:03

代码随想录阅读笔记-二叉树【二叉搜索树中的搜索】

题目 给定二叉搜索树&#xff08;BST&#xff09;的根节点和一个值。 你需要在BST中找到节点值等于给定值的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 NULL。 例如&#xff0c; 在上述示例中&#xff0c;如果要找的值是 5&#xff0c;但因为没有节点…...

编程日记 2024/4/5 7:37:02

1、初识drf

drf的学习需要学习者有django基本使用知识。 文章目录 什么是drf&#xff0c;有什么作用CBV是什么初步使用drf 下载以及django创建项目django最小启动内容修改setting修改 url 编写drf视图编辑url测试返回结果 什么是drf&#xff0c;有什么作用 drf(django rest-framework),让…...

编程日记 2024/4/5 7:30:57

速盾：cdn高防御服务器租用有哪些好处

随着互联网的发展&#xff0c;网络安全问题日益突出。攻击者利用各种手段不断对网站进行攻击&#xff0c;给网站的安全运行带来威胁。为了保障网站的正常运行和数据的安全&#xff0c;越来越多的网站开始租用CDN高防御服务器。那么&#xff0c;租用CDN高防御服务器有哪些好处呢…...

编程日记 2024/4/5 7:27:53

【跟小嘉学 Linux 系统架构与开发】四、文件和目录的权限

系列文章目录 【跟小嘉学 Linux 系统架构与开发】一、学习环境的准备与Linux系统介绍 【跟小嘉学 Linux 系统架构与开发】二、Linux发型版介绍与基础常用命令介绍 【跟小嘉学 Linux 系统架构与开发】三、如何查看帮助文档 【跟小嘉学 Linux 系统架构与开发】四、文件和目录的权…...

编程日记 2024/4/5 7:24:50

ubuntu18.04图形界面卡死，鼠标键盘失灵， 通过MAC共享网络给Ubuntu解决！

ubuntu18.04图形界面卡死&#xff0c;鼠标键盘失灵&#xff0c; 通过MAC共享网络给Ubuntu解决&#xff01; 1. 尝试从卡死的图形界面切换到命令行界面2. 进入bios和grub页面3. 更改Grub中的设置&#xff0c;以进入命令行4. 在命令行页面解决图形界面卡死的问题5. Mac共享WI-FI网…...

编程日记 2024/4/5 7:23:49

ESG认证（ESG=环境、社会和治理 Environmental, Social, and Governance）

什么是ESG认证 ESG认证是指根据企业在环境、社会和治理&#xff08;Environmental, Social, and Governance&#xff09;方面的表现而设立的一种评价或评级体系。 环境&#xff08;Environmental&#xff09;&#xff1a;这一维度关注企业如何管理其对环境的影响&#xff0c;包…...

编程日记 2024/4/5 7:22:48

Cesium Viewer 类学习

Viewer提供了创建和控制3D场景所需的所有基本功能&#xff0c;包括加载3D模型、添加图像覆盖物、设置相机位置和方向、处理用户输入等。 构造函数&#xff1a; new Cesium.Viewer(container, options) 是用来创建一个新的 Cesium 视图器&#xff08;Viewer&#xff09;实例的…...

编程日记 2024/4/5 7:20:46

第十四届省赛大学B组（C/C++）子串简写

原题链接&#xff1a;子串简写 程序猿圈子里正在流行一种很新的简写方法&#xff1a; 对于一个字符串&#xff0c;只保留首尾字符&#xff0c;将首尾字符之间的所有字符用这部分的长度代替。 例如 internationalization 简写成 i18n&#xff0c;Kubernetes 简写成 K8s&#…...

编程日记 2024/4/5 7:13:38

深入浅出 -- 系统架构之微服务架构

1.1 微服务的架构特征&#xff1a; 单一职责&#xff1a;微服务拆分粒度更小&#xff0c;每一个服务都对应唯一的业务能力&#xff0c;做到单一职责 自治&#xff1a;团队独立、技术独立、数据独立&#xff0c;独立部署和交付 面向服务&#xff1a;服务提供统一标准的接口&…...

编程日记 2024/4/5 7:10:36

YoloV8改进策略：下采样改进|自研下采样模块（独家改进）|疯狂涨点|附结构图

摘要 本文介绍我自研的下采样模块。本次改进的下采样模块是一种通用的改进方法，你可以用分类任务的主干网络中，也可以用在分割和超分的任务中。已经有粉丝用来改进ConvNext模型，取得了非常好的效果，配合一些其他的改进，发一篇CVPR、ECCV之类的顶会完全没有问题。 本次我…...

编程日记 2024/4/5 7:09:35

Python从0到100（十）：Python集合介绍及运用

一、集合定义 定义&#xff1a; 由不同元素组成的集合&#xff0c;集合是一组无序排列 可hash值&#xff0c;可作为字典的key。 特性&#xff1a; 集合的目的是将不同的值存放在一起&#xff0c;不同的集合间用来做关系运算&#xff0c;无须纠结于集合中的单个值。 &#xff0…...

编程日记 2024/4/5 7:08:33

实用技巧：如何取消app的截屏禁用

因为我想要在小鹅通App做笔记，但是被小鹅通App禁用截屏了，这真是一个很糟糕的使用体验，虽然可能是为了保护商家权益…… 方法1 可以让商家设置课程可以截屏 方法2 手机root，安装Xposed框架，利用Xposed框架上面的插件我们可以对手机进行高度定制化，而安装Xposed框架的…...

编程日记 2024/4/5 7:07:32

【氮化镓】GaN SP-HEMT的栅极可靠性

概括总结&#xff1a; 本文研究了氮化镓&#xff08;GaN&#xff09;肖特基型p-栅高电子迁移率晶体管&#xff08;GaN SP-HEMT&#xff09;的栅极鲁棒性和可靠性&#xff0c;通过一种新的电路方法评估了在实际转换器中栅极电压&#xff08;VGS&#xff09;过冲波形的栅极电压应…...

编程日记 2024/4/5 7:03:28

Linux基础和进阶用法

Linux是一个广泛使用的开源操作系统&#xff0c;下面是一些Linux基础用法的详细介绍&#xff1a;文件和目录操作&#xff1a;ls&#xff1a;列出文件和目录的详细信息&#xff0c;包括权限、所有者、大小等。cd&#xff1a;切换到指定目录。使用cd ~返回用户主目录&#xff0c;…...

编程日记 2024/4/5 7:02:27

Linux运维-SHELL编程之正则表达式与流编辑处理器

Linux运维-SHELL编程之正则表达式与流编辑处理器 什么是正则表达式 正则表达式是一种用来描述字符序列的强大工具&#xff0c;通常用于字符串的匹配、搜索和替换操作。它由普通字符&#xff08;例如字母、数字&#xff09;和特殊字符&#xff08;称为元字符&#xff09;组成&…...

编程日记 2024/4/5 7:01:26

STM32F407定时器TIMER进阶：从PWM生成到输入捕获的实战应用

1. STM32F407定时器基础回顾与进阶方向 在开始深入探讨PWM生成和输入捕获之前&#xff0c;我们先快速回顾一下STM32F407定时器的基本特性。这款芯片内置了多达14个定时器&#xff0c;分为高级控制定时器、通用定时器和基本定时器三大类。其中通用定时器(TIM2-TIM5, TIM9-TIM14)…...

编程新知 2026/3/29 19:47:44

PyRadiomics环境配置全攻略：从依赖冲突到稳定运行的系统化解法

PyRadiomics环境配置全攻略&#xff1a;从依赖冲突到稳定运行的系统化解法 【免费下载链接】pyradiomics Open-source python package for the extraction of Radiomics features from 2D and 3D images and binary masks. Support: https://discourse.slicer.org/c/community/…...

编程新知 2026/3/29 19:21:36

别再死记硬背了！用5分钟搞懂NPN和PNP三极管的电流流向（附快速判断技巧）

5分钟掌握NPN与PNP三极管的电流奥秘&#xff1a;从生活场景到实战技巧 记得第一次拆解收音机时&#xff0c;那些黑色的小方块上延伸出的金属腿让我一头雾水——它们看起来平平无奇&#xff0c;却能控制电流的放大与开关。直到导师用浇花的水管作比喻&#xff0c;三极管的秘密才…...

编程新知 2026/3/29 19:19:36

AI-Agent元年来了！2026年全面爆发，掌握Agent工程化思维，从0到1打造爆款智能体！

前言 如果说[2025年是AI-Agent元年]&#xff0c;那么2026年无疑是AI-Agent全面爆发的一年。无论是近期引发全民热潮的“养虾”智能体[OpenClaw&#xff0c;还是渗透进各行各业、解决实际工作问题的智能助手&#xff0c;它们都属于AI-Agent的生动实践。从这些案例中不难看出&…...

编程新知 2026/3/29 18:47:30

Modbus转EtherCAT网关开发秘笈：用AX58100实现120个命令自动映射（Web配置全图解）

Modbus转EtherCAT网关开发实战&#xff1a;AX58100零代码配置与工业部署全指南 工业自动化领域正经历着从传统串行通信向实时以太网协议的转型浪潮。作为这场变革的核心枢纽&#xff0c;协议转换网关的性能直接决定了整个系统的响应速度和稳定性。本文将深入探讨如何利用AX5810…...

编程新知 2026/3/29 18:43:30

Element Plus表格滚动卡顿？试试这个Vue3封装方案，性能提升明显

Vue3Element Plus表格性能优化实战&#xff1a;平滑滚动与内存管理 Element Plus的el-table组件在企业级后台系统中广泛应用&#xff0c;但当数据量达到500行以上时&#xff0c;滚动卡顿、内存飙升的问题开始显现。本文将分享一套经过生产环境验证的优化方案&#xff0c;通过数…...

编程新知 2026/3/29 16:36:27

基于uniapp的SUPOIN PDA激光扫码广播监听功能实现与优化

1. 为什么选择SUPOIN PDA激光扫码方案 在工业级移动应用中&#xff0c;扫码功能可以说是刚需中的刚需。我做过不少仓库管理、物流配送的项目&#xff0c;深刻体会到扫码速度差个0.5秒&#xff0c;工人一天下来就能多处理上百件货物。SUPOIN PDA设备自带的激光扫码模块&#xf…...

编程新知 2026/3/29 15:58:12

特斯拉行车记录仪视频合并神器：告别碎片化，一键生成完整记录

特斯拉行车记录仪视频合并神器&#xff1a;告别碎片化&#xff0c;一键生成完整记录 【免费下载链接】tesla_dashcam Convert Tesla dash cam movie files into one movie 项目地址: https://gitcode.com/gh_mirrors/te/tesla_dashcam 还在为特斯拉行车记录仪生成的海量…...

编程新知 2026/3/29 14:45:41

Qwen3-VL-8B医疗效果实测：CT报告截图→关键指标提取→通俗化解读

Qwen3-VL-8B医疗效果实测&#xff1a;CT报告截图→关键指标提取→通俗化解读 1. 引言&#xff1a;当AI医生遇上CT报告 想象一下这个场景&#xff1a;你拿到一份CT检查报告&#xff0c;上面密密麻麻写满了医学术语和数字。你盯着“肺窗示双肺纹理增多、增粗&#xff0c;可见多…...

编程新知 2026/3/29 12:40:14

革命性超分辨率突破：OptiScaler让任何显卡实现4K级画质与帧率双提升

革命性超分辨率突破&#xff1a;OptiScaler让任何显卡实现4K级画质与帧率双提升 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler 在…...

编程新知 2026/3/29 10:47:00