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

Vue（二）

news 2025/9/12 18:47:52

文章目录

- 1.条件渲染
- - - 1.关于js中的false的判定
    - 2.基本介绍
    - 3.v-if
    - - 1.需求分析
      - 2.代码实例
    - 4.v-show实现
    - 5.v-if与v-show比较
    - 6.课后练习
- 2.列表渲染
- - - 1.代码实例
    - 2.课后练习
- 3.组件化编程
- - - 1.基本介绍
    - 2.实现方式一_普通方式
    - 2.实现方式二_全局组件方式
    - 3.实现方式三_局部组件方式
- 4.生命周期和监听函数（钩子函数）
- - - 1.基本介绍
    - 2.示意图
    - - 简要介绍生命周期
      - 详细介绍生命周期（前六个重点）
    - 3.案例演示
    - - 1.需求分析
      - 2.代码实例

1.条件渲染

1.关于js中的false的判定

null
NaN
undefined
“”

2.基本介绍

在判断的时候，会在数据池中寻找对应的变量，根据判定结果来进行操作

3.v-if

1.需求分析

2.代码实例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入vue --><script src="vue.js"></script>
</head>
<body><div id="app"><!--  双向绑定  --><h5><input type="checkbox" v-model:checked="checked">是否同意条款</h5><h4 v-if="checked">同意</h4><h4 v-else>不同意</h4></div><!--注意：这里的script需要写在后面-->
<script>// 创建一个vue对象（Model）var vue = new Vue({// 绑定view层el: "#app",// 数据池data: {checked: false},// 方法池methods: {}});</script>
</body>
</html>
<script setup>
</script>

4.v-show实现

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入vue --><script src="vue.js"></script>
</head>
<body><div id="app">
<!--  双向绑定  --><h5><input type="checkbox" v-model:checked="checked">是否同意条款</h5><h4 v-show="!checked">不同意</h4><h4 v-show="checked">同意</h4></div><!--注意：这里的script需要写在后面-->
<script>// 创建一个vue对象（Model）var vue = new Vue({// 绑定view层el: "#app",// 数据池data: {checked: false},// 方法池methods: {}});</script>
</body>
</html>
<script setup>
</script>

5.v-if与v-show比较

v-if：动态创建和销毁，开销大
v-show：使用css切换可见度，并没有创建和销毁，开销小

6.课后练习

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入vue --><script src="vue.js"></script>
</head>
<body><div id="app">
<!--    双向绑定value--><h3>输入成绩1-100&nbsp;<input type="text" v-model="value"></h3><h4 v-if="value>90">您的成绩是{{value}}<br>优秀</h4><h4 v-else-if="value>70">您的成绩是{{value}}<br>良好</h4><h4 v-else-if="value>60">您的成绩是{{value}}<br>及格</h4><h4 v-else>您的成绩是{{value}}<br>不及格</h4></div><!--注意：这里的script需要写在后面-->
<script>// 创建一个vue对象（Model）var vue = new Vue({// 绑定view层el: "#app",// 数据池data: {value: 85},// 方法池methods: {}});</script>
</body>
</html>
<script setup>
</script>

2.列表渲染

1.代码实例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入vue --><script src="vue.js"></script>
</head>
<body><div id="app1"><h2>简单的列表渲染</h2><ul><li v-for="i in 3">{{i}}</li></ul><h2>简单的列表渲染——带索引</h2><ul><li v-for="(i, index) in 3">{{index}} -- {{i}}</li></ul><h2>简单的列表渲染——遍历对象数组</h2><table border="2px" width="400px"><tr v-for="monster in monsters"><td>{{monster.id}}</td><td>{{monster.name}}</td><td>{{monster.age}}</td></tr></table>
</div><!--注意：这里的script需要写在后面-->
<script>// 创建一个vue对象（Model）var vue = new Vue({// 绑定view层el: "#app1",// 数据池data: {//一个数组monsters: [{id: 1, name: "牛魔王", age: 100},{id: 2, name: "黑山老妖", age: 200},{id: 3, name: "红孩儿", age: 300}]},// 方法池methods: {}});</script>
</body>
</html>
<script setup>
</script>

2.课后练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body>
<div id="app"><table border="1px" width="400px"><!--if和for可以写在一起--><tr v-if="student.score > 60" v-for="student in students"><td>{{student.id}}</td><td>{{student.name}}</td><td>{{student.age}}</td><td>{{student.score}}</td></tr></table>
</div><script>new Vue({el: "#app",data: {students: [{id: 1, name: "jack", age: 12, score: 90},{id: 2, name: "tom", age: 32, score: 30},{id: 3, name: "mary", age: 22, score: 80},{id: 4, name: "lisa", age: 13, score: 20},{id: 5, name: "lihua", age: 11, score: 94}]}})
</script>
</body>
</html>

3.组件化编程

1.基本介绍

2.实现方式一_普通方式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body><div id="app">
<!--
1.三个按钮其实一样，业务逻辑也一样，却重新写了一次，复用性低
2.解决：组件化编程
--><button v-on:click="add">点击次数={{count}}次</button><br><button v-on:click="add1">点击次数={{count1}}次</button><br><button v-on:click="add2">点击次数={{count2}}次</button>
</div><script>new Vue({el: "#app",data: {count: 10,count1: 10,count2: 10},methods: {add() {this.count ++;},add1() {this.count1 ++;},add2() {this.count2 ++;}}})
</script></body>
</html>

2.实现方式二_全局组件方式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body><div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter></div><script>//编写全局组件Vue.component("counter", {template: `<button v-on:click="add">点击次数={{count}}次</button>`,data() {return {count: 10 //每次创建一个组件，都会有一个新的count跟template绑定，而方法是共享的}},methods: {add() {this.count ++;}}})new Vue({//由于是全局组件，所以即使这里什么都不写，也是包含了组件el: "#app"})
</script></body>
</html>

3.实现方式三_局部组件方式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body><div id="app"><counter></counter><counter></counter><counter></counter><counter></counter>
</div><script>//编写局部组件let counter = {template: `<button v-on:click="add">点击次数={{count}}次</button>`,data() {return {count: 10 //每次创建一个组件，都会有一个新的count跟template绑定，而方法是共享的}},methods: {add() {this.count ++;}}}new Vue({//由于是局部组件，所以需要在这里引用才能使用el: "#app",components: {counter //这里是ES6新特性，这样这个属性的名字和变量名相同相当于counter: counter}})
</script></body>
</html>

4.生命周期和监听函数（钩子函数）

1.基本介绍

2.示意图

简要介绍生命周期

**beforeCreate：**初始化view
**created：**初始化model中的data和methods（常用ajax请求）
**beforeMount：**挂载之前，并没有渲染数据
**mounted：**通过el挂载到view，实现数据渲染
循环监听数据池的变化，一旦发生改变执行下一步
**beforeUpdate：**数据池更新，但是没有渲染到view
**updated：**将数据池中的数据渲染到view

详细介绍生命周期（前六个重点）

beforeCreate：这是最初的阶段，此时组件的 data 和 methods 都还未初始化。
created：在这个阶段，组件的 data 和 methods 已经被初始化了。如果要对数据进行调用或修改（发出Ajax请求），这个阶段是合适的。但此时还没有开始渲染模板，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。此时，模板中的数据还没有被渲染到页面上。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。在这一步，实例已经挂载，因此可以通过 DOM API 访问到页面上的 DOM 元素，数据已经可以显示在视图上了。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作，数据变化后更新视图。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用，这意味着你可以在这个钩子中执行清理操作。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

3.案例演示

1.需求分析

2.代码实例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script>
</head>
<body><div id="app"><span id="num">{{num}}</span><button @click="add">点赞！</button><h2>{{name}}有{{num}}次点赞</h2>
</div>
<script>let vm = new Vue({el: "#app",data: {name: "jack",num: 0},methods: {show() {return this.name;},add() {this.num ++;}},//只是初始化了viewbeforeCreate() {console.log("======beforeCreate======");console.log("数据模型/数据池的数据是否加载/使用？[no]",this.name, "", this.num)// console.log("自定义方法是否加载/使用？[no]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom是否被渲染？[no]",document.getElementById("num").innerText)},//初始化model中的data和methodscreated() {console.log("======created======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom是否被渲染？[no]",document.getElementById("num").innerText)//可以发出ajax请求//接受返回的数据//再次去更新data数据池中的数据//在后面挂载的时候渲染view},//挂载之前，并没有渲染viewbeforeMount() {console.log("======beforeMount======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom是否被渲染？[no]",document.getElementById("num").innerText)},//挂载阶段：通过el挂载到view，实现数据渲染mounted() {console.log("======mounted======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom是否被渲染？[yes]",document.getElementById("num").innerText)},//数据池更新，并保存这个状态，但是用户界面的dom数据不会被更新beforeUpdate() {console.log("======beforeUpdate======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom数据是否被更新？[no]",document.getElementById("num").innerText)},//渲染用户界面的dom，更新数据updated() {console.log("======updated======");console.log("数据模型/数据池的数据是否加载/使用？[yes]",this.name, "", this.num)console.log("自定义方法是否加载/使用？[yes]",this.show(), "", this.add())console.log("用户页面dom是否加载/使用？[yes]",document.getElementById("num"))console.log("用户页面dom数据是否被更新？[yes]",document.getElementById("num").innerText)}})
</script></body>
</html>

Vue（二）

文章目录 1.条件渲染1.关于js中的false的判定2.基本介绍3.v-if1.需求分析2.代码实例 4.v-show实现5.v-if与v-show比较6.课后练习 2.列表渲染1.代码实例2.课后练习 3.组件化编程1.基本介绍2.实现方式一_普通方式2.实现方式二_全局组件方式3.实现方式三_局部组件方式 4.生命周期和…...

编程日记 2024/4/17 9:57:19

Python基于深度学习的车辆特征分析系统

博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...

编程日记 2024/4/17 9:54:16

推理还原的干货

故事的递进还原从下层故事到上层故事设定还原还原的逻辑隐藏信息拼凑、因果导致果推因、规则还原现象设计思路： 真解答真解答的关键信息推理逻辑链哪些环节可以被误导如何把关键信息变成伪解答解释变形信息给出识别变形信息的方法或线索其实看似一个…...

编程日记 2024/4/17 9:52:13

【Redis 神秘大陆】006 灾备方案

六、Redis 灾备方案 6.1 存储方案 6.1.1 基础对比 RDB持久化AOF持久化原理周期性fork子进程生成持久化文件每次写入记录命令日志文件类型二进制dump快照文件文本appendonly日志文件触发条件默认超过300s间隔且有1s内超过1kb数据变更永久性每秒fsync一次文件位置配置文件中指…...

编程日记 2024/4/17 9:51:09

【Java基础】17.异常处理

文章目录前言一、异常的概念1.异常的3种类型2.支持异常处理的关键字和类二、Exception 类的层次三、内置异常类1.非检查性异常2.检查性异常类四、异常处理1.捕获异常2.多重捕获块3.throws/throw 关键字1.throw 关键字2.throws 关键字 3.finally关键字五、编译时异常处理方式…...

编程日记 2024/4/17 9:50:07

【python】flask结合SQLAlchemy，在视图函数中实现对数据库的增删改查

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，…...

编程日记 2024/4/17 9:49:06

APIGateway的认证

APIGateway的支持的认证如下： 我们从表格中可以看到，HTTP API 不支持资源策略的功能，另外是通过JWT的方式集成Cognito的。对于REST API则是没有显示说明支持JWT认证，这个我们可以通过Lambda 自定义的方式来实现。所以按照这个…...

编程日记 2024/4/17 9:48:05

MacOS Github Push项目精简版步骤

大白菜教程：小白菜 macOS github提交代码-CSDN博客步骤1：git init步骤2： touch .gitignore 创建ignore文件 open .gitignore 打开ignore文件编写ignore文件.idea/ 是文件夹的意思.git/ 也是自动生成的文件夹也不上传.DS_St…...

编程日记 2024/4/17 9:46:02

Eclipse的基本使用讲解(建项目，建包，建类，写代码(基本语法))新手入门必备

目录一.介绍eclipse 二.操作Eclipse 1.选择工作空间 2.建项目，建包，建类 1.建项目(两种) 2.建包 3.建类三.写代码(基本语法) 1.代码操作 2.代码规范 3.代码注释一.介绍eclipse Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其…...

编程日记 2024/4/17 9:45:00

3D模型处理的并行化

今天我们将讨论如何使用 Python 多进程来处理大量3D数据。我将讲述一些可能在手册中找到的一般信息，并分享我发现的一些小技巧，例如将 tqdm 与多处理 imap 结合使用以及并行处理存档。那么我们为什么要诉诸并行计算呢？ 使用数据有时会出现…...

编程日记 2024/4/17 9:41:56

盲人安全导航技巧：科技赋能让出行更自如

作为一名资深记者，长期关注并报道无障碍领域的发展动态。今日，我将聚焦盲人安全导航技巧，探讨这一主题下科技如何赋能视障人士实现更为安全、独立的出行。一款融合了实时避障、拍照识别物体及场景功能的盲人出行辅助应用叫做蝙蝠避障&#xf…...

编程日记 2024/4/17 9:39:51

问，由于java存在性能上，以及部分功能上的缺点，请问如何正确使用C，C++，Go，这三个语言，提升Java Web项目的性能？

拓展阅读：版本任你发，我用java8 我明白Java虽然在许多方面表现出色，但在某些特定场景下可能会遇到性能瓶颈或功能限制。为了提升Java Web项目的性能，可以考虑将C、C和Go这三种语言用于特定的组件或服务。以下是如何正确使用这些语…...

编程日记 2024/4/17 9:38:50

【信号与系统 - 9】傅里叶变换的性质习题

1 习题已知 f ( t ) f(t) f(t) 的傅里叶变换为 F ( j w ) F(jw) F(jw) ，求如下信号的傅里叶变换 （1） t ⋅ f ( 3 t ) t\cdot f(3t) t⋅f(3t) 解： f ( 3 t ) ↔ 1 3 F ( j w 3 ) f(3t)\leftrightarrow \frac{1}{3}F(j\frac{w}…...

编程日记 2024/4/17 9:28:39

C#探索之路基础夯实篇(5)：语法糖概念解析

C#探索之路基础夯实篇(5)：语法糖概念解析文章目录 C#探索之路基础夯实篇(5)：语法糖概念解析1、概念定义2、Lua中的语法糖3、C#中的语法糖4、C中的语法糖5、优缺点辨析6、适用范围7、总结从之前一开始接触lua的时候开始，开始第一次接触到语法…...

编程日记 2024/4/17 9:26:36

SeaTunnel 与 DataX 、Sqoop、Flume、Flink CDC 对比

产品概述 Apache SeaTunnel 是一个非常易用的超高性能分布式数据集成产品，支持海量数据的离线及实时同步。每天可稳定高效同步万亿级数据，已应用于数百家企业生产，也是首个由国人主导贡献到 Apache 基金会的数据集成顶级项目。 SeaTunnel 主要解决数据集成领域的常见问题：…...

编程日记 2024/4/17 9:23:32

深入理解汇编：平栈、CALL和RET指令详解

视频学习下载地址：https://pan.quark.cn/s/04e6946a803a 汇编语言以其接近硬件的特性和高效的执行速度，在系统编程、性能优化和逆向工程中占有不可或缺的地位。本文将深入探讨汇编语言中的平栈操作以及CALL和RET指令&#…...

编程日记 2024/4/17 9:22:31

DP4 最小花费爬楼梯

原题链接：最小花费爬楼梯_牛客题霸_牛客网目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 dp。开一个dp数组和a数组。dp[i]表示在当前这一格所需要的费用，a数组其实就是题目中的cost数组。因为最后要求到顶楼的最低费用&a…...

编程日记 2024/4/17 9:19:28

OpenXR API概览与核心组件解析

在虚拟现实（VR）和增强现实（AR）领域，OpenXR API提供了一个重要的开放标准，使得开发者能够跨多种硬件和软件平台创建兼容的应用。本文将详细解释OpenXR中的核心组件和数据结构，并探讨它们如何共同…...

编程日记 2024/4/17 9:18:26

安装指定版本的ant-design-vue和指定版本的@ant-design/icons-vue 图标组件包

前言： 最近在完成公司的项目时，为了兼容其他的版本，需要安装指定版本的ant-design-vue和ant-design/icons-vue 图标组件包，安装成功之后，分享如下： 安装命令： ant-design-vue： 不…...

编程日记 2024/4/17 9:16:23

Zynq7000系列中的休眠模式

休眠模式是在系统层面定义的，它包括将APU置于待机模式，并将多个控制器保持在无时钟的复位状态。进入休眠模式可以大大降低功耗。在休眠模式下，大多数功能时钟组都会被关闭或断电。唯一需要保持活动的设备是一个CPU、窥探控制单元&#xff08…...

编程日记 2024/4/17 9:09:15

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

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

编程新知 2025/6/27 2:57:24

【Oracle】分区表

个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/9/7 8:51:50

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2025/8/16 15:34:02

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/9/2 20:17:23