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

Vue基本知识

news 2026/4/3 19:51:58

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

黑客技术？没你想象的那么难！—— DNS 劫持篇

黑客技术&#xff1f;没你想象的那么难&#xff01;——dns劫持篇 什么是DNS劫持&#xff1f; DNS劫持就是通过劫持了DNS服务器&#xff0c;通过某些手段取得某域名的解析记录控制权&#xff0c;进而修改此域名的解析结果&#xff0c;导致对该域名的访问由原IP地址转入到修改后…...

编程新知 2026/4/3 17:49:24

memtest_vulkan显存检测终极指南：从问题识别到健康管理

memtest_vulkan显存检测终极指南&#xff1a;从问题识别到健康管理 【免费下载链接】memtest_vulkan Vulkan compute tool for testing video memory stability 项目地址: https://gitcode.com/gh_mirrors/me/memtest_vulkan 一、显存故障问题识别&#xff1a;图形渲染异…...

编程新知 2026/4/3 17:00:38

一键搞定完整网页截图：Chrome扩展终极解决方案

一键搞定完整网页截图&#xff1a;Chrome扩展终极解决方案 【免费下载链接】full-page-screen-capture-chrome-extension One-click full page screen captures in Google Chrome 项目地址: https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chrome-extension …...

编程新知 2026/4/3 16:56:36

【AI】AI安全工具：常用AI安全检测工具的使用教程

AI安全工具&#xff1a;常用AI安全检测工具的使用教程&#x1f4dd; 本章学习目标&#xff1a;本章介绍实用工具&#xff0c;帮助读者掌握AI安全合规治理的工具使用。通过本章学习&#xff0c;你将全面掌握"AI安全工具&#xff1a;常用AI安全检测工具的使用教程"这一…...

编程新知 2026/4/3 16:54:34

MySQL 生产环境故障排查与性能优化全攻略（8.0 版本实战）

前言MySQL 作为目前企业级应用最广泛的开源关系型数据库&#xff0c;在生产环境中承担着核心数据存储与处理任务。默认配置往往无法满足高并发、大数据量的业务场景&#xff0c;同时运维过程中也会频繁遇到各类故障。本文基于 MySQL 8.0 版本&#xff0c;从单实例故障、主从复制…...

编程新知 2026/4/3 16:46:27

终极指南：5步解锁MacBook Touch Bar在Windows系统的完整显示功能

终极指南&#xff1a;5步解锁MacBook Touch Bar在Windows系统的完整显示功能 【免费下载链接】DFRDisplayKm Windows infrastructure support for Apple DFR (Touch Bar) 项目地址: https://gitcode.com/gh_mirrors/df/DFRDisplayKm 还在为MacBook Pro的Touch Bar在Wind…...

编程新知 2026/4/3 15:45:35

SELinux 导致 K8s 日志 logrotate 无法轮询压缩

1. 问题现象在某 Linux 环境中&#xff0c;Kubernetes 日志无法自动轮询、无法压缩归档&#xff0c;具体表现如下&#xff1a;/var/log/kubernetes/kubelet.log 持续增大&#xff0c;达到 90MB 不再切割日志压缩包停留在某一时间点&#xff0c;之后不再生成新归档系统日志&…...

编程新知 2026/4/3 14:32:04

如何用League-Toolkit智能助手解决英雄联盟5大核心痛点？效率提升指南

如何用League-Toolkit智能助手解决英雄联盟5大核心痛点&#xff1f;效率提升指南 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的英…...

编程新知 2026/4/3 12:32:32

从需求到代码：基于快马平台ai生成spring boot电商系统实战项目

从需求到代码&#xff1a;基于快马平台AI生成Spring Boot电商系统实战项目 最近在做一个电商订单处理系统的项目&#xff0c;正好尝试了用InsCode(快马)平台来快速生成Spring Boot代码。整个过程比我预想的要顺畅很多&#xff0c;特别是对于这种包含多个模块的中型项目&#x…...

编程新知 2026/4/3 11:48:07

现货库存MAX3311EEUB+T由ADI推出的高性能、低功耗RS-232收发器芯片，专为便携式和高可靠性电子设备设计，在工业控制、通信终端及嵌入式系统中表现出色

MAX3311EEUBT‌ 是一款由ADI推出的高性能、低功耗RS-232收发器芯片&#xff0c;专为便携式和高可靠性电子设备设计&#xff0c;在工业控制、通信终端及嵌入式系统中表现出色 。核心性能参数‌协议兼容性‌&#xff1a;完全符合EIA/TIA-232标准&#xff0c;支持RS-232电平转换‌…...

编程新知 2026/4/3 11:13:52