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

Vue（二）

news 文章来源：https://blog.csdn.net/m0_64637029/article/details/137841556 2024/10/27 13:23:22

文章目录

- 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

在redhat7/8平台上部署ELK7.17.18的技术方案

部署环境说明为节省资源直接使用1台测试机模拟3节点elasticsearch服务集群做部署，在该主机上同时部署了3个elasticsearch实例、1个logstash实例、1个kibana实例、1个filebeat实例。对于生产环境，以上实例服务应该做分布式部署。 ELK-TEST1 192.168.10…...

编程日记 2024/4/17 9:08:14

(Chat For Al,创新Al,汇语Al助手,AiTab新标签,万能助手,LLaVA)分享6个好用的ChatGPT

目录 1、Chat For AI 2、创想AI 3、汇语AL助手...

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

MySQL-锁篇

文章目录表级锁和行级锁了解吗？有什么区别？行级锁使用有什么注意事项？InnoDB有哪几类行锁？共享锁和排他锁是什么？意向锁有什么用？ 锁是一种常见的并发事务的控制方式表级锁和行级锁了解吗？有什…...

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

线性相位是时间平移，相位不失真零、基础知识 1、用相量表示正弦量 https://zhuanlan.zhihu.com/p/345546880 https://www.zhihu.com/question/347763932/answer/1103938667 A s i n ( ω t θ ) ⇔ A e j θ ⇔ A ∠ θ Asin(\omega t\theta) {\Leftrightarrow…...

编程日记 2024/4/17 9:03:08

【ARFoundation自学01】搭建AR框架，检测平面点击位置克隆物体

Unity开发ARFoundation相关应用首先安装ARFoundation包然后设置XR 1.基础AR场景框架搭建 2.一个基本的点击克隆物体到识别的平面脚本挂在XROrigin上脚本AppController 脚本说明书 ## 业务逻辑 AppController 脚本旨在实现一个基本的 AR 应用程序功能：用户通过…...

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

.Net ajax 接收参数

后端部分代码一般处理程序 public void ProcessRequest(HttpContext context){context.Response.ContentType "text/plain";string str_index context.Request.Form.AllKeys.Contains("index") ? context.Request.Form["index"].ToString(…...

编程日记 2024/4/17 9:01:03

智能零售：引领购物新时代

智能零售通过整合人工智能、物联网、大数据和机器学习等技术，正在彻底改变传统的购物模式，为消费者和零售商提供前所未有的效率和个性化体验。智能零售利用消费者数据分析来提供个性化的购物推荐。无论是在线平台或是实体店内，智能系统都能…...

编程日记 2024/4/17 8:58:59

【AIGC】AIGC在虚拟数字人中的应用：塑造未来互动体验的革新力量

🚀 🚀 🚀随着科技的快速发展，AIGC已经成为引领未来的重要力量。其中，AIGC在虚拟数字人领域的应用更是引起了广泛关注。虚拟数字人作为一种先进的数字化表达形式，结合了3D建模、动画技术、人工智能等多种先进…...

编程日记 2024/4/17 8:53:51

电机控制器电路板布局布线参考指导（五）

电机控制器电路板布局布线参考指导（五）大容量电容和旁路电容的放置 1.大容量电容的放置2.电荷泵电容器3.旁路电容/去耦电容的放置3.1 靠近电源3.2 靠近功率器件3.3 靠近开关电流源3.4 靠近电流感测放大器3.5 靠近稳压器 tips：资料主要来自网络…...

编程日记 2024/4/17 8:52:49

Python医院挂号脚本

作者介绍：10年大厂数据\经营分析经验，现任大厂数据部门负责人。会一些的技术：数据分析、算法、SQL、大数据相关、python 欢迎加入社区：码上找工作作者专栏每日更新： LeetCode解锁1000题: 打怪升级之旅 python数据分析…...

编程日记 2024/4/17 8:47:43

扬州网官方微博/软件排名优化

情人节到了，用主流媒体的话说就是“大人忙出轨，学生忙过节，商家忙赚钱”，各取所需，各得其乐。节目五花八门，游戏必不可少。今天推荐的这款名为《2人反应堆》的小游戏很应景，作为一款双人休闲竞技…...

编程日记 2024/10/27 10:56:05

电脑培训网上免费课程/北京网站优化价格

1.准备前提，下载对应的安装软件； Rabbit MQ 是建立在强大的Erlang OTP平台上，因此安装RabbitMQ之前要先安装Erlang。 erlang：http://www.erlang.org/download.htmlrabbitmq：http://www.rabbitmq.com/download.html 下…...

编程日记 2024/10/27 8:59:16

wordpress首页显示特定分类文章/江苏疫情最新消息

近年来，随着城市建设的不断推进，应对重大突发公共安全事件的处置能力也成为了城市现代化程度的一个重要标志。而作为城市调度的“大脑”，指挥控制中心也得益于当下应急指挥联动的发展而得到迅速拓展。控制台作为人与指挥中心联动的重要载体&a…...

编程日记 2024/10/27 8:44:09

合浦网站建设/seo上海网站推广

[1] http://blog.csdn.net/lanxu_yy/article/details/11907615 每当遇到0，则放到当前可放置的最左端‘如果遇到2，则放到当前可放置位置的最右边。具体的过程： 如果当前元素是2，那么将其交换到最右边，rightindex--&…...

编程日记 2024/10/27 8:18:42

wordpress 分类页url/百度经验手机版官网

我的php环境是WAMP,并且以前已经配置妥当，已经使用一段时间。昨天我看到在phpMyAdmin里面的权限下设置密码的文章，我就在权限下我的php环境是WAMP,并且以前已经配置妥当，已经使用一段时间。昨天我看到在phpMyAdmin里面的权限下设置密码的文章…...

编程日记 2024/10/27 7:13:53

浙江省杭州市建设厅网站/网页优化seo公司

我是一名程序猿，猿类的世界几人能懂，逻辑、业务、编码、实现、各种bug、架构、设计、MVC、分层，各种诱惑各种蒙， 今天好好想了想，理了下思路。设计原则： 感觉还是总结一下的好，总有很多人问&…...

编程日记 2024/10/27 7:11:51

文章目录

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.代码实例

相关文章：