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

Vue前端+快速入门【详解】

news 2026/2/9 15:01:27

1.Vue概述

2. 快速入门

3. Vue指令

4.表格信息案例

5. 生命周期

1.Vue概述

1.MVVM思想

原始HTML+CSS+JavaScript开发存在的问题：操作麻烦，耦合性强

为了实现html标签与数据的解耦，前端开发中提供了MVVM思想：即Model-View-ViewModel：

Model: 数据模型，指要展示到页面上的数据。在web开发中通常从服务端获取到数据，再把这些数据展示出来
View: 视图，用于展示数据的各种html标签
ViewModel: 视图模型控制中心，负责把Model数据显示到View里，也负责从View里收集数据到Model里。Vue框架就承担了这个角色

2.Vue框架简介

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架，它实现了MVVM思想

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

框架即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

2. 快速入门

1.开发步骤：

1.编写html页面，引入vue框架的js类库

2.在html页面里，使用Vue 把"hello 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>Vue-快速入门</title></head>
<body><div id="app"><!-- 使用插值表达式，把数据区域里message的数据插入进来 -->{{message}}</div>
</body>
<script src="js/vue.js"></script>    
<script>//定义Vue对象new Vue({//vue接管id为app的标签区域el: "#app", //数据区域，就是MVVM里的Modeldata:{message: "Hello Vue"},//方法区域，Vue里用到的所有方法都要写到这里，否则调用不到methods:{}})
</script>
</html>

3. Vue指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同功能作用。

1.v-bind和v-model：

v-bind使用示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-bind</title>
</head>
<body><div id="app"><!-- v-bind：用于把数据区域里的数据，绑定到 html标签的属性上语法：完整写法：  v-bind:属性名="数据名"简单写法：        :属性名="数据名"单向绑定：数据区域 ===> 页面视图(标签的属性上)--><a v-bind:href="siteUrl">{{siteTitle}}</a> <br><a :href="siteUrl">{{siteTitle}}</a></div><script src="./js/vue.js"></script><script>new Vue({el: "#app",data: {siteUrl: "http://www.baidu.com",siteTitle: "百度"},methods:{}});</script>
</body>
</html>

v-model使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-model</title>
</head>
<body><div id="app"><!-- v-model：用于实现 数据区域 和 页面上表单项的 双向绑定。注意：仅适用于表单项，input, select, textarea语法： v-model="数据名称"效果：数据区域 ==> 页面表单项上： 数据区域里的数据变化，页面表单项上会随之变化页面表单项上 ==> 数据区域： 在页面上输入了表单项的数据，数据区域也会随之变化-->帐号：<input type="text" v-model="username"> <br>性别：<input type="radio" name="gender" value="male" v-model="sex">男<input type="radio" name="gender" value="female" v-model="sex">女  <br>数据区域里值：{{username}} , {{sex}}</div><script src="./js/vue.js"></script><script>new Vue({el: "#app",data: {username: "tom",sex: "male"},methods:{}});</script>
</body>
</html>

2. v-on

v-on: 用来给html标签绑定事件。

完整写法：v-on:事件名="函数名(实参列表)"

简写形式：@事件名="函数名(实参列表)"

注意事项：

v-on语法给标签的事件绑定的函数，必须在Vue的方法区域中

v-on语法绑定事件时，事件名不写on。例如：onclick=""在vue里写成v-on:click=""

<!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>Vue-指令-v-on</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><input type="button" value="点我一下" v-on:click="handle()"><input type="button" value="点我一下" @click="handle()"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {handle: function(){alert("你点我了一下...");}}})
</script>
</html>

3.v-if和v-show

<!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>Vue-指令-v-if与v-show</title><script src="js/vue.js"></script>
</head>
<body><div id="app">年龄<input type="text" v-model="age">经判定,为:<span v-if="age <= 35">年轻人(35及以下)</span><span v-else-if="age > 35 && age < 60">中年人(35-60)</span><span v-else>老年人(60及以上)</span><br><br>年龄<input type="text" v-model="age">经判定,为:<span v-show="age <= 35">年轻人(35及以下)</span><span v-show="age > 35 && age < 60">中年人(35-60)</span><span v-show="age >= 60">老年人(60及以上)</span></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{age: 20},methods: {}})
</script>
</html>

4.v-for

v-for: 从名字我们就能看出，这个指令是用来遍历的。注意：需要循环哪个标签，v-for 指令就写在哪个标签上。

完整语法：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
                
                 {{索引变量 + 1}} {{变量名}}
                </标签>

简写形式：

                <标签 v-for="变量名 in 集合模型数据">
                {{变量名}}
                </标签>

<!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>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>
</html>

4.表格信息案例

步骤：

使用v-for的带索引方式添加到表格的<tr>标签上
使用{{}}插值表达式展示内容到单元格
使用索引+1来作为编号
使用v-if来判断，改变性别和等级这2列的值

<!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>Vue-指令-案例</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >= 60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>
</html>

5. 生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

编写mounted声明周期的钩子函数，与methods同级

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>

Vue前端+快速入门【详解】

目录 1.Vue概述 2. 快速入门 3. Vue指令 4.表格信息案例 5. 生命周期 1.Vue概述 1.MVVM思想原始HTMLCSSJavaScript开发存在的问题：操作麻烦，耦合性强为了实现html标签与数据的解耦，前端开发中提供了MVVM思想：即Model-Vi…...

编程日记 2024/3/6 5:52:19

day06_菜单管理(查询菜单,添加菜单,添加子菜单,修改菜单,删除菜单,角色分配菜单,查询菜单,保存菜单,动态菜单)

文章目录 1 菜单管理1.1 表结构介绍1.2 查询菜单1.2.1 需求说明1.2.2 页面制作1.2.3 后端接口SysMenuSysMenuControllerSysMenuServiceMenuHelperSysMenuMapperSysMenuMapper.xml 1.2.4 前端对接sysMenu.jssysMenu.vue 1.3 添加菜单1.3.1 需求说明1.3.3 页面制作1.3.3 后端接口…...

编程日记 2024/3/6 5:51:18

探究与以太坊智能合约的交互

# 概述智能合约是部署在区块链上的一串代代码，通常我们与智能合约的打交道可以通过前端的Dapp，etherscan，metamask 等方式。作为开发人员可以通过调用提供的相关包来与之交互，如web3.js，ether.js , web3.j(java 语言…...

编程日记 2024/3/6 5:50:17

Windows如何安装docker-desktop

下载 docker-desktop设置环境安装wsl可能遇到的错误下载 docker-desktop 下载官网：https://www.docker.com/products/docker-desktop/ 设置环境如果没有Hyper-V选项的,按照以下步骤添加一个文件Hyper-V.bat 添加以下内容,并双击运行后重启电脑 pushd "%~…...

编程日记 2024/3/6 5:48:15

芯片设计后端遇到的各种文件类型和文件后缀

芯片设计后端遇到的各种文件类型和文件后缀文件类型描述文件后缀 netlist网表文件 verilog文件格式，记录了芯片里各个instance的逻辑连接关系 .v (for Verilog netlists) Lib，liberty timing file 记录了cell的timing信息及一定power信息。有的…...

编程日记 2024/3/6 5:47:14

【Web】Java反序列化之CC7链——Hashtable

目录链子原理分析(借尸还魂) 如何构造相等hash 又谈为何lazyMap2.remove("yy") 不过真的需要两个LazyMap吗 EXP 双LazyMap exp HashMap&LazyMap exp 链子原理分析(借尸还魂) 先看Hashtable#readObject origlength和elements分别是原始数组的长度和元素…...

编程日记 2024/3/6 5:44:11

NumPy数据处理详解的笔记2

NumPy数据处理详解的笔记2 第1章NumPy基础 NumPy是用于处理多维数组的数值运算库，不仅可用于机器学习，还可以用于图像处理，语言处理等任务。 1.2 多维数据结构ndarray的基础在学习NumPy的过程中，只要理解了ndarray的相关知识…...

编程日记 2024/3/6 5:40:08

xsslabs第四关

测试 "onclick"alert(1) 这与第三关的代码是一样的，但是每一关考的点是不一样的所以我们看一下源代码 <!DOCTYPE html><html> <head> <meta http-equiv"content-type" content"text/html;ch…...

编程日记 2024/3/6 5:36:04

Qt下使用modbus-c库实现PLC线圈/保持寄存器的读写

系列文章目录提示：这里是该系列文章的所有文章的目录第一章：Qt下使用ModbusTcp通信协议进行PLC线圈/保持寄存器的读写（32位有符号数） 第二章：Qt下使用modbus-c库实现PLC线圈/保持寄存器的读写文章目录系列文章目录…...

编程日记 2024/3/6 5:34:03

C++ 滑动窗口

例1 209. 长度最小的子数组 ①窗口大小不固定 ②求最小长度 -> ret INT_MAX ③数组内的值都大于0， 符合单调性（sum nums[right] -> sum增大） while里面符合条件，在里面更改ret 参考代码 class Solution { public:i…...

编程日记 2024/3/6 5:33:02

【深度学习】TensorFlow基础介绍

TensorFlow 模型张量、变量共同点：具有形状、类型、值等3个属性。不同点：变量可被TensorFlow的自动求导机制求导，常被用于机器学习模型的参数。 tfrecord tensorflow定义的数据格式，一种二进制文件格式，用于保存…...

编程日记 2024/3/6 5:32:01

springcloud：3.3测试重试机制

服务提供者【test-provider8001】 Openfeign远程调用服务提供者搭建文章地址http://t.csdnimg.cn/06iz8 相关接口测试远程调用：http://localhost:8001/payment/index 服务消费者【test-consumer-resilience4j8004】 Openfeign远程调用消费者搭建文章地址http:/…...

编程日记 2024/3/6 5:30:59

【笔记】【电子科大离散数学】 3.谓词逻辑

谓词引入因为含变量的语句（例如x > 3）不是命题，无法进行逻辑推理。为了研究简单命题句子内部的逻辑关系，我们需要对简单命题进行分解，利用个体词，谓词和量词来描述它们，并研究个体与总体…...

编程日记 2024/3/6 5:27:56

倍增算法C++

倍增倍增算法是一种优化算法，通常用于某些需要高效计算指数幂的场景。它基于分治的思想，通过反复求平方来实现快速计算指数幂的目的。在实际应用中，倍增算法经常用于解决最近公共祖先问题、二分查找等。 1、快速幂详解 ksm核心代码倍增就是…...

编程日记 2024/3/6 5:26:55

uniapp制作--进步器的选择

介绍： 进步器的选择,一般用于商城购物选择物品数量的场景注意：该输入框只能输入大于或等于0的整数效果展示： 代码展示： 以下是一个简单的购物车页面示例，包括选择商品和显示数量的功能： 在这个示例中…...

编程日记 2024/3/6 5:25:53

前端高频面试--查缺补漏篇

什么是进程和线程，有什么区别进程：进程是程序的一次执行过程，是动态的过程，有自身产生、存在、消亡的过程。线程：线程由进程创建，是进程的一个实体。一个进程可以拥有多个线程。举个例子：…...

编程日记 2024/3/6 5:24:53

【计算机学习】-- 网页视频加速

系列文章目录文章目录系列文章目录前言一、开发者选项二、定义和用法1.基础语法：2.什么是uncaught TypeError:Cannot read properties of null? 二、开发者工具面板：1.Elements面板：2.Console面板： 总结前言一、开发者选项 …...

编程日记 2024/3/6 5:21:50

系统运维-Linux配置C、C++、Go语言编译环境

C yum install gcc -y #安装gcc编译器 gcc --version #验证环境gcc (GCC) 11.3.1 20221121 (Red Hat 11.3.1-4) Copyright (C) 2021 Free Software Foundation, Inc. This is free software; see the source for copying conditions. There is NO warranty; not even f…...

编程日记 2024/3/6 5:15:42

【设计模式】（二）设计模式六大设计原则

一、设计原则概述设计模式中主要有六大设计原则，简称为SOLID ，是由于各个原则的首字母简称合并的来(两个L算一个,solid 稳定的)，六大设计原则分别如下： 1、单一职责原则（Single Responsibitity Principle&#…...

编程日记 2024/3/6 5:12:40

go-zero官网

go-zero 是一个集成了各种工程实践的 web 和 rpc 框架。通过弹性设计保障了大并发服务端的稳定性，经受了充分的实战检验。 go-zero官网：go-zero 缩短从需求到上线的距离...

编程日记 2024/3/6 5:10:38

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

idea大量爆红问题解决

问题描述在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决就是如上所展示的问题，但是程序依然可以启动。问题解决…...

编程新知 2026/2/8 6:37:38

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...

编程新知 2026/2/5 3:41:42

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

html-＜abbr＞缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。示例&#x…...

编程新知 2026/1/24 19:22:03

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录一、SQL注入二、字符型SQL注入三、字符型注入与数字型注入四、源码分析五、渗透实战 1、渗透准备 2、SQL注入探测 （1）输入单引号 （2）万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2026/2/5 5:47:53

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述给定一个整型数组，请从该数组中选择3个元素组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。输入描述行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。输出描述由3个元素组成…...

编程新知 2025/9/21 23:43:15

【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验

2024年初，人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目（一款融合大型语言模型能力的云端AI编程IDE）时，技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力，TRAE在WayToAGI等…...

编程新知 2026/1/31 20:18:53

1.Vue概述

2. 快速入门

3. Vue指令

4.表格信息案例

5. 生命周期

相关文章：