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

Vue基本知识

news 2025/9/19 9:13:59

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

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

item_get_sales-获取商品销量详情

一、接口参数说明： item_get_sales-获取商品销量详情，点击更多API调试，请移步注册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的官方课程：Memory Memory 使用open ai的API调用GPT都是单次调用，所以模型并不记得之前的对话，多轮对话的实现其实是将前面轮次的对话过程保留，在下次对话时作为输入的message数组的一部分&…...

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

linux下安装.run后缀名文件

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

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

Angular 性能优化实战

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

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

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

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

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

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

你想了解关于井字棋（Tic-Tac-Toe）的HTML代码吗？以下是一个简单的井子棋的HTML代码示例： <!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代理的方法，解决可能遇到的问题，让你的爬虫项目顺利运行，畅爬互联网！ 配置HTTP代理的步骤 1. 了解HTTP代理的类型：常见的有正向代理和反向代理两种类型。根据实际需求…...

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

OpenZFS 2.2 发布 RC3，支持 Linux 6.4

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

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

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

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

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

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

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

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

tomcat的多实例和动静分离

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

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

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

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

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

总结synchronized

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

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

需求描述点击按钮用于检测鼠标是否命中按钮代码实现 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来实现一个简单的博客

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

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

Android Studio瀑布流实现

效果： 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 中的一个运算符，用于比较两个对象，但在比较两个对象的时候需要根据比较类型分情况进行讨论。 1.1 基本数据类型与基本数据类型基本数据类型之间通过进行比较的时候，是直接比较它们的大小，而与它们的具体…...

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

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

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

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

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

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

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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/9/18 2:38:31

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 （一）实时滤波与参数调整基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。平滑处理&…...

编程新知 2025/7/31 5:34:43

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

在rocky linux 9.5上在线安装 docker

前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12