Web前端框架-Vue（初识）

文章目录

- web前端三大主流框架
- **1.Angular**
- **2.React**
- **3.Vue**
- - 什么是Vue.js
- 为什么要学习流行框架
- 框架和库和插件的区别
- - 一.简介
  - 指令
  - v-cloak
  - v-text
  - v-html
  - v-pre
  - **v-once**
  - v-on
  - v-on事件函数中传入参数
  - 事件修饰符
  - 双向数据绑定
  - - v-model
  - 按键修饰符
  - 自定义按键修饰符别名
  - v-bind(属性绑定)
  - - 绑定对象
    - 绑定class
    - 绑定对象和绑定数组的区别
    - 绑定style
  - 分支结构
  - - v-if 使用场景
    - v-show 和 v-if的区别
  - 循环结构
  - - v-for
  - 案例选项卡
  - - 1、 HTML 结构
    - 2、提供的数据

web前端三大主流框架

web前端三大主流框架是Angular、React、Vue。库框架

1.Angular

https://angular.io/

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

2.React

https://react.docschina.org/

React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

3.Vue

官方网址：https://cn.vuejs.org/ 数据驱动视图

什么是Vue.js

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

为什么要学习流行框架

企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；

企业中，使用框架，能够提高开发的效率；
提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

增强自己就业时候的竞争力

人无我有，人有我优

框架和库和插件的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

一.简介

MVVM是Model-View-ViewModel的简写即模型-视图-视图模型

M:【模型】指的是后端传递的数据。

V:【视图】指的是所看到的页面。

VM:【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。

二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

这两个方向都实现的，我们称之为数据的双向绑定。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了。

为什么会有MVVM框架？

在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。综上两方面原因，才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定，极大了提高了开发效率。

指令

本质就是自定义属性
Vue中指定都是以 v- 开头

v-cloak

 /*v-cloak指令的用法1、提供样式[v-cloak]{display: none;}2、在插值表达式所在的标签中添加v-cloak指令背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果*/

防止页面加载时出现闪烁问题

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">[v-cloak]{display: none;}</style></head><body><div id="app"><div v-cloak>{{msg}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*v-cloak指令的用法1、提供样式[v-cloak]{display: none;}2、在插值表达式所在的标签中添加v-cloak指令背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果*/var vm = new Vue({el: '#app',data: {msg: 'Hello Vue'}});</script></body></html>

v-text

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

<div id="app"><!--注意:在指令中不要写插值语法直接写对应的变量名称 在 v-text 中 赋值的时候不要在写 插值语法一般属性中不加 {{}}直接写 对应 的数据名 --><p v-text="msg"></p><p>{{msg}}</p></div><script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});</script>

v-html

用法和v-text 相似但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<div id="app">　　<p v-html="html"></p> <p>{{message}}</p> <!-- 输出：通过双括号绑定 -->　　<p v-text="text"></p> <!-- 输出：html标签在渲染的时候被源码输出 --></div><script>　　let app = new Vue({　　el: "#app",　　data: {　　　　message: "通过双括号绑定",　　　　html: "html标签在渲染的时候被解析",　　　　text: "html标签在渲染的时候被源码输出",　　} });</script>

v-pre

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染

<span v-pre>{{ this will not be compiled }}</span><!--显示的是{{ this will not be compiled }}--><span v-pre>{{msg}}</span> <!-- 即使data里面定义了msg这里仍然是显示的{{msg}}--><script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});</script>

v-once

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

 <span v-once>{{ msg}}</span><script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});</script>

v-on

形式如：v-on:click 缩写为 @click;

v-on事件函数中传入参数

<body><div id="app"><div>{{num}}</div><div><button v-on:click='handle1'>点击1</button><button v-on:click='handle2(123, 456, $event)'>点击2</button></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {num: 0},methods: {handle1: function(event) {console.log(event.target.innerHTML)},handle2: function(p, p1, event) {console.log(p, p1)console.log(event.target.innerHTML)this.num++;}}});</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
修饰符是由点开头的指令后缀来表示的
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次

<body><div id="app"><div>{{num}}</div><div class="div1" v-on:click='handle1'><button v-on:click='handle0'>点击</button></div><div><a href="http://www.baidu.com" v-on:click.self.prevent='handle2'>百度<p>我是一个p标签</p></a></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*事件绑定-事件修饰符*/var vm = new Vue({el: '#app',data: {num: 0},methods: {handle0: function (event) {this.num++;console.log("我是点击子元素");// 阻止冒泡// event.stopPropagation();},handle1: function (event) {this.num++console.log("我是点击父元素");},handle2: function (event) {alert("我弹")// 阻止默认行为// event.preventDefault();}}});</script></body>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。@click.prevent.self =“c”总是先执行prevent，无论是内部元素还是本身元素触发，他都会prevent默认事件。只不过只有当你点击a元素的时候，才会触发c事件，因此会阻止所有的点击的默认行为 @click.self.prevent =“c” 当你点击的元素是a的时候，才会prevent默认事件，而且执行c事件，因此只会阻止对元素自身的点击。

双向数据绑定

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

v-model

v-model是一个指令，限制在、、、components</code>中使用</li></ul><pre><code> {{msg}}当输入框中内容改变的时候，页面上的msg会自动更新</code></pre>简易计算器<h4>按键修饰符</h4><ul><li>在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 <code>v-on</code> 在监听键盘事件时添加按键修饰符</li></ul><pre><code class="prism language-html"><input v-on:keyup.13="submit"><input v-on:keyup.enter="submit"><input type="text" v-on:keyup.enter.space="alertMe" >常用的按键修饰符.enter =>enter键.tab => tab键.delete (捕获“删除”和“退格”按键) =>删除键.esc => 取消键.space =>空格键.up =>上.down =>下.left =>左.right =>右<script>var vm = new Vue({el:"#app",methods: {submit:function(){},alertMe:function(){},}})</script></code></pre><h4>自定义按键修饰符别名</h4><ul><li>在Vue中可以通过<code>config.keyCodes</code>自定义按键修饰符别名</li><li>Vue.config.keyCodes.f2=113</li></ul><pre><code class="prism language-html"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><input type="text" v-on:keyup.f2='handle' v-model='info'></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*事件绑定-自定义按键修饰符规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值*/Vue.config.keyCodes.f2 = 113var vm = new Vue({el: '#app',data: {info: ''},methods: {handle: function(event){console.log(event.keyCode)}}});</script></body></html></code></pre><h4>v-bind(属性绑定)</h4><ul><li>v-bind 指令被用来响应地更新 HTML 属性</li><li>v-bind:href 可以缩写为 :href;</li></ul><pre><code class="prism language-html"><img v-bind:src="imageSrc"><img :src="imageSrc">属性绑定案例：<body><div id="app"><a v-bind:href="url" :title="msg+123">百度</a><a :href="url">百度1</a><button v-on:click='handle'>切换</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*属性绑定*/var vm = new Vue({el: '#app',data: {url: 'http://www.baidu.com',msg:"这是一个a标签"},methods: {handle: function(){// 修改URL地址this.url = 'http://www.sina.com';}}});</script></body></code></pre><h5>绑定对象</h5><ul><li>我们可以给v-bind:class 一个对象，以动态地切换class。</li><li>注意：v-bind:class指令可以与普通的class特性共存</li></ul><pre><code class="prism language-html">1、 v-bind 中支持绑定一个对象//<div class="box" :class={active:isActive,bgc:isBgc}></div>这里的键是类，值是data中的数据中的属性，data数据中属性值是布尔类型<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 100px;height: 100px;}.active {border: 1px solid red;}.bgc {background:pink}</style></head><body><div id="app"><input type="button" @click="handle" value="切换"><div class="box" :class={active:isActive,bgc:isBgc}></div></div></body><script src="js/vue.js"></script><script>var vm = new Vue({el:"#app",data:{isActive:true,isBgc:true},methods:{handle () {this.isActive = !this.isActivethis.isBgc = !this.isBgc}}})</script></html></code></pre><h5>绑定class</h5><pre><code class="prism language-html">2、v-bind 中支持绑定一个数组数组中isactive和 isbgc 对应为data中的数据中的键。data中数据的的属性值是类，要加双引号，置空的办法为 this.isbgc = ""<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {width: 100px;height: 100px;border: 1px solid pink;}.bgc {background: Red}</style></head><body><div id="app"><input type="button" value="清空" @click=handle><div class="box" :class='[isactive,isbgc]'>123</div></div><script src="js/vue.js"></script><script>var vm = new Vue({el: "#app",data: {isactive: "active",isbgc: "bgc"},methods: {handle() {this.isbgc = ""}}})</script></body></html></code></pre><h5>绑定对象和绑定数组的区别</h5><ul><li>绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据属性，值是布尔类型</li><li>绑定数组的时候数组里面存的是data 中的数据属性，data的值是类名</li></ul><h5>绑定style</h5><pre><code class="prism language-html"> <div class="box" @click="handle" v-bind:style="{backgroundColor:divColor,width:divWidth,height:divHeight}">内联样式</div> <div v-bind:style="styleObject">绑定样式对象</div>'<div v-bind:style="[styleObj1, styleObj2]"></div><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app"><div class="box" @click="handle" v-bind:style="{backgroundColor:divColor,width:divWidth,height:divHeight}"></div><div class="box" @click="handle" v-bind:style="styleObject"></div><div class="box" @click="handle" v-bind:style="[styleObject,style1Object]"></div></div></body><script src="js/vue.js"></script><script>var vm = new Vue({el: "#app",data: {divColor: "red",divWidth: "100px",divHeight: "100px",styleObject: {width: "200px",height: "200px",background: "orange"},style1Object: {background: "blue"}},methods: {handle() {this.divColor = "pink"this.styleObject.background = "cyan"}}})</script></html></code></pre><h4>分支结构</h4><h5>v-if 使用场景</h5><ul><li>1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素</li><li>2- 进行两个视图之间的切换</li></ul><pre><code class="prism language-html"> <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2 {width:100px;height:100px;border:1px solid red}.box3 {width:100px;height:100px;border:1px solid cyan}</style></head><body><div id="app"> <input type="button" value="toggle1" @click="handle1"><div class="box1" v-if="flag" ></div><div class="box3" v-else="flag" ></div><input type="button" value="toggle2" @click="handle2" ><div class="box2" v-show="flag1"></div></div><script src="js/vue.js"></script><script>var vm = newVue({el:"#app",data:{flag:false,flag1:true},methods:{handle1 () {this.flag =!this.flag},handle2 () {this.flag1 =!this.flag1}}})</script></body></html>--------------------------------------------------------------- <div v-if="type === 'A'"> A</div><div v-else-if="type === 'B'"> B</div><div v-else-if="type === 'C'"> C</div><div v-else> Not A/B/C</div><script>new Vue({el: '#app',data: {type: 'C'}})</script></code></pre><h5>v-show 和 v-if的区别</h5><ul><li>v-show本质就是标签display设置为none，控制隐藏<ul><li>v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。</li></ul></li><li>v-if是动态的向DOM树内添加或者删除DOM元素<ul><li>v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件</li><li>一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。</li></ul></li></ul><h4>循环结构</h4><h5>v-for</h5><ul><li>用于循环的数组里面的值可以是对象，也可以是普通元素</li><li>1.迭代数组</li><li><pre><code class="prism language-html"><!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title><style>/**{margin:0;padding:0}a {text-decoration:none}ul,li {list-style:none}*/</style><script src='./js/vue.js'></script></head><body><div id='app'><ul><li v-for="(item,index) in stars">{{"索引是"+index+"内容是"+item}}</li></ul><ul><li v-for="(item,index) in students"><span>{{item.name}}</span><span>{{item.age}}</span></li></ul></div><script>var vm = new Vue({el: '#app',data: {stars: ["西施", "王昭君", "杨玉环", "貂蝉"],students: [{name: "zhagnsan",age: "18"},{name: "lisi",age: "19"},{name: "wangwu",age: "18"},]},methods: {}})</script></body></html></code></pre></li></ul>2.迭代对象<pre><code class="prism language-html"><div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div><!--循环结构-遍历对象</code></pre><pre><code class="prism language-html"><!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title><style>/**{margin:0;padding:0}a {text-decoration:none}ul,li {list-style:none}*/</style><script src='./js/vue.js'></script></head><body><div id='app'><li v-if="value=='zhangsan'" v-for="(value,key,index) in obj"><span>{{"键是"+key}}</span><span>{{"值是"+value}}</span><span>{{"索引"+index}}</span></li></div><script> var vm=new Vue({el:'#app', data:{obj:{name:"zhangsan",age:18,gender:"male"} }, methods:{ } })</script></body></html></code></pre><pre><code class="prism language-html">- 同时使用 `v-if` 和 `v-for`-<li v-if="value=='zhangsan'" v-for="(value,key,index) in obj"> </code></pre>3.迭代数字<pre><code class="prism language-html"><p v-for="i in 10">这是第 {{i}} 个P标签</p></code></pre>数字迭代时是从1开始<pre><code>key 的作用- **key来给每个节点做一个唯一标识**- **key的作用主要是为了高效的更新虚拟DOM**- 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**，而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。```html<ul><li>...</li></ul></code></pre><pre><code>案例演示：<title>Document</title> <label>ID: </label> <label>name: </label> ID:{{item.id}}----Name:{{item.name}} var vm=new Vue({el:'#app',data:{id:'',name:'',list:[{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":4,"name":"赵六"},{"id":5,"name":"孙七"} ]},methods:{add(){ this.list.unshift({id:this.id,name:this.name})}} })</code></pre><h4>案例选项卡</h4><h5>1、 HTML 结构</h5><pre><code class="prism language-html">`<div id="app"><div class="tab"><ul><li class="active">apple</li><li class="">orange</li><li class="">lemon</li></ul><div class="current"><img src="img/apple.png"></div><div class=""><img src="img/orange.png"></div><div class=""><img src="img/lemon.png"></div></div></div>`css样式<style type="text/css">.tab ul {overflow: hidden;padding: 0;margin: 0;}.tab ul li {box-sizing: border-box;padding: 0;float: left;width: 100px;height: 45px;line-height: 45px;list-style: none;text-align: center;border-top: 1px solid blue;border-right: 1px solid blue;cursor: pointer}.tab ul li:first-child {border-left: 1px solid blue;}.tab ul li.active {background-color: orange;}.tab div {width: 500px;height: 300px;display: none;text-align: center;font-size: 30px;line-height: 300px;border: 1px solid blue;border-top: 0px;}.tab div.current {display: block;}</style></code></pre><h5>2、提供的数据</h5><pre><code class="prism language-js"> list: [{id: 1,title: 'apple',path: 'img/apple.png'}, {id: 2,title: 'orange',path: 'img/orange.png'}, {id: 3,title: 'lemon',path: 'img/lemon.png'}]</code></pre></article></div><div class="related-posts"><h2 class="related-posts-title">相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/38159/" title="前端下载后端返回的文件流，取请求头中的文件名称" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/6b45748449be48d2a1feb5e86f50454f.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/38159/" title="前端下载后端返回的文件流，取请求头中的文件名称">前端下载后端返回的文件流，取请求头中的文件名称</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/56267/" title="OpenAI 又开始憋大招了——Sora AI视频模型" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/56267/" title="OpenAI 又开始憋大招了——Sora AI视频模型">OpenAI 又开始憋大招了——Sora AI视频模型</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/40688/" title="关于：云原生" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/40688/" title="关于：云原生">关于：云原生</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/43222/" title="pytest-yaml 测试平台-4.生成allure报告，报告反馈企业微信、钉钉、飞书通知" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/72fb8baca22ab763db6c3e085c2eccb0.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/43222/" title="pytest-yaml 测试平台-4.生成allure报告，报告反馈企业微信、钉钉、飞书通知">pytest-yaml 测试平台-4.生成allure报告，报告反馈企业微信、钉钉、飞书通知</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/36991/" title="Python中的imageio入门" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/36991/" title="Python中的imageio入门">Python中的imageio入门</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/45666/" title="14.云原生之三高系统" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/45666/" title="14.云原生之三高系统">14.云原生之三高系统</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/34570/" title="2.3 Spark运行架构与原理" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/34570/" title="2.3 Spark运行架构与原理">2.3 Spark运行架构与原理</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/7624/" title="解决Mariadb设置密码无效，可以直接登录" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/2260278/202303/2260278-20230326162414387-22760717.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/7624/" title="解决Mariadb设置密码无效，可以直接登录">解决Mariadb设置密码无效，可以直接登录</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT：强强联合Langchain-Vicuna的应用实战开源项目，彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle：世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库：第三章关系数据库标准语言SQL（二）数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开，原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通：从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/9124/" title="软件测试面试之问——角色扮演" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/1033182/202304/1033182-20230401114314823-847233604.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/9124/" title="软件测试面试之问——角色扮演">软件测试面试之问——角色扮演</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/3157/" title="Ajax跨域代理访问网络资源的实现代码" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/3157/" title="Ajax跨域代理访问网络资源的实现代码">Ajax跨域代理访问网络资源的实现代码</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/57470/" title="【小黑嵌入式系统第十九课】结课总结（三）——操作系统部分（RTOS&μC/OS-Ⅲ&程序设计基础（任务&函数&时间&临界区&通信））" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/408813def9ba4440bb359e2bdecab65e.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/57470/" title="【小黑嵌入式系统第十九课】结课总结（三）——操作系统部分（RTOS&μC/OS-Ⅲ&程序设计基础（任务&函数&时间&临界区&通信））">【小黑嵌入式系统第十九课】结课总结（三）——操作系统部分（RTOS&μC/OS-Ⅲ&程序设计基础（任务&函数&时间&临界区&通信））</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/16673/" title="怎么让 echarts 图表动起来？定时器解决它 —— 大屏展示案例（动态仪表盘、动态柱状图）" data-bg="https://img.maxssl.com/uploads/?url=https://g.csdnimg.cn/static/logo/favicon32.ico"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/16673/" title="怎么让 echarts 图表动起来？定时器解决它 —— 大屏展示案例（动态仪表盘、动态柱状图）">怎么让 echarts 图表动起来？定时器解决它 —— 大屏展示案例（动态仪表盘、动态柱状图）</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/3712/" title="数据集 | 基于计算机视觉的医学影像处理数据集" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/83f8b24014e54fb692ad7d2f139653fc.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/3712/" title="数据集 | 基于计算机视觉的医学影像处理数据集">数据集 | 基于计算机视觉的医学影像处理数据集</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/22913/" title="2022年总结：打开新世界，踏上新征程" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/0cff704d9ede4d23b481a2c5f611a364.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/22913/" title="2022年总结：打开新世界，踏上新征程">2022年总结：打开新世界，踏上新征程</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"></a></li></ul></div><div class="back-top"></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"50676","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"7e525e970a","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>