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

【Vue框架】基础语法练习（1）

news 2025/8/31 8:15:36

其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习

https://cn.vuejs.org/

说明：目前最新是Vue3版本的，但是Vue2已经深得人心，所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API，而Vue2是选项式API。还有就是目前并没有使用npm、pnpm、yarn等构建工具创建Vue，而是使用全局构建版的 Vue

<script src="https://unpkg.com/vue@3"></script>

其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习

1、基本用法

2、内容渲染

2.1 组合式

2.2 选项式

3、响应式

3.1 组合式

3.2 选项式

4、计算属性

5、属性绑定

6、JS表达式

7、条件渲染

8、事件绑定

9、列表渲染

10、双向绑定

11、双向绑定案例

1、基本用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app">{{msg}}<h1>{{web.title}}</h1><h1>{{web.url}}</h1></div>
</body>
<script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}=Vue  //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const web=Vue.reactive({   //创建一个响应式的数据对象web，里面包含title和url两个属性title:"HNUCM",url:"www.hnucm.edu.cn"})//返回数据return{msg:"success",web}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script><script>//什么是解构：从一个数组或者对戏那个中把值提取出来赋给新的变量//数组解构const number=[1,2,3]const [one,two,three]=numberconsole.log(one,two,three)//对象解构const person={name:"fanhuling",age:20}const {name,age}=personconsole.log(name,age)//函数参数解构function introduce({name,age}){console.log(`My name is ${name},I am ${age} years old`)}introduce(person)</script></html>

2、内容渲染

2.1 组合式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><!-- 文本插值表达式 --><p>{{username}}</p><p>{{age}}</p><p>{{desc}}</p><!-- v-html指令 ：显示HTML内容 --><p v-html="desc"></p></div>
</body><script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}=Vue  //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const username="fanhuiling"const age=20const desc='<a href ="www.baidu.com">百度一下</a>'//返回数据return{username,age,desc}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script></html>

2.2 选项式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><!-- 文本插值表达式 --><p>{{username}}</p><p>{{age}}</p><p>{{desc}}</p><!-- v-html指令 ：显示HTML内容 --><p v-html="desc"></p></div>
</body>
<script>const vm={data:function(){return{username:"fanhuiling",age:20,desc:'<a href="www.baidu.com">百度一下</a>'}}}const app=Vue.createApp(vm)app.mount('#app')
</script></html>

3、响应式

3.1 组合式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><button @click="incretement">增加</button><p>{{count}}</p><p>{{state.counter}}</p></div>
</body>
<script>const {createApp,reactive,ref}=Vue//ref  适用于基本类型（字符串、数字、布尔值）//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const count=ref(0)const state=ref({counter:0})//将ref 改为reactive后，counter会和count一起增加//箭头函数const incretement = ()=>{count.value++;state.counter++;}return{count,incretement,state}}}).mount('#app')//将Vue 应用程序挂载到app元素上</script></html>

3.2 选项式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><button onclick="incretement">增加</button><p>{{count}}</p></div>
</body>
<script>const vm={data:function(){//const count=Vue.ref(0)return{count:1}  },methods: {incretement(){this.count++;} }}const app=Vue.createApp(vm)app.mount('#app')
</script></html>

4、计算属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><h1>{{add()}}</h1><h1>{{add()}}</h1><h1>{{sum}}</h1><h1>{{sum}}</h1></div>
</body>
<script>const {createApp,reactive,ref,computed}=Vue//ref  适用于基本类型（字符串、数字、布尔值）//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const data = reactive({x:10,y:20})//无缓存的方法const add=()=>{console.log("add")return data.x+data.y;}//有缓存的方法//计算属性：根据依赖响应式数据变化来决定是否重新计算const sum=computed(()=>{console.log("sum")return data.x+data.y})return {data,add,sum}}}).mount('#app')//将Vue 应用程序挂载到app元素上</script></html>

5、属性绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><div :style="{width:h,height:h,backgroundColor:bgc}"></div></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const w=ref('500px');const h=ref('500px');const bgc=ref('red');// 返回数据return {w,h,bgc}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

6、JS表达式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>{{number+1}}</p><p>{{ok ?'True':'False'}}</p><!-- 翻转字符串：先以，分割为数组，数组翻转，然后在结合 --><p>{{msg.split('').reverse().join('')}}</p> <p :id="'list-'+id"></p><p>{{user.name}}</p></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const number=0;const ok=ref(true);const msg="ABC"const id=3const user={name:"fanhuiling"}return {number,ok,msg,id,user}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

7、条件渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><button @click="flag=!flag">开关</button><!-- v-if 当为false时，会从真实dom删除 --><p v-if="flag">请求成功，被v-if控制</p> <p v-show="flag">请求成功，被v-show控制</p><p v-if= "type === A">类型A</p><p v-else-if="type === B">类型B</p><p v-else>不是A和B</p></div>
</body><script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive,ref}=Vue  //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const flag=ref(true)const type=ref("C")return{flag,type}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script></html>

8、事件绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>count的值为：{{count}}</p><button v-on:click="addCount">+1</button><button @click="addCount">+1</button></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const count=ref(0)const addCount=()=>{count.value++;}// 返回数据return {count,addCount}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

9、列表渲染

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><!-- 添加数据 --><input type="text" v-model="name"/><button @click="addUser"> 添加</button><ul><li v-for="user in userlist">姓名：{{user.name}}</li><li v-for="user,index  in userlist" :key="user.id"><input type="checkbox"/>索引：{{index}}姓名：{{user.name}}</li></ul></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const userlist=reactive([{id:1,name:"Tom"},{id:2,name:"Jerry"},{id:3,name:"mary"}])const nextId=ref(4)const name=ref('')const addUser=()=>{userlist.unshift({id:nextId.value,name:name.value})name.value="";nextId.value++;}// 返回数据return {userlist,nextId,name,addUser}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

10、双向绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--  导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><input v-model="msg" placeholder="输入文本"/><p>{{msg}}</p></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const msg=ref(测试)// 返回数据return {msg}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

11、双向绑定案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><h3>文本框：{{data.text}}</h3><h3>单选框：{{data.radio}}</h3><h3>复选框：{{data.checkbox}}</h3><h3>下拉框：{{data.select}}</h3><h3>记住密码：{{data.remember}}</h3><!-- 单向数据绑定时，数据发生变化视图会自动更新，但是手动修改input的值，数据不会自动更新 -->单向数据绑定：<input type="text" :value="data.text"/><br><!-- 双向数据绑定，当数据发生变化时，视图会自动更新，手动修改input的值，数据也会自更新 -->双向数据绑定：<input type="text" v-model="data.text"/><br><br><br><input type="radio" v-model="data.radio" value="1">听音乐<input type="radio" v-model="data.radio" value="2">写代码<br><br><input type="checkbox" v-model="data.checkbox" value="a">听音乐<input type="checkbox" v-model="data.checkbox" value="b">写代码<input type="checkbox" v-model="data.checkbox" value="c">刷B站<br><br><select v-model="select"><option value="" >请选择</option><option value="A" >听音乐</option><option value="B" >写代码</option><option value="C" >刷B站</option></select><br><br><input type="checkbox" v-model="data.remember">记住密码</div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const data=reactive({text:'fanhuiling' ,//文本框radio:"",checkbox:[],select:"",remember:false //单个复选框--功能是记住密码})// 返回数据return {data}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

【Vue框架】基础语法练习（1）

其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习 https://cn.vuejs.org/ 说明：目前最新是Vue3版本的，但是Vue2已经深得人心，所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API&#xf…...

编程日记 2024/10/30 21:33:05

开源一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码

大家好，我是一颗甜苞谷，今天分享一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码。前言在当前的物流仓储行业，企业面临着信息化升级的迫切需求，但往往受限于高昂的软件采购和维护成本。现有的…...

编程日记 2024/10/30 21:32:04

开源一套基于若依的wms仓库管理系统，支持lodop和网页打印入库单、出库单的源码

大家好，我是一颗甜苞谷，今天分享一款基于若依的wms仓库管理系统，支持lodop和网页打印入库单、出库单的源码。前言在当今快速发展的商业环境中，库存管理对于企业来说至关重要。然而，许多企业仍然依赖于传统的、手动…...

编程日记 2024/10/30 21:31:02

HTML+JavaScript案例分享：打造经典俄罗斯方块，详解实现全过程

在本文中，我们将深入探讨如何使用 JavaScript 实现经典的俄罗斯方块游戏。俄罗斯方块是一款广为人知的益智游戏，通过操纵各种形状的方块，使其在游戏区域内排列整齐，以消除完整的行来获得分数。效果图如下：一、游戏界面与布局我们首先使用 HTML 和 CSS 来创建游戏的界面…...

编程日记 2024/10/30 21:26:54

【网页布局技术】项目五使用CSS设置导航栏

《CSSDIV网页样式与布局案例教程》徐琴目录任务一制作简单纵向导航栏支撑知识点1．合理利用display:block属性2．利用margin-bottom设置间隔效果3．利用border设置特殊边框任务二制作简单横向导航栏任务三制作带图片效果的横向导航栏任务…...

编程日记 2024/10/30 21:24:52

自学网络安全，网络安全入门学习路线，收藏这篇就够了

在当今高度数字化的时代，网络安全已经成为了一个至关重要的领域。随着网络威胁的不断演变和增长，对于专业网络安全人才的需求也在急剧上升。对于那些对网络安全充满热情并且渴望自学成才的人来说，制定一个系统、全面且高效的学习路线和规划是…...

编程日记 2024/10/30 21:23:51

React Query已过时？新一代请求工具横空出世

大家好！今天我想和你们聊聊一个让我兴奋不已的话题 —— 分页列表请求策略。你们知道吗？这个策略真的帮了我大忙！它不仅让我的代码更简洁，还大大提升了用户体验。说实话，每次用到这个功能，我都忍不住赞叹。…...

编程日记 2024/10/30 21:22:50

视频怎么进行格式转换？6款视频转换MP4格式的免费软件！

在数字时代，视频格式的多样性为我们提供了丰富的观看和编辑选择，但同时也带来了格式不兼容的困扰：MOV、AVI、WMV、MKV……这些格式多多少少都会遇到因不兼容而无法播放或下载分享的场景。当你想要将视频文件从一种格式转换为另一种格式&#…...

编程日记 2024/10/30 21:21:45

智能文档处理平台：免费体验智能化医疗信息提取

前提：医疗行业信息碎片化问题普遍，手工数据录入效率低且易错，导致数据管理难度大。本系统可帮助医疗机构在信息管理上迈向智能化，优化流程并提升效率。系统概述： 思通数科推出的智能文档处理系统，专为解…...

编程日记 2024/10/30 21:19:43

Java 中 InputStream 的使用：try-with-resources 与传统方式的比较

在 Java 中，处理输入输出流时，确保资源的正确管理至关重要。特别是 InputStream 这样的流，一旦使用完成，必须正确关闭以释放资源。本文将对两种常见的资源管理方式进行比较：try-with-resources 语句和传统的 try-catch…...

编程日记 2024/10/30 21:18:42

【MATLAB源码-第271期】基于matlab的雷达发射回波模拟，包括匹配滤波，加窗旁瓣控制，以及MTD处理。

操作环境： MATLAB 2022a 1、算法描述雷达系统是一种广泛应用于目标探测和跟踪的技术，其核心在于发射电磁波并分析返回信号。本文将探讨雷达发射波形、回波信号的模拟、匹配滤波的过程、加窗控制旁瓣的策略以及慢时间MTD处理的整体系统框架。一、雷…...

编程日记 2024/10/30 21:17:40

Linux系统编程——信号量

一、信号量的定义和原理 1、概念原子操作：不可中断的一个或者一系列的操作，即一件事要么做要么不做。临界资源：不同进程能够看到的一份公共资源，一次只能被一个进程使用。PV操作：由于信号量只能进行两种操作等待和发…...

编程日记 2024/10/30 21:16:36

Oracle索引问题汇总

一、oracle 数据库TIMESTAMP 时间字段，设置索引后，通过该字段进行排序，索引排序不生效问题 1. 记录下在工作中遇到的一次索引问题问题描述： 数据库：oracle； 日志记录表中的一个创建时间（create…...

编程日记 2024/10/30 21:15:35

基于QT用工厂模式实现串口通信与网络通信激光器的控制

配置文件网络配置：ＩＰ＋Ｐｏｒｔ串口配置：端口号＋波特率首先，我们需要创建一个配置文件 config.ini，内容如下： [SerialLaser] portName = COM1 baudRate = 9600[NetworkLaser] ipAddress = 192.168.1.1 port = 1234两类激光器的实现： #include <QCoreApplicat…...

编程日记 2024/10/30 21:14:33

【代码随想录Day58】图论Part09

dijkstra（堆优化版）精讲题目链接/文章讲解：代码随想录 import java.util.*;class Edge {int to; // 邻接顶点int val; // 边的权重Edge(int to, int val) {this.to to;this.val val;} }class Pair<U, V> {public final U first; …...

编程日记 2024/10/30 21:12:31

_或者%关键字模糊匹配查出所有数据

1、问题 sql模糊匹配，如果页面输入_或者%，可以查出所有数据。 (1) SELECT * FROM test WHERE sfsc N and zdzwm like %%% (2) SELECT * FROM test WHERE sfsc N and zdzwm like %_% 2、解决方案 （1）mysql数据库加转义字…...

编程日记 2024/10/30 21:11:29

【Python】转换得到图片的rgb565格式数据

使用方法：首先在代码同级目录创建input_images文件夹，然后将需要转换的图片放进去。然后根据你的需要，修改代码最下面的crop_size、resize以及file_name。最后点击运行，即可得到图片的rgb565格式数据 from PIL import Image, I…...

编程日记 2024/10/30 21:10:28

隨筆 20241024 Kafka中的ISR列表：分区副本的族谱

在分布式系统中，数据的一致性和可靠性至关重要。Apache Kafka作为一个强大的流处理平台，利用其分区和副本机制来确保这些特性。在Kafka中，ISR（In-Sync Replicas）列表是一个关键概念，它用来追踪与领导者副本…...

编程日记 2024/10/30 21:08:26

【python】爬虫

下载与批量下载 import requests #第三方库，没有下载的下载一下 pip install requests#爬虫下载图片 resrequests.get("url") print(res.content)#二进制字节流#写文件 with open("beauty.jpg","wb")as f:f.write(res.content)#批量…...

编程日记 2024/10/30 21:07:25

大语言模型数据类型与环境安装(llama3模型)

文章目录前言一、代码获取一、环境安装二、大语言模型数据类型1、基本文本指令数据类型2、数学指令数据类型3、几何图形指令数据类型4、多模态指令数据类型5、翻译指令数据类型三、vscode配置四、相关知识内容1、理解softmax内容2、torch相关函数nn.Embedding函数torch.nn.fun…...

编程日记 2024/10/30 21:06:24

网络编程（Modbus进阶）

思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以高效率、强健性、易实现的特点成为工业控制系统的通信标准。包…...

编程新知 2025/8/30 17:32:05

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程目录 Web 项目 Docker 化部署概述Dockerfile 详解构建阶段生产阶段构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）&#xff1a…...

编程新知 2025/8/12 16:28:43

蓝桥杯 2024 15届国赛 A组儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐题目描述五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。今天是六一儿童节，小蓝老师为了让大家在节…...

编程新知 2025/8/8 10:09:48

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/8/4 15:55:44