Vue——day07之条件渲染、列表渲染以及监测数据

目录

1.template标签

2.条件渲染

3.列表渲染

4.v-for中的key的作用以及原理

5.列表过滤

placeholder

前端空字符串

使用数据监视watch实现

使用计算属性实现

6.列表排序

7.Vue更新数据检测失败

原因

总结

1.template标签

        template标签是Vue.js中的一个特殊元素，它的作用是在渲染过程中作为一个容器，可以承载多个子元素，但不会在最终渲染的DOM中显示。它是Vue.js提供的一种逻辑组织的方式。

template标签可以用来：

  1. 组织代码：当需要在一个组件或者模板中定义多个子元素时，可以使用template标签将它们包裹起来，提高代码的可读性和组织结构。

  2. 条件渲染：template标签可以作为条件渲染的容器，根据条件展示不同的内容。

  3. 循环渲染：template标签可以配合v-for指令，循环渲染一段代码片段多次。

  4. 提高性能：当组件需要有多个根元素时，可以使用template标签作为一个根元素的容器，避免在渲染的DOM中增加额外的层级。

        总之，template标签在Vue.js中起到了一个逻辑组织和代码承载的作用，可以提高代码的可读性和组织结构，并且在渲染过程中不会在最终的DOM中显示。

2.条件渲染

在Vue中，条件渲染是指根据某个条件来决定是否渲染或展示某个元素或组件。Vue提供了两种常用的条件渲染指令：v-show和v-if。

  1. v-show： v-show是一种基于CSS的条件渲染指令。使用v-show时，元素会始终渲染在DOM中，只是通过CSS的display属性来控制元素的显示和隐藏。

示例：

<div v-show="isVisible">This is a visible element</div>

在上述示例中，当isVisible为true时，元素会显示出来；当isVisible为false时，元素会隐藏起来。

v-show适用于需要频繁切换元素的显示和隐藏的场景，因为元素始终存在于DOM中，切换过程更加高效。

  1. v-if： v-if是一种基于DOM的条件渲染指令。使用v-if时，元素会在条件为true时渲染到DOM中，条件为false时，元素会从DOM中移除。

示例：

<div v-if="isVisible">This is a visible element</div>

在上述示例中，当isVisible为true时，元素会被渲染到DOM中；当isVisible为false时，元素会从DOM中移除。

v-if适用于切换频率较低的场景，因为每次条件变化时，DOM的创建和销毁会有额外的性能开销。

可以使用v-else-if和v-else来串联多个条件。

示例：

<div v-if="condition1">Condition 1 is true</div>
<div v-else-if="condition2">Condition 2 is true</div>
<div v-else>Neither condition is true</div>

在上述示例中，根据条件的不同，会根据条件渲染不同的元素。

总结： v-show通过CSS的display属性控制元素的显示和隐藏，适用于切换频率较高的场景； v-if通过DOM的创建和销毁来控制元素的显示和隐藏，适用于切换频率较低的场景。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n加一</button><button @click="n--">点我n减一</button><!-- 使用v-show作条件渲染 --><!-- v-show="true":这里为true的时候显示，false的时候不显示 --><h1 v-show="false">欢迎来到{{name}}的博客</h1><h1 v-show="1 === 3">欢迎来到{{name}}的博客</h1><h1 v-show="isTrue">欢迎来到{{name}}的博客</h1><br><hr><br><!-- 使用v-if作条件渲染 --><h1 v-if="false">欢迎来到{{name}}的博客</h1><h1 v-if="1 === 1">欢迎来到{{name}}的博客</h1><br><hr><br><!-- 切换比较频繁的时候实用v-show --><div v-show="n === 1">机器学习</div><div v-show="n === 2">深度学习</div><div v-show="n === 3">人工智能</div><hr><!-- v-else和v-else-if这几个div要紧紧的连接在一起，中间不能被打断 --><div v-if="n === 1">机器学习</div><div v-else-if="n === 2">深度学习</div><div v-else-if="n === 3">人工智能</div><div v-else>哦也</div><br><hr><br><!-- 使用此标签可以不修改DOM结构 --><!-- 但是只能和v-if配合使用，不能和v-show配合使用 --><template v-if="n === 1"><h2>你好</h2><h2>CSDN</h2><h2>成都</h2></template></div></body><script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:'#root',data:{name:'WenJGo',isTrue:false,n:0}});
</script>
</html>

页面效果如下图所示：

3.列表渲染

在Vue中，列表渲染是一种常用的功能，用于根据数组或对象的数据生成对应的列表。Vue提供了v-for指令来实现列表渲染。

使用v-for指令，可以通过遍历数组或对象的方式，将每个元素都渲染为对应的DOM元素。

  1. 遍历数组： 例如，有一个名为items的数组，我们可以使用v-for指令来遍历它并渲染为列表：
<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

在上述示例中，v-for="item in items"表示遍历items数组，使用item来表示每个数组元素。:key="item.id"是为了给每个列表项提供唯一的标识符，用于优化性能。{{ item.name }}表示渲染每个数组元素的name属性。

  1. 遍历对象： 除了遍历数组，我们也可以使用v-for指令来遍历对象的属性。
<ul><li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li>
</ul>

在上述示例中，(value, key) in obj表示遍历obj对象的属性，使用value和key来表示每个属性的值和键。:key="key"用于提供唯一的标识符。{{ key }}: {{ value }}表示渲染每个属性的键和值。

另外，v-for指令还提供了索引值index，可以在遍历过程中使用。

<ul><li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>
</ul>

在上述示例中，index表示当前数组元素的索引值。

总结： 通过v-for指令，我们可以方便地遍历数组和对象，将它们渲染为对应的列表。在处理列表渲染时，我们还可以使用:key来提供唯一的标识符，优化性能。

总体示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h2>人员列表</h2><!-- 遍历数组 --><ul><!-- :key="per.id"让每一个li都有唯一的标识 --><!-- <li v-for="per in personList" :key="per.id"> --><li v-for="(per,index) in personList" :key="index">{{index}}==>{{per.name}}-{{per.age}}</li></ul><br><hr><br><!-- 遍历对象 --><h2>汽车信息</h2><ul><li v-for="(value,key) in car" :key="key">{{key}}：{{value}}</li></ul><br><hr><br><!-- 下面的都用得少 --><!-- 遍历字符串 --><h2>字符串信息</h2><ul><li v-for="(char,index) in str" :key="key">{{index}}：{{char}}</li></ul><br><hr><br><!-- 遍历指定次数 --><h2>遍历指定次数</h2><ul><li v-for="(times,index) in 5" :key="index" >{{index}}：{{times}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{// 数组类型personList:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:28},{id:'003',name:'王五',age:22}],// 对象类型car:{name:'红旗',price:'1000万',color:'黑色'},// 字符串类型str:'hello'}});
</script>
</html>

4.v-for中的key的作用以及原理

        在使用Vue的v-for指令时，可以通过key属性为每个列表项提供一个唯一的标识符。这个key的作用是为Vue跟踪每个列表项的身份，以便在重新渲染列表时，能够高效地更新和重用已有的DOM元素。

        当Vue进行列表渲染时，会根据列表数据生成一组对应的DOM元素。当数据发生变化，比如列表项的顺序发生变化、某个列表项被添加或删除时，Vue会基于新的数据重新渲染DOM。这时，Vue会根据每个列表项的key属性来判断该项是否需要重新渲染。

具体原理如下：

  1. Vue会根据key属性对每个列表项进行标记，并创建一个列表项到key的映射关系。

  2. 当数据变化时，Vue会根据新的数据重新计算列表项的顺序。

  3. Vue会比较新的列表项顺序和旧的映射关系，找出需要被移动、添加或删除的列表项。

  4. 对于需要被移动的列表项，Vue会将其从旧的位置移动到新的位置，而不是销毁和重新创建。

  5. 对于需要被添加的列表项，Vue会根据key属性查找到对应的旧的DOM元素，如果找到了，就将其移动到正确的位置；如果没有找到，才会创建新的DOM元素。

  6. 对于需要被删除的列表项，Vue会将其从DOM中移除，并在内部进行一些清理工作。

        通过使用key属性，Vue能够在列表项发生变化时，快速识别出需要做哪些DOM操作，从而提高性能、减少重绘和重排的开销。

        采用index作为key在破坏了原有顺序的情况下(比如插入到最前面)会发生问题，如下图尚硅谷的图片示例所示：

         而采用数据本身的id作为key则不会出现上述的问题，如下图尚硅谷的图片所示：
 

5.列表过滤

placeholder

        placeholder属性用于在输入字段中显示提示文本，当输入字段为空时显示。它用于提供关于所需输入的示例或说明。当用户开始输入时，placeholder文本会自动清除或替换为实际输入的内容。这个属性可以帮助用户更好地理解所需输入的格式或类型。

前端空字符串

        一个字符串里面一个''空字符串的索引是0，也就是说一个字符串里必然有一个空字符串

使用数据监视watch实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><!-- 遍历数组 --><ul><li v-for="(per,index) in filterPersions" :key="index">{{index}}==>{{per.name}}-{{per.age}}-{{per.sex}}</li></ul><br><hr><br></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{keyWord:'',// 数组类型personList:[{id:'001',name:'马冬梅',age:18,sex:'女'},{id:'002',name:'周冬雨',age:19,sex:'女'},{id:'003',name:'周杰伦',age:22,sex:'男'},{id:'004',name:'温兆伦',age:32,sex:'男'}],filterPersions :[]},watch:{keyWord:{// 加上这个会直接搜索一遍空串，由于都携带空串所以都有了immediate:true,handler(newValue){// console.log('keyWord改为:' + newValue)this.filterPersions = this.personList.filter((person)=>{return person.name.indexOf(newValue) !== -1})}}}});
</script>
</html>

使用计算属性实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><!-- 遍历数组 --><ul><li v-for="(per,index) in filterPersons" :key="index">{{index}}==>{{per.name}}-{{per.age}}-{{per.sex}}</li></ul><br><hr><br></div></body><script type="text/javascript">Vue.config.productionTip=false// 用computed实现new Vue({el:'#root',data:{keyWord:'',// 数组类型personList:[{id:'001',name:'马冬梅',age:18,sex:'女'},{id:'002',name:'周冬雨',age:19,sex:'女'},{id:'003',name:'周杰伦',age:22,sex:'男'},{id:'004',name:'温兆伦',age:32,sex:'男'}]},computed:{filterPersons(){return this.personList.filter((person)=>{return person.name.indexOf(this.keyWord) !== -1})}}});
</script>
</html>

6.列表排序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><button @click="sortType = 2">年龄升序</button><button @click="sortType = 1">年龄降序</button><button @click="sortType = 0">原顺序</button><!-- 遍历数组 --><ul><li v-for="(per,index) in filterPersons" :key="index">{{index}}==>{{per.name}}-{{per.age}}-{{per.sex}}</li></ul><br><hr><br></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{keyWord:'',// 0原顺序,1降序,2升序sortType:0,// 数组类型personList:[{id:'001',name:'马冬梅',age:28,sex:'女'},{id:'002',name:'周冬雨',age:19,sex:'女'},{id:'003',name:'周杰伦',age:22,sex:'男'},{id:'004',name:'温兆伦',age:32,sex:'男'}]},computed:{filterPersons(){// 获取到过滤到的数组const filArr = this.personList.filter((person)=>{return person.name.indexOf(this.keyWord) !== -1})// 根据排序类型来排序if(this.sortType !== 0){filArr.sort((p1,p2)=>{return this.sortType === 1?p2.age-p1.age:p1.age-p2.age})}return filArr}}});
</script>
</html>

效果如下：

7.Vue更新数据检测失败

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><body><div id="root"><h2>人员列表</h2><button @click="updateMaDM">更新马冬梅信息</button><ul><li v-for="(per,index) in personList" :key="per.id">{{index}}==>{{per.name}}-{{per.age}}-{{per.sex}}</li></ul><br><hr><br></div></body><script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:'#root',data:{// 数组类型personList:[{id:'001',name:'马冬梅',age:28,sex:'女'},{id:'002',name:'周冬雨',age:19,sex:'女'},{id:'003',name:'周杰伦',age:22,sex:'男'},{id:'004',name:'温兆伦',age:32,sex:'男'}]},methods: {updateMaDM(){
/*                 this.personList[0].name = '马什么梅'this.personList[0].age = 50this.personList[0].sex = '男' */// 出现BUG！！！wdfthis.personList[0] = {id:'001',name:'马什么梅',age:58,sex:'男'}}},});
</script>
</html>

这段代码更新的时候发现更新不了。

原因

        Vue的响应式系统是基于 JavaScript 的 getter 和 setter 实现的。当 Vue 实例被创建时，Vue 会将 data 中的所有属性转化为 getter 和 setter，以便在属性被访问和修改时能够触发依赖追踪并进行相关的更新。

        然而，在我们        的代码中，直接修改了数组中的元素，而并没有调用 Vue 提供的响应式方法来触发更新。

        要使 Vue 能够检测到对数组的更改，可以使用 Vue 提供的方法来进行操作。例如，对于这段代码，我们可以使用 Vue.set 或 Vue.$set 方法来修改数组中的元素：

Vue.set(this.personList, 0, {id: '001',name: '马什么梅',age: 58,sex: '男'
});// 或者使用 Vue.$set 方法：
this.$set(this.personList, 0, {id: '001',name: '马什么梅',age: 58,sex: '男'
});

        这样做可以通知 Vue 响应式系统进行相应的更新，使得 Vue 能够检测到对数组的更改并进行相应的重新渲染。

总结

        条件渲染有两种方法：v-if和v-show。

        v-if的写法是v-if="表达式"，也可以和v-else-if、v-else一起使用。v-if适用于切换频率较低的场景。它的特点是不展示的DOM元素直接被移除。

        v-show的写法是v-show="表达式"，它适用于切换频率较高的场景。v-show的特点是不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。

        需要注意的是，使用v-if的时候，元素可能无法获取到，而使用v-show则一定可以获取到。

v-for指令
        1. 用于展示列表数据
        2. 语法:v-for="(item,index) in xxx" :key="yyy"
        3. 可遍历:数组、对象、字符串（用的很少）、指定次数（用的很少）

        key在虚拟DOM中的作用是为了标识和追踪每个DOM元素的身份。当数据发生变化时，Vue或React会根据新的数据生成新的虚拟DOM，并通过比较新旧虚拟DOM的差异来更新页面的真实DOM。

具体的对比规则如下：

  1. 如果在新的虚拟DOM中找到了与旧的虚拟DOM相同的key，那么会判断其内容是否有变化。如果内容没有变化，就直接使用之前的真实DOM；如果内容有变化，就生成一个新的真实DOM并替换掉页面中之前的真实DOM。
  2. 如果在新的虚拟DOM中找不到与旧的虚拟DOM相同的key，就会创建一个新的真实DOM，并将其渲染到页面上。

使用index作为key可能会引发一些问题：

  1. 如果对数据进行逆序添加、逆序删除等破坏顺序的操作，会导致不必要的真实DOM更新，从而降低性能。
  2. 如果列表中还包含输入类的DOM，使用index作为key可能会导致错误的DOM更新，从而导致界面问题。

        在开发中，应该根据具体情况选择合适的key。最好使用每条数据的唯一标识作为key，比如ID、手机号、身份证号、学号等唯一值。如果仅用于渲染列表展示，并且没有对数据进行逆序添加、逆序删除等破坏顺序的操作，使用index作为key是没有问题的。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/53028.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

新型蜜罐有哪些？未来方向如何？

新型蜜罐有哪些？未来方向如何？

前言&#xff1a;技术发展为时代带来变革&#xff0c;同时技术创新性对蜜罐产生推动力。 一、新型蜜罐的诞生 技术发展为时代带来变革&#xff0c;同时技术创新性对蜜罐产生推动力&#xff0c;通过借鉴不同技术思想、方法&#xff0c;与其它技术结合形成优势互补&#xff0c;…
阅读更多...
MC药水酿造

MC药水酿造

药水酿造（Brewing）是在酿造台中往水瓶里加入各种材料而制作药水、喷溅药水和滞留药水的过程。 将1-3个水瓶或药水放入酿造台界面底部的药水槽中，将材料放入顶部的材料槽中，再在燃料槽里放置烈焰粉，便可开始酿造。 药水的酿造一般从水瓶开始，水瓶可以用玻璃瓶从水源或
阅读更多...
探讨抗晃电应用技术在煤化工生产中的运用

探讨抗晃电应用技术在煤化工生产中的运用

摘要&#xff1a;当前&#xff0c;电力供应面临的压力日益增大&#xff0c;用户群体的多样性也日益复杂。在电网运行中&#xff0c;电压波动&#xff08;晃电&#xff09;现象频繁发生。研究指出&#xff0c;电压波动的原因多种多样&#xff0c;包括自然因素、设备故障以及人为…
阅读更多...
EXO项目StandardNode；max_generate_tokens；buffered_token_output；is_finished；

EXO项目StandardNode；max_generate_tokens；buffered_token_output；is_finished；

目录 StandardNode max_generate_tokens buffered_token_output 构造函数参数 类属性 总结 is_finished max_generate_tokens self.buffered_token_output StandardNode _process_tensor result是一个np.ndarray ，result.size == 1是什么意思 StandardNode max_g…
阅读更多...
kaggle平台free使用GPU

kaggle平台free使用GPU

1、注册 请保证在【科学上网】条件下进入如下操作&#xff0c;只有在注册账户和手机号验证时需要。 step1&#xff1a;注册账户 进入kaggle官网&#xff1a;https://www.kaggle.com/&#xff0c;点击右上角【Register】进入注册页面 最好选择使用邮箱注册&#xff08;&#…
阅读更多...
【例003】利用MATLAB绘制有趣平面图形

【例003】利用MATLAB绘制有趣平面图形

题目&#xff1a; 用 ezplot 画出由方程 sin ⁡ ( x 2 m y 2 1000 ) cos ⁡ ( x y ) \sin(x^2\frac{my^2}{1000})\cos(xy) sin(x21000my2​)cos(xy) 确定隐函数的图形。 求解&#xff1a; 我们分别取m为100&#xff0c;1000,10000不同的值&#xff0c;绘制不同情况下的图…
阅读更多...
3.1 线性结构

3.1 线性结构

令序列X、Y、Z的每个元素按顺序进栈&#xff0c;且每个元素进栈.出栈各一次&#xff0c;则不可能得到出栈序列&#xff08; &#xff09;。 A. XYZ B. XZY C. ZXY D. YZX 正确答案是 C。 解析 ZXY不可能得到这个序列&#xff0c;因为当Z最先出栈&#xff0c;说明X、Y已经入栈&a…
阅读更多...
MySQL-进阶篇-锁（全局锁、表级锁、行级锁）

MySQL-进阶篇-锁（全局锁、表级锁、行级锁）

文章目录 1. 锁概述2. 全局锁2.1 介绍2.2 数据备份2.3 使用全局锁造成的问题 3. 表级锁3.1 表锁3.1.1 语法3.1.2 读锁3.1.3 写锁3.1.4 读锁和写锁的区别 3.2 元数据锁&#xff08;Meta Data Lock&#xff0c;MDL&#xff09;3.3 意向锁3.3.1 案例引入3.3.2 意向锁的分类 4. 行级…
阅读更多...
推荐使用阿贝云免费云服务器、免费虚拟主机

推荐使用阿贝云免费云服务器、免费虚拟主机

官网地址&#xff1a;https://www.abeiyun.com 阿贝云的免费云服务器简直是我在互联网世界里的一大惊喜发现&#xff01; 首先&#xff0c;它的性能表现十分出色。服务器的响应速度超快&#xff0c;无论是访问网站还是运行应用&#xff0c;都能迅速给出反馈&#xff0c;几乎没…
阅读更多...
蒙特卡罗方法算π

蒙特卡罗方法算π

蒙特卡罗法就是在一块区域里撒随机点&#xff0c;看落在指定区域的点数 基于以下关系式&#xff0c;可以计算π&#xff0c;MATLAB代码如下 N10^7; xunifrnd(0,1,[1,N]); yunifrnd(0,1,[1,N]); frequencysum(y<1./(1x.^2)); area4*frequency/N
阅读更多...
day-45 全排列 II

day-45 全排列 II

思路 与上一题思路相同&#xff0c;代码也基本一致&#xff0c;只是需要全排列不重复 解题过程 可以利用Arrays.sort()函数将nums数组进行排序&#xff0c;这样相同的全排列数字的位置也会相同&#xff0c;可以利用List的contains()函数进行判断&#xff0c;如果不重复则加入答…
阅读更多...
Java面试自我介绍

Java面试自我介绍

持续更新中 模块序号目录链接前言介绍1前言地址2介绍地址基础知识3计算机网络地址4操作系统地址5Java基础地址6Java并发地址7Java虚拟机地址中间件8Mysql地址9Redis地址10Elasticsearch地址11RabbitMQ地址12RocketMQ地址框架13分布式系统地址14MyBatis地址15Dubbo地址16Spring地…
阅读更多...
【fastapi】fastapi的hello world

【fastapi】fastapi的hello world

新建这样的目录结构 main.py的代码如下 from fastapi import FastAPI from fastapi.templating import Jinja2Templatesapp FastAPI()# 初始化 Jinja2 模板引擎 templates Jinja2Templates(directory"templates")app.get("/") async def home():contex…
阅读更多...
网站建设完成后， 做seo必须知道的专业知识之--网络爬虫

网站建设完成后， 做seo必须知道的专业知识之--网络爬虫

网络爬虫&#xff0c;也称为网络蜘蛛或网络机器人&#xff0c;是一种能够自动浏览和采集互联网信息的程序。在大数据时代&#xff0c;网络爬虫技术在信息采集领域发挥着重要作用&#xff0c;通过自动化方式高效获取数据&#xff0c;广泛应用于搜索引擎、数据分析、金融数据采集…
阅读更多...
海外新闻稿发布：企业如何充分利用数字化媒体进行

海外新闻稿发布：企业如何充分利用数字化媒体进行

在全球数字化进程加速的时代&#xff0c;企业要在激烈的国际市场中脱颖而出&#xff0c;利用数字化媒体进行海外新闻稿发布是一个不可或缺的战略。精确的策略和有效的执行能够帮助企业获得更高的曝光度和市场份额。以下将从多个角度探讨如何充分利用数字化媒体进行海外新闻稿发…
阅读更多...
[vue] jszip html-docx-js file-saver 图片，纯文本 ，打包压缩，下载跨域问题

[vue] jszip html-docx-js file-saver 图片，纯文本 ，打包压缩，下载跨域问题

npm install jszip file-saverimport JSZip from jszip; import FileSaver from file-saver;JSZip 创建JSZip实例&#xff1a; const zip new JSZip();创建文件&#xff1a;支持导出纯文本 zip.file("hello.txt", "Hello World\n");创建文件夹&#xf…
阅读更多...
pm2 + linux + nginx

pm2 + linux + nginx

pm2 pm2是一个用于管理node项目的工具 前言 有如下两个文件 index.js const express require("express"); const app express(); const port 9999;app.get("/index", (req, res) > {res.json({code:200,msg:"songzx001"}) });app.lis…
阅读更多...
Web3常见概念

Web3常见概念

Layer0 到 Layer3 的对比差异 层级定义主要功能举例Layer0基础设施层 提供区块链底层技术和基础设施 Avalanche、Cosmos、Horizen、PolkadotLayer1区块链层提供主要区块链协议和功能&#xff0c;处理交易和智能合约以太坊、Polkadot、EOSLayer2协议增强层优化交易速度和费用&a…
阅读更多...
【单片机原理及应用】实验： 8位数码显示器

【单片机原理及应用】实验： 8位数码显示器

目录 一、实验目的 二、实验内容 三、实验步骤 四、记录与处理 五、思考 六、成果文件提取链接 一、实验目的 学习8位数码管串行扩展原理&#xff0c;掌握74HC595与动态显示编程方法。 二、实验内容 【参照图表】 &#xff08;1&#xff09;创建一个包含80C51固件&#x…
阅读更多...
【网络】WebSocket协议详解

【网络】WebSocket协议详解

WebSocket协议详解 一 、WebSocket 诞生背景二、WebSocket 特点三、WebSocket 的握手环节四、WebSokect 的数据格式1、 第一个字节2、第二个字节3、Masking-key4、playload Data5、一些注意细节 WebSocket 的官方文档 WebSocket 的中文文档(非官方) 一 、WebSocket 诞生背景 在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023