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

Vue基本知识

news 2025/11/11 18:57:04

 一、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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/11/10 20:47:28

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/11/7 19:59:15

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

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

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/11/9 23:12:28

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/11/7 7:53:21

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2025/9/14 5:50:36