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

【Vue框架】基础语法练习(1)

其实更多知识点已经在Vue.js官网十分清楚了,大家也可以去官网进行更细节的学习

https://cn.vuejs.org/

说明:目前最新是Vue3版本的,但是Vue2已经深得人心,所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API,而Vue2是选项式API。还有就是目前并没有使用npm、pnpm、yarn等构建工具创建Vue,而是使用全局构建版的 Vue

<script src="https://unpkg.com/vue@3"></script>

目录

其实更多知识点已经在Vue.js官网十分清楚了,大家也可以去官网进行更细节的学习

1、基本用法

2、内容渲染

2.1 组合式

2.2 选项式

3、响应式

3.1 组合式

3.2 选项式

4、计算属性

5、属性绑定

6、JS表达式

7、条件渲染

8、事件绑定

9、列表渲染

10、双向绑定

11、双向绑定案例


1、基本用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app">{{msg}}<h1>{{web.title}}</h1><h1>{{web.url}}</h1></div>
</body>
<script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}=Vue  //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const web=Vue.reactive({   //创建一个响应式的数据对象web,里面包含title和url两个属性title:"HNUCM",url:"www.hnucm.edu.cn"})//返回数据return{msg:"success",web}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script><script>//什么是解构:从一个数组或者对戏那个中把值提取出来赋给新的变量//数组解构const number=[1,2,3]const [one,two,three]=numberconsole.log(one,two,three)//对象解构const person={name:"fanhuling",age:20}const {name,age}=personconsole.log(name,age)//函数参数解构function introduce({name,age}){console.log(`My name is ${name},I am ${age} years old`)}introduce(person)</script></html>

2、内容渲染

2.1 组合式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><!-- 文本插值表达式 --><p>{{username}}</p><p>{{age}}</p><p>{{desc}}</p><!-- v-html指令 :显示HTML内容 --><p v-html="desc"></p></div>
</body><script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}=Vue  //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const username="fanhuiling"const age=20const desc='<a href ="www.baidu.com">百度一下</a>'//返回数据return{username,age,desc}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script></html>

2.2 选项式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><!-- 文本插值表达式 --><p>{{username}}</p><p>{{age}}</p><p>{{desc}}</p><!-- v-html指令 :显示HTML内容 --><p v-html="desc"></p></div>
</body>
<script>const vm={data:function(){return{username:"fanhuiling",age:20,desc:'<a href="www.baidu.com">百度一下</a>'}}}const app=Vue.createApp(vm)app.mount('#app')
</script></html>

3、响应式

3.1 组合式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><button @click="incretement">增加</button><p>{{count}}</p><p>{{state.counter}}</p></div>
</body>
<script>const {createApp,reactive,ref}=Vue//ref  适用于基本类型(字符串、数字、布尔值)//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const count=ref(0)const state=ref({counter:0})//将ref 改为reactive后,counter会和count一起增加//箭头函数const incretement = ()=>{count.value++;state.counter++;}return{count,incretement,state}}}).mount('#app')//将Vue 应用程序挂载到app元素上</script></html>

3.2 选项式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><button onclick="incretement">增加</button><p>{{count}}</p></div>
</body>
<script>const vm={data:function(){//const count=Vue.ref(0)return{count:1}  },methods: {incretement(){this.count++;} }}const app=Vue.createApp(vm)app.mount('#app')
</script></html>

4、计算属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><h1>{{add()}}</h1><h1>{{add()}}</h1><h1>{{sum}}</h1><h1>{{sum}}</h1></div>
</body>
<script>const {createApp,reactive,ref,computed}=Vue//ref  适用于基本类型(字符串、数字、布尔值)//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const data = reactive({x:10,y:20})//无缓存的方法const add=()=>{console.log("add")return data.x+data.y;}//有缓存的方法//计算属性:根据依赖响应式数据变化来决定是否重新计算const sum=computed(()=>{console.log("sum")return data.x+data.y})return {data,add,sum}}}).mount('#app')//将Vue 应用程序挂载到app元素上</script></html>

5、属性绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><div :style="{width:h,height:h,backgroundColor:bgc}"></div></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const w=ref('500px');const h=ref('500px');const bgc=ref('red');// 返回数据return {w,h,bgc}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

 

6、JS表达式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>{{number+1}}</p><p>{{ok ?'True':'False'}}</p><!-- 翻转字符串:先以,分割为数组,数组翻转,然后在结合 --><p>{{msg.split('').reverse().join('')}}</p> <p :id="'list-'+id"></p><p>{{user.name}}</p></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const number=0;const ok=ref(true);const msg="ABC"const id=3const user={name:"fanhuiling"}return {number,ok,msg,id,user}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

7、条件渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><button @click="flag=!flag">开关</button><!-- v-if 当为false时,会从真实dom删除 --><p v-if="flag">请求成功,被v-if控制</p> <p v-show="flag">请求成功,被v-show控制</p><p v-if= "type === A">类型A</p><p v-else-if="type === B">类型B</p><p v-else>不是A和B</p></div>
</body><script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive,ref}=Vue  //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const flag=ref(true)const type=ref("C")return{flag,type}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script></html>

8、事件绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>count的值为:{{count}}</p><button v-on:click="addCount">+1</button><button @click="addCount">+1</button></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const count=ref(0)const addCount=()=>{count.value++;}// 返回数据return {count,addCount}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

9、列表渲染

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><!-- 添加数据 --><input type="text" v-model="name"/><button @click="addUser"> 添加</button><ul><li v-for="user in userlist">姓名:{{user.name}}</li><li v-for="user,index  in userlist" :key="user.id"><input type="checkbox"/>索引:{{index}}姓名:{{user.name}}</li></ul></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const userlist=reactive([{id:1,name:"Tom"},{id:2,name:"Jerry"},{id:3,name:"mary"}])const nextId=ref(4)const name=ref('')const addUser=()=>{userlist.unshift({id:nextId.value,name:name.value})name.value="";nextId.value++;}// 返回数据return {userlist,nextId,name,addUser}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

10、双向绑定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--  导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><input v-model="msg" placeholder="输入文本"/><p>{{msg}}</p></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const msg=ref(测试)// 返回数据return {msg}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

 

11、双向绑定案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><h3>文本框:{{data.text}}</h3><h3>单选框:{{data.radio}}</h3><h3>复选框:{{data.checkbox}}</h3><h3>下拉框:{{data.select}}</h3><h3>记住密码:{{data.remember}}</h3><!-- 单向数据绑定时,数据发生变化视图会自动更新,但是手动修改input的值,数据不会自动更新 -->单向数据绑定:<input type="text" :value="data.text"/><br><!-- 双向数据绑定,当数据发生变化时,视图会自动更新,手动修改input的值,数据也会自更新 -->双向数据绑定:<input type="text" v-model="data.text"/><br><br><br><input type="radio" v-model="data.radio" value="1">听音乐<input type="radio" v-model="data.radio" value="2">写代码<br><br><input type="checkbox" v-model="data.checkbox" value="a">听音乐<input type="checkbox" v-model="data.checkbox" value="b">写代码<input type="checkbox" v-model="data.checkbox" value="c">刷B站<br><br><select v-model="select"><option value="" >请选择</option><option value="A" >听音乐</option><option value="B" >写代码</option><option value="C" >刷B站</option></select><br><br><input type="checkbox" v-model="data.remember">记住密码</div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const data=reactive({text:'fanhuiling' ,//文本框radio:"",checkbox:[],select:"",remember:false //单个复选框--功能是记住密码})// 返回数据return {data}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>

相关文章:

【Vue框架】基础语法练习(1)

其实更多知识点已经在Vue.js官网十分清楚了&#xff0c;大家也可以去官网进行更细节的学习 https://cn.vuejs.org/ 说明&#xff1a;目前最新是Vue3版本的&#xff0c;但是Vue2已经深得人心&#xff0c;所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API&#xf…...

开源一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码

大家好&#xff0c;我是一颗甜苞谷&#xff0c;今天分享一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码。 前言 在当前的物流仓储行业&#xff0c;企业面临着信息化升级的迫切需求&#xff0c;但往往受限于高昂的软件采购和维护成本。现有的…...

开源一套基于若依的wms仓库管理系统,支持lodop和网页打印入库单、出库单的源码

大家好&#xff0c;我是一颗甜苞谷&#xff0c;今天分享一款基于若依的wms仓库管理系统&#xff0c;支持lodop和网页打印入库单、出库单的源码。 前言 在当今快速发展的商业环境中&#xff0c;库存管理对于企业来说至关重要。然而&#xff0c;许多企业仍然依赖于传统的、手动…...

HTML+JavaScript案例分享: 打造经典俄罗斯方块,详解实现全过程

在本文中,我们将深入探讨如何使用 JavaScript 实现经典的俄罗斯方块游戏。俄罗斯方块是一款广为人知的益智游戏,通过操纵各种形状的方块,使其在游戏区域内排列整齐,以消除完整的行来获得分数。 效果图如下: 一、游戏界面与布局 我们首先使用 HTML 和 CSS 来创建游戏的界面…...

【网页布局技术】项目五 使用CSS设置导航栏

《CSSDIV网页样式与布局案例教程》 徐琴 目录 任务一 制作简单纵向导航栏支撑知识点1&#xff0e;合理利用display:block属性2&#xff0e;利用margin-bottom设置间隔效果3&#xff0e;利用border设置特殊边框 任务二 制作简单横向导航栏任务三 制作带图片效果的横向导航栏任务…...

自学网络安全,网络安全入门学习路线,收藏这篇就够了

在当今高度数字化的时代&#xff0c;网络安全已经成为了一个至关重要的领域。随着网络威胁的不断演变和增长&#xff0c;对于专业网络安全人才的需求也在急剧上升。对于那些对网络安全充满热情并且渴望自学成才的人来说&#xff0c;制定一个系统、全面且高效的学习路线和规划是…...

React Query已过时?新一代请求工具横空出世

大家好&#xff01;今天我想和你们聊聊一个让我兴奋不已的话题 —— 分页列表请求策略。你们知道吗&#xff1f;这个策略真的帮了我大忙&#xff01;它不仅让我的代码更简洁&#xff0c;还大大提升了用户体验。说实话&#xff0c;每次用到这个功能&#xff0c;我都忍不住赞叹。…...

视频怎么进行格式转换?6款视频转换MP4格式的免费软件!

在数字时代&#xff0c;视频格式的多样性为我们提供了丰富的观看和编辑选择&#xff0c;但同时也带来了格式不兼容的困扰&#xff1a;MOV、AVI、WMV、MKV……这些格式多多少少都会遇到因不兼容而无法播放或下载分享的场景。当你想要将视频文件从一种格式转换为另一种格式&#…...

智能文档处理平台:免费体验智能化医疗信息提取

前提&#xff1a;医疗行业信息碎片化问题普遍&#xff0c;手工数据录入效率低且易错&#xff0c;导致数据管理难度大。本系统可帮助医疗机构在信息管理上迈向智能化&#xff0c;优化流程并提升效率。 系统概述&#xff1a; 思通数科推出的智能文档处理系统&#xff0c;专为解…...

Java 中 InputStream 的使用:try-with-resources 与传统方式的比较

在 Java 中&#xff0c;处理输入输出流时&#xff0c;确保资源的正确管理至关重要。特别是 InputStream 这样的流&#xff0c;一旦使用完成&#xff0c;必须正确关闭以释放资源。本文将对两种常见的资源管理方式进行比较&#xff1a;try-with-resources 语句和传统的 try-catch…...

【MATLAB源码-第271期】基于matlab的雷达发射回波模拟,包括匹配滤波,加窗旁瓣控制,以及MTD处理。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 雷达系统是一种广泛应用于目标探测和跟踪的技术&#xff0c;其核心在于发射电磁波并分析返回信号。本文将探讨雷达发射波形、回波信号的模拟、匹配滤波的过程、加窗控制旁瓣的策略以及慢时间MTD处理的整体系统框架。 一、雷…...

Linux系统编程——信号量

一、信号量的定义和原理 1、概念 原子操作&#xff1a;不可中断的一个或者一系列的操作&#xff0c;即一件事要么做要么不做。临界资源&#xff1a;不同进程能够看到的一份公共资源&#xff0c;一次只能被一个进程使用。PV操作&#xff1a;由于信号量只能进行两种操作等待和发…...

Oracle索引问题汇总

一、oracle 数据库TIMESTAMP 时间字段&#xff0c;设置索引后&#xff0c;通过该字段进行排序&#xff0c;索引排序不生效问题 1. 记录下在工作中遇到的一次索引问题 问题描述&#xff1a; 数据库&#xff1a;oracle&#xff1b; 日志记录表中的一个创建时间&#xff08;create…...

基于QT用工厂模式实现串口通信与网络通信激光器的控制

配置文件网络配置:IP+Port 串口配置:端口号+波特率 首先,我们需要创建一个配置文件 config.ini,内容如下: [SerialLaser] portName = COM1 baudRate = 9600[NetworkLaser] ipAddress = 192.168.1.1 port = 1234两类激光器的实现: #include <QCoreApplicat…...

【代码随想录Day58】图论Part09

dijkstra&#xff08;堆优化版&#xff09;精讲 题目链接/文章讲解&#xff1a;代码随想录 import java.util.*;class Edge {int to; // 邻接顶点int val; // 边的权重Edge(int to, int val) {this.to to;this.val val;} }class Pair<U, V> {public final U first; …...

_或者%关键字模糊匹配查出所有数据

1、问题 sql模糊匹配&#xff0c;如果页面输入_或者%&#xff0c;可以查出所有数据。 (1) SELECT * FROM test WHERE sfsc N and zdzwm like %%% (2) SELECT * FROM test WHERE sfsc N and zdzwm like %_% 2、解决方案 &#xff08;1&#xff09;mysql数据库 加转义字…...

【Python】转换得到图片的rgb565格式数据

使用方法&#xff1a;首先在代码同级目录创建input_images文件夹&#xff0c;然后将需要转换的图片放进去。 然后根据你的需要&#xff0c;修改代码最下面的crop_size、resize以及file_name。 最后点击运行&#xff0c;即可得到图片的rgb565格式数据 from PIL import Image, I…...

隨筆 20241024 Kafka中的ISR列表:分区副本的族谱

在分布式系统中&#xff0c;数据的一致性和可靠性至关重要。Apache Kafka作为一个强大的流处理平台&#xff0c;利用其分区和副本机制来确保这些特性。在Kafka中&#xff0c;ISR&#xff08;In-Sync Replicas&#xff09;列表是一个关键概念&#xff0c;它用来追踪与领导者副本…...

【python】爬虫

下载与批量下载 import requests #第三方库&#xff0c;没有下载的下载一下 pip install requests#爬虫下载图片 resrequests.get("url") print(res.content)#二进制字节流#写文件 with open("beauty.jpg","wb")as f:f.write(res.content)#批量…...

大语言模型数据类型与环境安装(llama3模型)

文章目录 前言一、代码获取一、环境安装二、大语言模型数据类型1、基本文本指令数据类型2、数学指令数据类型3、几何图形指令数据类型4、多模态指令数据类型5、翻译指令数据类型三、vscode配置四、相关知识内容1、理解softmax内容2、torch相关函数nn.Embedding函数torch.nn.fun…...

JS:列表操作

目录 1、列表截取2、列表数据包含3、列表筛选4、极值操作5、获取列表对象某一属性构建列表6、获取元素在列表中的下标7、列表去重 1、列表截取 列表截取&#xff1a;List.slice(start, end)&#xff0c;左闭右开 var dataList [1,2,3,4,5,6] var resultList dataList.slice(0…...

ECharts 折线图 / 柱状图 ,通用配置标注示例

option {tooltip: { // 关于提示框&#xff08;tooltip&#xff09;的配置// 显示某一个去掉trigger: axis&#xff0c;显示一起显示 trigger: axistrigger: axis},legend: {top: bottom, // 显示标注位置// textStyle: {// color: "#000", // 设置图例文字颜…...

统计数据集的TXT、XML及JSON标注文件中各类别/每个标签的数量

在计算机视觉和深度学习领域&#xff0c;标注文件是模型训练的重要组成部分。无论是图像分类、目标检测还是图像分割&#xff0c;正确的标注能够显著提升模型的性能。在实际应用中&#xff0c;我们需要快速了解每个类别的样本数量&#xff0c;以便进行数据分析、平衡类别分布或…...

Facebook登录客户追踪:了解用户访问路径,优化客户体验

随着数字化转型的不断加速&#xff0c;精准的客户数据收集和用户行为追踪成为企业提升用户体验和优化业务流程的关键。Facebook登录作为一种便捷的第三方登录方式&#xff0c;已经被广泛应用于各类网站和应用中。它不仅简化了用户的注册与登录流程&#xff0c;还帮助企业获得用…...

NUUO摄像头 debugging_center_utils 远程命令执行漏洞复现

0x01 产品描述&#xff1a; ‌ NUUO摄像头‌是由中国台湾NUUO公司生产的一款网络视频录像机&#xff08;Network Video Recorder&#xff0c;简称NVR&#xff09;&#xff0c;广泛应用于零售、交通、教育、政府和银行等多个领域。它能够同时管理多个IP摄像头&#xff0c…...

Nginx 的讲解和案例示范

一、基础理解 1.1 Nginx 是什么&#xff1f; Nginx是一个高性能的 Web 服务器和反向代理服务器&#xff0c;同时也可以作为邮件代理服务器。Nginx 以其高并发处理能力、低内存消耗和丰富的功能受到广泛欢迎。 主要功能&#xff1a; 静态资源服务&#xff1a;高效地提供 HTM…...

微信小程序元素水平居中或垂直居中

最近在做一个微信小程序的项目&#xff0c;其中涉及到css样式实现将<navigator>标签内的图片和文本元素垂直排列&#xff0c;并水平居中。在尝试实现的过程中&#xff0c;将元素在标签内的所有排列情况都顺带实现了。上代码&#xff1a; index.wxml <navigator url&…...

ClickHouse 神助攻:纽约城市公共交通管理(MTA)数据应用挑战赛

本文字数&#xff1a;13198&#xff1b;估计阅读时间&#xff1a;33 分钟 作者&#xff1a;The PME Team 本文在公众号【ClickHouseInc】首发 我们一向对开放数据挑战充满热情&#xff0c;所以当发现 MTA&#xff08;城市交通管理局&#xff09;在其官网发起了这样的挑战时&…...

ELK + Filebeat + Spring Boot:日志分析入门与实践(二)

目录 一、环境 1.1 ELKF环境 1.2 版本 1.3 流程 二、Filebeat安装 2.1 安装 2.2 新增配置采集日志 三、logstash 配置 3.1 配置输出日志到es 3.2 Grok 日志格式解析 3.2 启动 logstash ​3.3 启动项目查看索引 一、环境 1.1 ELKF环境 springboot项目&#xff1a;w…...

使用 Docker Compose 将数据版 LobeChat 服务端部署

LobeChat 是一个基于 TypeScript 的开源聊天机器人项目&#xff0c;支持本地部署和接入多个大语言模型。本文介绍如何使用 Docker Compose 将 LobeChat 服务端及其数据库部署到生产环境&#xff0c;让您拥有一个私有化的、可定制的 AI 聊天助手。 一、部署前准备 服务器&…...

做ppt选小图案的网站/2021年中国关键词

原文地址 你是否曾经也有过这样的问题&#xff1a; 用VS的时候&#xff0c;有时会用到一些非自带的库&#xff0c;例如WTL、Boost、DX等&#xff0c;每次需要用到时都要在项目属性里添加相应的include目录&#xff0c;久而久之觉得有点麻烦。是否有解决办法呢&#xff1f; 于是…...

徐州做网站的哪个好/公司网站设计模板

阅读文本大概需要 3 分钟。清楚地认识自己最近几天朋友圈被程序员因同事没写代码注释而惨遭枪击&#xff0c;刷屏了&#xff0c;好几个技术圈的大号都转发了&#xff0c;并且都是 10w 的阅读量。那篇英文原文根本没有提及动机是因为没写代码注释&#xff0c;全是作者自己的猜想…...

网站构建/营销型网站的分类不包含

作为开发人员&#xff0c;每个人都会遇到有关在生产服务器上启用GC日志的问题。 建议在生产服务器上启用GC登录吗&#xff1f; 是的&#xff0c;建议在生产服务器上启用GC登录 。 通过在JVM上启用GC登录的开销很小。 根据标准性能评估公司&#xff08;SPEC&#xff09; &#x…...

南开天津网站建设/引流推广效果好的app

POE 在Quora上非常受欢迎的手机聊天机器人Poe App已经集成ChatGPT助手&#xff01;除了最初集成的三个聊天机器人Sage、Claude和Dragonfly外&#xff0c;Poe现在还加入了第四位ChatGPT。由于使用了ChatGPT API&#xff0c;因此Poe拥有真正的ChatGPT。 现在更是第一批集成了GP…...

室内设计联盟模型下载/seo推广优化

近期&#xff0c;JetBrains发布了其旗舰产品IntelliJ IDEA的2018.2版本。新版本支持即将推出的Java 11、断点意图&#xff08;Breakpoints Intentions&#xff09;、MacBook的Touch Bar等特性&#xff0c;并改进了Spring Boot、Scala和Docker插件。\\Java\\IntelliJ IDEA 2018.…...

合肥新站开发区管委会网站/武汉seo论坛

使用技术 LR.APP是基于uni-app开发的多端APP/小程序系统&#xff0c;设计理念是解决多端开发问题&#xff0c;使用时&#xff0c;开发者仅需一套代码&#xff0c;即可编译到iOS、Android、H5、小程序等多个平台。 LR.APP封装了跨端兼容的组件和api&#xff0c;如果你不熟悉un…...