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

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

news 2025/9/22 10:05:02

目录

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 集合模型数据">
                    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
                   {{索引变量 + 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开发存在的问题&#xff1a;操作麻烦&#xff0c;耦合性强 为了实现html标签与数据的解耦&#xff0c;前端开发中提供了MVVM思想&#xff1a;即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

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

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

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

Windows如何安装docker-desktop

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

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

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

芯片设计后端遇到的各种文件类型和文件后缀 文件类型 描述 文件后缀 netlist网表文件 verilog文件格式&#xff0c;记录了芯片里各个instance的逻辑连接关系 .v (for Verilog netlists) Lib&#xff0c;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是用于处理多维数组的数值运算库&#xff0c;不仅可用于 机器学习&#xff0c;还可以用于图像处理&#xff0c;语言处理等任务。 1.2 多维数据结构ndarray的基础 在学习NumPy的过程中&#xff0c;只要理解了ndarray的相关知识…...

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

xsslabs第四关

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

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

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

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

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

C++ 滑动窗口

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

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

【深度学习】TensorFlow基础介绍

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

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

springcloud：3.3测试重试机制

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

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

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

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

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

倍增算法C++

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

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

uniapp制作--进步器的选择

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

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

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

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

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

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

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

编程日记 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

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

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

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

go-zero官网

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

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

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/9/20 10:29:23

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/8/3 22:02:59

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/8/15 19:59:33

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/9/19 14:44:22

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/8/7 7:06:16

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

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

编程新知 2025/9/18 12:54:00

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51