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

Vue基本知识

news 2026/5/24 13:44:23

 一、vue入门

Vue为前端的框架，免除了原生js的DOM操作。简化书写。

基于MVVM的思想，实现数据的双向绑定，使编程的重点放在数据上。

1、引入vue.js文件

2、定义vue核心对象，定义数据模型

3、编写视图

//1、引入vue.js
<script src="vue.js"></script>//2、定义vue核心对象
<script>//定义vue对象new Vue({el:"#app",//vue接管的区域data:{message:"Hello Vue"}})
</script>//定义视图
<!-- 定义视图 --><div id="app"><!-- v-model为绑定数据 --><input type="text" name="" id="" v-model="message">{{message}}</div>

其中{{message}}为插值表达式

形式：{{表达式}} 内容可以为变量、函数调用、三元运算符

 input中v-model为绑定数据，当input输入的值发生变化时，vue对象中的message也随之发生变化从而体现了vue的双向绑定性。

v-model为指令。

二、vue指令

指令：html标签上带有v-的特殊属性

  • v-mind为html标签绑定属性值，如href，css
  • v-model在表单元素上进行双向数据绑定
  • v-on为html标签绑定事件
  • v-if ，v-else-if，v-else条件性的渲染某元素
  • v-for遍历容器
  • v-show通过条件来确定是否展示该元素

1、v-mind

为html标签动态的绑定一个属性值，当vue的数据模型的值发生变化时，其所绑定的属性值也发生变化

	<div id="app"><!-- v-bind动态绑定 --><!-- url的值将会动态的绑定vue对象中的数据模型data --><a v-bind:href="URL">链接1</a><a :href="URL">链接2</a><input type="text" v-model="URL"></div><script>//定义vue对象new Vue({el:"#app",//vue接管的区域data:{URL:"https://www.baidu.com"},})</script>

2、v-model

在表单上进行双向数据绑定

3、v-on

为html标签绑定事件，其数据模型要改为以下形式

	new Vue({el:"#app",//vue接管的区域data:{},methods:{handle:function(){alert("你点了我一下...");}				}})

调用方式：

	<input type="button" name="" id="" value="点击" v-on:click="handle()">

4、v-if v-else-if v-else

当条件为真时渲染标签，若为假则不渲染

5、v-show

根据条件展示某元素，但都进行了渲染，只不过使用display对展示进行了控制

实例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script></head><body>		<!-- 定义视图 --><div id="app">年龄<input type="text" name="" id="" 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" name="" id="" 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><br><br></div></body><script>//定义vue对象new Vue({el:"#app",//vue接管的区域data:{age:20},methods:{}})</script>
</html>

v-if与v-show在展示时的区别：

v-show去对span标签全部进行了渲染，只不过在显示的时候使用display进行控制，值为none不进行显示，而v-if只对条件满足的标签进行渲染。 

6、v-for

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="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: ['北京', '上海', '广州', '深圳', '成都']}})</script>
</html>

 

 案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="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.scorce}}</td><td><span v-if="user.scorce>=85">优秀</span><span v-else-if="user.scorce>=60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>//定义vue对象new Vue({el: "#app", //vue接管的区域data: {users: [{name: "Tom",age: 20,gender: 1,scorce: 78},{name: "Rose",age: 18,gender: 2,scorce: 86},{name: "Jerry",age: 26,gender: 1,scorce: 90},{name: "Tony",age: 30,gender: 1,scorce: 52}]}})</script>
</html>

 三、vue的生命周期

 生命周期：一个对象从创建到销毁的整个过程。

在这里插入图片描述

 mounted：挂载完成，vue初始化成功，html页面渲染成功(发送请求到服务端，加载数据)

相关文章：

Vue基本知识

一、vue入门 Vue为前端的框架&#xff0c;免除了原生js的DOM操作。简化书写。 基于MVVM的思想&#xff0c;实现数据的双向绑定&#xff0c;使编程的重点放在数据上。 1、引入vue.js文件 2、定义vue核心对象&#xff0c;定义数据模型 3、编写视图 //1、引入vue.js <scr…...

编程日记 2023/8/15 21:55:00

item_get_sales-获取商品销量详情

一、接口参数说明&#xff1a; item_get_sales-获取商品销量详情&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_get_sales 名称类型必须描述keyString是调用key&#xff08…...

编程日记 2023/8/15 21:53:59

LangChain手记 Memory

整理并翻译自DeepLearning.AILangChain的官方课程&#xff1a;Memory Memory 使用open ai的API调用GPT都是单次调用&#xff0c;所以模型并不记得之前的对话&#xff0c;多轮对话的实现其实是将前面轮次的对话过程保留&#xff0c;在下次对话时作为输入的message数组的一部分&…...

编程日记 2023/8/15 21:52:58

linux下安装.run后缀名文件

1.文件传输 对于大文件&#xff0c;不能直接拖拽&#xff0c;可以借助工具&#xff0c;例如WinSCP 创建会话时&#xff0c;需要提供虚拟机的主机名&#xff0c;可以采取输入ifconfig的命令&#xff0c;如图所示&#xff1a; ifconfig&#xff08;接口配置&#xff09;命令在 …...

编程日记 2023/8/15 21:51:56

Angular 性能优化实战

Angular 性能优化实战 Angular 是一个非常强大的前端框架&#xff0c;但是如果不注意性能优化&#xff0c;应用程序可能会变得非常慢并增加加载时间。 以下是一些Angular性能优化经验的实战建议&#xff1a; 1. 使用 OnPush 变更检测策略 默认情况下&#xff0c;Angular检查…...

编程日记 2023/8/15 21:50:55

在vue项目使用数据可视化 echarts ，柱状图、折线图、饼状图使用示例详解及属性详解

官网地址&#xff1a;Apache ECharts ​一、下载插件并在页面中引入 npm install echarts --save 页面导入&#xff1a; import * as echarts from echarts 全局导入&#xff1a; main.js 中&#xff0c;导入并注册到全局 import echarts from echarts Vue.prototype.$echart…...

编程日记 2023/8/15 21:49:53

九耶丨阁瑞钛伦特-井字棋html5代码

你想了解关于井字棋&#xff08;Tic-Tac-Toe&#xff09;的HTML代码吗&#xff1f;以下是一个简单的井子棋的HTML代码示例&#xff1a; <!DOCTYPE html> <html> <head><title>Tic-Tac-Toe</title><style>.board {display: flex;flex-wrap…...

编程日记 2023/8/15 21:48:52

Linux服务器上配置HTTP和HTTPS代理

本文将向你分享如何在Linux服务器上配置HTTP和HTTPS代理的方法&#xff0c;解决可能遇到的问题&#xff0c;让你的爬虫项目顺利运行&#xff0c;畅爬互联网&#xff01; 配置HTTP代理的步骤 1. 了解HTTP代理的类型&#xff1a;常见的有正向代理和反向代理两种类型。根据实际需求…...

编程日记 2023/8/15 21:47:51

OpenZFS 2.2 发布 RC3，支持 Linux 6.4

导读之前的 OpenZFS 2.2 候选版本已致力于实现与 Linux 6.4 内核的兼容性&#xff0c;而在 2.2-rc3 中&#xff0c;Linux 6.4 支持的元跟踪器已标记为已完成。 OpenZFS 2.2 发布了第 3 个 RC 版本。 之前的 OpenZFS 2.2 候选版本已致力于实现与 Linux 6.4 内核的兼容性&#x…...

编程日记 2023/8/15 21:46:50

嵌入式 C 语言程序数据基本存储结构

一、5大内存分区 内存分成5个区&#xff0c;它们分别是堆、栈、自由存储区、全局/静态存储区和常量存储区。 1、栈区(stack)&#xff1a;FIFO就是那些由编译器在需要的时候分配&#xff0c;在不需要的时候自动清除的变量的存储区。里面的变量通常是局部变量、函数参数等。 ​…...

编程日记 2023/8/15 21:45:49

记录VS2022离线安装NuGet包的过程

离线安装NuGet包主要分为两个阶段&#xff1a;指定安装源及下载包及其依赖项。本文记录在VS2022中离线安装NuGet包的过程及注意事项。   离线安装NuGet包&#xff0c;主要有两种方式&#xff1a;1&#xff09;搭建局域网或本机NuGet服务器&#xff0c;将VS2022的源指定为NuGe…...

编程日记 2023/8/15 21:44:49

tomcat的多实例和动静分离

目录 多实例 安装tomcat 配置 tomcat 环境变量 修改server.xml文件 修改开关文件&#xff0c;添加环境变量 tomcat1 tomcat2 启动 浏览器访问测试 nginxtomcat实现动静分离 Nginx实现负载均衡的原理 部署nginx的负载器 搭建第三台tomcat 配置多实例服务器 Tomcat…...

编程日记 2023/8/15 21:43:47

点成案例丨比浊仪用于乳酸菌抑菌活性测定

乳酸菌概述 自1929年英国科学家弗莱明发现青霉素以来&#xff0c;抗生素为人类医学的进步做出了巨大贡献。然而&#xff0c;抗生素在临床上广泛且持续的使用导致病原微生物产生了耐药性。目前&#xff0c;病原微生物对抗生素的耐药性正在威胁人们的健康&#xff0c;寻找具有抑…...

编程日记 2023/8/15 21:42:46

总结synchronized

一.synchronized的特性 synchronized 是 Java 语言中内置的关键字&#xff0c;用于实现线程同步&#xff0c;以确保多线程环境下共享资源的安全访问。 互斥性&#xff1a;synchronized保证了同一时刻只有一个线程可以执行被synchronized修饰的代码块或方法。当一个线程进入sync…...

编程日记 2023/8/15 21:41:45

react实现模拟弹框遮罩的自定义hook

需求描述 点击按钮用于检测鼠标是否命中按钮 代码实现 import React from react; import {useState, useEffect, useRef} from react;// 封装一个hook用来检测当前点击事件是否在某个元素之外 function useClickOutSide(ref,cb) {useEffect(()>{const handleClickOutside…...

编程日记 2023/8/15 21:40:44

直接在html中引入Vue.js的cdn来实现一个简单的博客

摘要 其实建立一个博客系统是非常简单的&#xff0c;有很多开源的程序&#xff0c;如果你不喜欢博客系统&#xff0c;也可以自己开发&#xff0c;也可以自己简单做一个。我这次就是用Vue.js和php做后端服务实现一个简单的博客。 界面 代码结构 代码 index.html <!DOCTYP…...

编程日记 2023/8/15 21:39:43

Android Studio瀑布流实现

效果&#xff1a; ImageDetail class package com.example.waterfallflow; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.widget.ImageView;public class ImageDetail extends Activity{Overrideprotected void …...

编程日记 2023/8/15 21:38:42

Java 中的 == 运算符、equals 方法和 hashcode 方法

一、 运算符 是 Java 中的一个运算符&#xff0c;用于比较两个对象&#xff0c;但在比较两个对象的时候需要根据比较类型分情况进行讨论。 1.1 基本数据类型与基本数据类型 基本数据类型之间通过 进行比较的时候&#xff0c;是直接比较它们的大小&#xff0c;而与它们的具体…...

编程日记 2023/8/15 21:37:39

第一个ArkTS项目实践-鸿蒙ArkTS

第一个ArkTS项目实践-ArkTS 第一个ArkTS项目实践-ArkTS自定义组件的组成配置属性与布局配置属性布局 改变组件状态循环渲染列表数据代码ToDoItem组件ToDoList页面 效果参考资料 第一个ArkTS项目实践-ArkTS 本篇文章是官网上视频对ArkTS开发实践的第一个视频&#xff0c;主要是引…...

编程日记 2023/8/15 21:36:38

【数据结构•堆】序列和的前n小元素（堆排序）

题目描述 问题&#xff1a;序列和的前 n n n小元素 给出两个长度为 n n n的有序表 A A A和 B B B, 在A和B中各任取一个, 可以得到 n 2 n^2 n2 个和. 求这些和最小的 n n n个。 输入输出格式 输入格式&#xff1a; 输入数据共三行。 　　第一行&#xff0c;一个整数值 n n …...

编程日记 2023/8/15 21:35:37

iOS设备激活解锁终极指南：Applera1n工具完整使用教程

iOS设备激活解锁终极指南&#xff1a;Applera1n工具完整使用教程 【免费下载链接】applera1n icloud bypass for ios 15-16 项目地址: https://gitcode.com/gh_mirrors/ap/applera1n 还在为二手iOS设备的激活锁问题而烦恼吗&#xff1f;Applera1n是一款专为iOS 15-16系统…...

编程新知 2026/5/24 11:45:58

工业云脑：05 边缘AI：PLC+边缘盒子跑模型

05 边缘AI：PLC+边缘盒子跑模型 数据从传感器冲出来，PLC老大哥管控制，边缘盒子这小年轻直接塞模型上去推理，机器人瞬间变“聪明”——这才是工业云脑觉醒的真最后一公里！ 你想想，以前PLC（可编程逻辑控制器）就是车间里最靠谱的“老黄牛”：梯形图一写，I/O一接，焊枪动…...

编程新知 2026/5/24 10:43:52

别再死记硬背了！用Python手把手拆解卡尔曼滤波的5个核心公式（附filterpy/OpenCV两种实现）

别再死记硬背了&#xff01;用Python手把手拆解卡尔曼滤波的5个核心公式&#xff08;附filterpy/OpenCV两种实现&#xff09;卡尔曼滤波就像一位隐形的数据调酒师&#xff0c;它能将嘈杂的观测数据与不完美的预测模型混合&#xff0c;调制出一杯接近真实状态的"鸡尾酒&quo…...

编程新知 2026/5/24 9:04:57

Windows Cleaner：4步高效解决C盘空间不足的开源终极方案

Windows Cleaner&#xff1a;4步高效解决C盘空间不足的开源终极方案 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款完全免费开源的Windows…...

编程新知 2026/5/24 8:48:15

C166架构下XDATA解决全局变量内存溢出问题

1. 问题现象与背景分析在C166架构的嵌入式开发中&#xff0c;当程序包含大量初始化全局变量时&#xff0c;开发者经常会遇到两个经典错误&#xff1a;*** ERROR 172 IN LINE 9 OF test.c: HDATA0: length exceeded: act172032, max65536 Error 106: Section Overflow Section: …...

编程新知 2026/5/24 7:06:46

构建全球生活便利度指数：多维数据驱动的发展评估框架

1. 项目概述&#xff1a;从数据视角看世界发展作为一名长期和数据打交道的分析师&#xff0c;我常常被问到&#xff1a;如何客观地衡量一个国家或地区的发展水平&#xff1f;是看GDP总量&#xff0c;还是人均收入&#xff1f;是看高楼大厦的数量&#xff0c;还是普通民众的幸福…...

编程新知 2026/5/24 6:47:27

基于CNN的口腔鳞状细胞癌智能检测系统开发

1. 口腔鳞状细胞癌检测的技术挑战与解决方案口腔鳞状细胞癌&#xff08;OCSCC&#xff09;作为头颈部最常见的恶性肿瘤&#xff0c;其早期诊断面临三大技术瓶颈&#xff1a;首先是病灶的隐蔽性&#xff0c;早期病变常表现为微小白色斑块或溃疡&#xff0c;与普通口腔炎症难以区…...

编程新知 2026/5/24 6:43:11

大型语言模型推理加速：Lyanna架构与推测解码优化

1. 大型语言模型推理加速的技术挑战在自然语言处理领域&#xff0c;大型语言模型(LLM)的推理速度一直是制约其实际应用的关键瓶颈。传统自回归解码方式需要逐个生成token&#xff0c;这种序列化特性使得计算资源无法得到充分利用。以LLaMA-2-7B模型为例&#xff0c;在NVIDIA A1…...

编程新知 2026/5/24 5:51:32

HuMAL：用人类注意力指导Transformer，提升NLP模型性能

1. 项目概述&#xff1a;当机器学会“看重点”在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;Transformer模型及其核心的注意力机制&#xff0c;无疑是过去几年里最耀眼的技术突破。无论是BERT在理解上下文时的精准&#xff0c;还是GPT系列在生成文本时的流畅&…...

编程新知 2026/5/24 5:43:18

深度 | 昇腾NPU MoE算子实现：从TopKGating到Expert并行，稀疏激活的硬件适配

引言 MoE&#xff08;Mixture of Experts&#xff0c;混合专家&#xff09;是大模型近年来最重要的架构演进之一。GPT-4、Mixtral-87B、Qwen1.5-MoE——几乎所有宣称"超大规模"的新模型都在用 MoE。核心逻辑很简单&#xff1a;用多个独立的"专家"网络替代…...

编程新知 2026/5/24 1:35:44