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

【Vue】组件基础

目录

🚀 Vue 非单文件组件 和 单文件组件 的区别与实践对比

✨ 引言

一、非单文件组件

1. 基本使用

2. 注意:

3. 组件的嵌套

4. 关于VueComponent:

5. 一个重要的内置关系(有点难理解)

二、 单文件组件

那就期待下一章!!!总结不易~ 本章节对我有很大收获 希望对你也是!!!!


🚀 Vue 非单文件组件 和 单文件组件 的区别与实践对比

✨ 引言

在学习 Vue 的过程中,我们经常会接触到两种不同的写法:一种是在 HTML 中用 <script> 标签直接使用 Vue,另一种则是用 .vue 文件编写的单文件组件。那么它们有什么区别?我们又该在什么场景下选择哪种方式呢?

一、非单文件组件

1. 基本使用

Vue中使用组件的三大步骤:

              一、定义组件(创建组件)

              二、注册组件

              三、使用组件(写组件标签)

   

1、如何定义一个组件?

                使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;

                区别如下:

                    1.el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。

                    2.data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。

                备注:使用template可以配置组件结构。

   

2、如何注册组件?

                  1.局部注册:靠new Vue的时候传入components选项

                  2.全局注册:靠Vue.component('组件名',组件)

   

3、编写组件标签:

                  <school></school>

  <div id="root"><!-- 第三步:编写组件标签 --><h1>{{msg}}</h1><hr><hello></hello><school></school><hr><student></student><student></student><div><hello></hello></div></div><script>// 第一步:1. 创建组件// 创建school组件 跟vm几乎一模一样 但是还是有部分不同 里面的配置选项 vm怎么写 组件就怎么写// 组件 不需要指定为谁服务 也就是不用写el 组件就是一块砖 哪里需要哪里搬const school = Vue.extend({template: `<div><h2>学校名称:{{schoolName}}</h2><h2>学校地址:{{address}}</h2></div>`,// el: '#root',// 组件定义时,一定不要写el配置项 因为最终所有的组件都要被一个vm管理 由vm决定服务于哪个容器data() {return {schoolName: '武汉传媒学院',address: '湖北武汉',}}})// 创建student组件const student = Vue.extend({template: `<div><h2>学生名称:{{studentName}}</h2><h2>学生年龄:{{age}}</h2></div>`,data() {return {studentName: '张三',age: '18'}}})// 第一步: 创建hello组件const hello = Vue.extend({template: `<div>你好啊 我是{{name}}</div>`,data() {return {name: 'hha'}}})// 第二步 : 全局注册组件// 第一个参数: 组件的名字, 第二个参数: 组件在哪Vue.component('hello', hello)// 第二步:创建vmnew Vue({el: '#root',data: {msg: '你好啊'},components: {school,student}})// function data() {//   return {//     a: 1,//     b: 2//   }// }// const x1 = data()// const x2 = data()// let data = {//   a: 1,//   b: 2// }// const x1 = data// const x2 = data// 创建 vm// const vm = new Vue({//   el: '#root',//   data: {//     schoolName: '武汉传媒学院',//     address: '湖北武汉',//     studentName: '张三',//     age: '18'//   }// })
</script>

2. 注意:

1.关于组件名:

       一个单词组成:

  • 第一种写法(首字母小写):school
  • 第二种写法(首字母大写):School

       多个单词组成:

  • 第一种写法(kebab-case命名):my-school
  • 第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)

        备注:

  • 组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
  • 可以使用name配置项指定组件在开发者工具中呈现的名字。

     

2.关于组件标签:

  • 第一种写法:<school></school>
  • 第二种写法:<school/>
  • 备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。

     

3.一个简写方式:

  •   const school = Vue.extend(options) 可简写为:const school = options
  <div id="root"><h2>欢迎来到{{msg}}学习</h2><school></school></div><script>// 定义组件// 简写const school = {name: 'wshihha',template: `<div><h4>学校名称:{{schoolName}}</h4> <br><h4>学校地址:{{address}}</h4>  </div>`,data() {return {schoolName: '武汉传媒学院',address: '湖北武汉'}}}// const school = Vue.extend({//   name: 'wshihha',//   template: `//     <div>//       <h4>学校名称:{{schoolName}}</h4> <br>//       <h4>学校地址:{{address}}</h4>  //     </div>//   `,//   data() {//     return {//       schoolName: '武汉传媒学院',//       address: '湖北武汉'//     }//   }// })new Vue({el: '#root',data: {msg: '武汉传媒学院'},components: {school}})
</script>

3. 组件的嵌套

  • 就是将单个组件全部放入一个app组件内
  // 定义student组件const student = {template: `<div><h4>学生名称:{{studentName}}</h4><h4>学生年龄:{{age}}</h4></div>`,data() {return {studentName: 'wshha',age: 18}}}// 定义school组件const school = {template: `<div><h4>学校名称:{{schoolName}}</h4>  <h4>学校地址:{{address}}</h4>  <student></student></div>`,data() {return {schoolName: '武汉传媒学院',address: '湖北武汉'}},// 注册组件(局部)components: {student}}// 定义hello组件const hello = {template: `<div><h2>欢迎来到{{name}}学习!</h2></div>`,data() {return {name: '武汉传媒学院'}}}// 定义app组件const app = {template: `<div><hello></hello><school></school></div>`,components: {school,hello}}new Vue({template: `<app></app>`,el: '#root',components: {app}})

4. 关于VueComponent:

  1. school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
  2. 我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。
  3. 特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!
  4. 关于this指向:

(1).组件配置中:

                      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中:

                      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5. VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。

              Vue的实例对象,以后简称vm。

  <div id="root"><school></school><hello></hello></div><script type="text/javascript">Vue.config.productionTip = false//定义school组件const school = Vue.extend({name: 'school',template: `<div><h2>学校名称:{{name}}</h2>	<h2>学校地址:{{address}}</h2>	<button @click="showName">点我提示学校名</button></div>`,data() {return {name: '武汉传媒学院',address: '北京'}},methods: {showName() {console.log('showName', this)}},})const test = Vue.extend({template: `<span>atguigu</span>`})//定义hello组件const hello = Vue.extend({template: `<div><h2>{{msg}}</h2><test></test>	</div>`,data() {return {msg: '你好啊!'}},components: { test }})// console.log('@',school)// console.log('#',hello)//创建vmconst vm = new Vue({el: '#root',components: { school, hello }})
</script>

5. 一个重要的内置关系(有点难理解)

  1. 一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
  2. 为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

  <div id="root"><school></school></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。Vue.prototype.x = 99//定义school组件const school = Vue.extend({name: 'school',template: `<div><h2>学校名称:{{name}}</h2>	<h2>学校地址:{{address}}</h2>	<button @click="showX">点我输出x</button></div>`,data() {return {name: '武汉传媒学院',address: '北京'}},methods: {showX() {console.log(this.x)}},})//创建一个vmconst vm = new Vue({el: '#root',data: {msg: '你好'},components: { school }})//定义一个构造函数function Demo() {this.a = 1this.b = 2}//创建一个Demo的实例对象const d = new Demo()console.log(Demo.prototype) //显示原型属性console.log(d.__proto__) //隐式原型属性console.log(Demo.prototype === d.__proto__)//程序员通过显示原型属性操作原型对象,追加一个x属性,值为99Demo.prototype.x = 99console.log('@', d)</script>

二、 单文件组件

可以分为4个部分:小组件 Students.vue、School.vue 和 index.html 以及 main.js 最后将两个小组件都放入App.vue进行整合 

App.vue: 进行组件引入

<template><div><School></School><Student></Student></div>
</template><script>//引入组件import School from './School.vue'import Student from './Student.vue'export default {name:'App',components:{School,Student}}
</script>

main.js:进行引入组件后调用

import App from './App.vue'new Vue({el:'#root',template:`<App></App>`,components:{App},
})

写到这里, 留一个悬念 其实这里并跑不起来 !必须要在脚手架的环境下才能运行 ~

那就期待下一章!!!总结不易~ 本章节对我有很大收获 希望对你也是!!!!

相关文章:

【Vue】组件基础

目录 &#x1f680; Vue 非单文件组件 和 单文件组件 的区别与实践对比 ✨ 引言 一、非单文件组件 1. 基本使用 2. 注意&#xff1a; 3. 组件的嵌套 4. 关于VueComponent&#xff1a; 5. 一个重要的内置关系&#xff08;有点难理解&#xff09; 二、 单文件组件 那就…...

OpenCV---图像预处理(四)

OpenCV—图像预处理&#xff08;四&#xff09; 文章目录 OpenCV---图像预处理&#xff08;四&#xff09;九&#xff0c;图像掩膜9.1 制作掩膜9.2 与运算9.3 颜色替换9.3.19.3.2 颜色替换 十&#xff0c;ROI切割十 一&#xff0c;图像添加水印11.1模板输入11.2 与运算11.3 图像…...

《MySQL:MySQL表的基本查询操作CRUD》

CRUD&#xff1a;Create&#xff08;创建&#xff09;、Retrieve&#xff08;读取&#xff09;、Update&#xff08;更新&#xff09;、Delete&#xff08;删除&#xff09;。 Create into 可以省略。 插入否则更新 由于主键或唯一键冲突而导致插入失败。 可以选择性的进行同步…...

Psychology 101 期末测验(附答案)

欢呼 啦啦啦~啦啦啦~♪(^∇^*) 终于考过啦~ 开心(*^▽^*) 撒花✿✿ヽ(▽)ノ✿ |必须晒下证书: 判卷 记录下判卷,还是错了几道,填空题2道压根填不上。惭愧~ 答案我隐藏了,实在想不出答案的朋友可以留言,不定时回复。 建议还是认认真真的学习~认认真真的考试~,知识就…...

Linux:权限相关问题

文章目录 shell命令以及运行的原理Linux权限 shell命令以及运行的原理 操作系统分为内核和外壳程序&#xff0c;xshell是外壳程序&#xff0c;外壳程序包括我们windows桌面上的图形化界面&#xff0c;本质都是翻译给核心处理&#xff0c;再显示出来&#xff0c;而我们输入的命令…...

大模型应用开发大纲

AI大模型学习路径脑图结构 一、AI及LLM基础 学习目标&#xff1a;建立对AI和LLM的基础理解&#xff0c;了解主要的机器学习和神经网络模型&#xff0c;掌握API调用方法。 1.1 AI领域基础概念 AI, NL/NLU/NLG机器学习: 学习方法, 拟合评估神经网络: CNN, RNN, TransformerTra…...

【NCCL】transport建立(一)

transport建立 NCCL transport建立主要在ncclTransportP2pSetup函数中实现。 概况 先简单概括一下ncclTransportP2pSetup函数做了哪些事&#xff0c;方便理解代码流程。 recvpeer 表示本卡作为接收端的对端&#xff0c;sendpeer 表示本卡作为发送端的对端。假设8个rank全连接…...

智慧能源安全新纪元:当能源监测遇上视频联网的无限可能

引言&#xff1a;在数字化浪潮席卷全球的今天&#xff0c;能源安全已成为国家安全战略的重要组成部分。如何构建更加智能、高效的能源安全保障体系&#xff1f;能源安全监测平台与视频监控联网平台的深度融合&#xff0c;正为我们开启一扇通向未来能源管理新世界的大门。这种创…...

腾讯一面-软件开发实习-PC客户端开发方向

1.自我介绍就不多赘述了 2. 请介绍一下你的项目经历 - 介绍了专辑鉴赏项目&#xff0c;前端使用html语言编写&#xff0c;后端基于http协议使用C语言进行网页开发。此外&#xff0c;还提及项目中涉及处理多线程问题以及做过内存池管理项目。 3. 项目中HTTP协议是使用库实现的…...

Cad c# 射线法判断点在多边形内外

1、向量叉乘法 2、射线法原理 射线法是判断点与多边形位置关系的经典算法&#xff0c;核心思想是&#xff1a; 从目标点发出一条水平向右的射线&#xff08;数学上可视为 y p_y, x \geq p_x 的射线&#xff09;&#xff0c;统计该射线与多边形边的交点数量&#xff1a; - 偶…...

【第16届蓝桥杯软件赛】CB组第一次省赛

个人主页&#xff1a;Guiat 归属专栏&#xff1a;算法竞赛 文章目录 A. 移动距离&#xff08;5分填空题&#xff09;B. 客流量上限&#xff08;5分填空题&#xff09;C. 可分解的正整数D. 产值调整E. 画展布置F. 水质检测G. 生产车间H. 装修报价 正文 总共10道题。 A. 移动距离…...

DePIN驱动的分布式AI资源网络

GAEA通过通证经济模型激励全球用户共享闲置带宽、算力、存储资源&#xff0c;构建覆盖150多个国家/地区的分布式AI基础设施网络。相比传统云服务&#xff0c;GAEA具有显著优势&#xff1a; 成本降低70%&#xff1a;通过利用边缘设备资源&#xff0c;避免了集中式数据中心所需…...

CC注入Tomcat Upgrade/Executor/WebSocket内存马

学习一下Tomcat中和组件内存马不一样的马。除了学习注入原理外&#xff0c;其payload还在一些缩短payload的场景有应用&#xff0c;比如shiro CC注入Tomcat Upgrade/Executor/WebSocket内存马 漏洞所用环境及测试全部代码https://github.com/godownio/TomcatMemshell 漏洞路…...

算法工程师面试题与参考答案资料(2025年版)

一、核心技术能力 1. 编程能力与工具 问题 1(选择题): 下列哪种Python数据类型是通过哈希表实现的? A. 列表 (list)...

烂土豆Juicypotato提权原理和利用

烂土豆Juicypotato提权原理和利用 0x00 Potato&#xff08;烂土豆&#xff09;提权的原理&#xff1a; 所谓的烂土豆提权就是俗称的MS16-075 可以将Windows工作站上的特权从最低级别提升到“ NT AUTHORITY \ SYSTEM” – Windows计算机上可用的最高特权级别。 一、简单的原…...

基于LangChain4J的AI Services实践:用声明式接口重构LLM应用开发

基于LangChain4J的AI Services实践&#xff1a;用声明式接口重构LLM应用开发 前言&#xff1a;当Java开发遇上LLM编程困境 在LLM应用开发领域&#xff0c;Java开发者常面临两大痛点&#xff1a;一是需要手动编排Prompt工程、记忆管理和结果解析等底层组件&#xff0c;二是复杂…...

重构便携钢琴专业边界丨特伦斯便携钢琴V30Pro定义新一代便携电钢琴

在便携电钢琴领域&#xff0c;特伦斯推出的V30Pro折叠钢琴以"技术革新场景适配"的双重升级引发关注。这款产品不仅延续了品牌标志性的折叠结构&#xff0c;更通过声学系统重构与智能交互优化&#xff0c;重新定义了便携乐器的专业边界。 ▶ 核心特点&#xff1a;技术…...

【uniapp-兼容性处理】安卓uView组件中u-input后置插槽不展示

【日期】2025-04-21 【问题】 在小程序上u-input后置插槽展示&#xff0c;真机运行安卓机上不展示 【原因】&#xff1a; 原代码&#xff1a;&#xff08;插槽写法惯性使用#&#xff0c;此处在APP上不兼容该写法&#xff09; <u-input v-model"currentScore"…...

每天学一个 Linux 命令(30):cut

​​可访问网站查看,视觉品味拉满: http://www.616vip.cn/28/index.html cut 命令用于从文件或输入流中提取文本的特定部分(如列、字符或字节位置)。它常用于处理结构化数据(如 CSV、TSV)或按固定格式分割的文本。以下是详细说明和示例: 命令格式 cut [选项] [文件...]…...

部署本地Dify

本文我们来演示一下Dify的部署安装。 一、安装docker环境 Dify只是一个dashboard&#xff0c;所以这里的话咱们一般不用使用物理部署了&#xff0c;直接使用docker启动一个即可&#xff0c;所以一定要先确保服务器上有docker环境和docker-compose环境。 docker的安装可参考&…...

大数据组件学习之--Kafka 安装搭建

一、前置环境 在搭建kafka之前&#xff0c;请确认自己的hadoop、zookeeper是否搭建完成且可正常运行 二、下载并上传安装包&#xff08;链接为百度网盘&#xff09; kafka安装包 tar -zxvf /opt/software/kafka_2.12-2.4.1.tgz -C /opt/module/ 进入解压后的目录更改文件名…...

RK3588芯片NPU的使用:PPOCRv4例子在安卓系统部署

本文的目标 将PPOCRv4 C语言例子适配安卓端,提供选择图片后进行OCR识别功能。PPOCRv4 C语言例子请参考之前的博文《RK3588芯片NPU的使用:Windows11 Docker中运行PPOCRv4例子》。 开发环境说明 主机系统:Windows 11目标设备:搭载RK3588芯片的安卓开发板核心工具:Android …...

算法 | 鲸鱼优化算法(WOA)与强化学习的结合研究

===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== 鲸鱼优化算法与强化学习 一、结合机制与关键方向1、 ‌参数动态调整2、…...

Spring AI 框架-快速搭建以及会话日志(笔记)

概述&#xff1a;  Spring AI是Spring生态中应用于人工智能领域的应用框架&#xff0c;它的目标是将Spring 生态系统的设计原则&#xff08;如可移植性、模块化设计&#xff09;应用于AI领域&#xff0c;Spring AI更新迭代非常快,对Spring生态非常友好&#xff0c;可以大大简化…...

一段式端到端自动驾驶:VAD:Vectorized Scene Representation for Efficient Autonomous Driving

论文地址&#xff1a;https://github.com/hustvl/VAD 代码地址&#xff1a;https://arxiv.org/pdf/2303.12077 1. 摘要 自动驾驶需要对周围环境进行全面理解&#xff0c;以实现可靠的轨迹规划。以往的方法依赖于密集的栅格化场景表示&#xff08;如&#xff1a;占据图、语义…...

CMake execute_process用法详解

execute_process 是 CMake 中的一个命令&#xff0c;用于在 CMake 配置阶段&#xff08;即运行 cmake 命令时&#xff09;执行外部进程。它与 add_custom_command 或 add_custom_target 不同&#xff0c;后者是在构建阶段&#xff08;如 make 或 ninja&#xff09;执行命令。ex…...

使用Postman调测“获取IAM用户Token”接口实际操作

概述 Postman是网页调试与辅助接口调用的工具&#xff0c;具有界面简洁清晰、操作方便快捷的特性&#xff0c;可以处理用户发送的HTTP请求&#xff0c;例如&#xff1a;GET&#xff0c;PUT、POST&#xff0c;DELETE等&#xff0c;支持用户修改HTTP请求中的参数并返回响应数据。…...

大模型面经 | 春招、秋招算法面试常考八股文附答案(三)

大家好,我是皮先生!! 今天给大家分享一些关于大模型面试常见的面试题,希望对大家的面试有所帮助。 往期回顾: 大模型面经 | 春招、秋招算法面试常考八股文附答案(RAG专题一) 大模型面经 | 春招、秋招算法面试常考八股文附答案(RAG专题二) 大模型面经 | 春招、秋招算法…...

高效Java面试题(附答案)

Java全家桶 Java基础 1. Java为什么被称为平台无关性语言&#xff1f; 2. 解释下什么是面向对象&#xff1f;面向对象和面向过程的区别 3. 面向对象的三大特性&#xff1f;分别解释下&#xff1f; 4. Java 中的参数传递时传值呢&#xff1f;还是传引用&#xff1f; 5. JD…...

Unreal如何使用后处理材质实现一个黑屏渐变效果

文章目录 前言相机后期处理材质创建材质相机设置动态修改FadeAlpha参数使用示例最后前言 UE5 开发VR ,如何通过PostProcess轻松实现黑屏渐变效果 最简单的办法,其实是使用一个半球形模型,遮挡住相机,然后控制这个半球形遮罩的颜色透明度,至少Unity中默认的Tunneling是这么…...

【自然语言处理与大模型】模型压缩技术之剪枝

一、什么是模型剪枝&#xff1f; 模型剪枝&#xff08;Model Pruning&#xff09;是一种神经网络模型压缩技术&#xff0c;其核心思想是通过删除或稀疏化模型中冗余的部分&#xff08;如不重要的参数或神经元连接&#xff09;&#xff0c;在尽量保持模型性能的前提下&#xff0…...

OOA-CNN-LSTM-Attention、CNN-LSTM-Attention、OOA-CNN-LSTM、CNN-LSTM四模型多变量时序预测一键对比

OOA-CNN-LSTM-Attention、CNN-LSTM-Attention、OOA-CNN-LSTM、CNN-LSTM四模型多变量时序预测一键对比 目录 OOA-CNN-LSTM-Attention、CNN-LSTM-Attention、OOA-CNN-LSTM、CNN-LSTM四模型多变量时序预测一键对比预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于OOA-CN…...

Android Studio 国内镜像使用与 SDK 下载速度优化指南

本文适用于刚装好 Android Studio、SDK 下载缓慢、更新困难&#xff0c;以及 Gradle 构建缓慢的开发者。我们会讲&#xff1a; 如何替换国内镜像源&#xff08;包括 SDK 和 Gradle&#xff09; 如何解决 emulator 镜像下载失败的问题 一些终极提速技巧&#xff08;比如代理配…...

PyCharm 在 Linux 上的完整安装与使用指南

PyCharm 在 Linux 上的完整安装与使用指南—目录 一、PyCharm 简介二、下载与安装1. 下载 PyCharm2. 安装前的依赖准备3. 安装步骤方法 1&#xff1a;通过 Snap 安装&#xff08;推荐&#xff09;方法 2&#xff1a;手动安装&#xff08;从官网下载 .tar.gz 文件&#xff09;方…...

强化学习(Reinforcement Learning, RL)​​与​​深度强化学习(Deep Reinforcement Learning, DRL)​​

​​1. 基本概念​​ ​​强化学习&#xff08;RL&#xff09;​​ ​​定义​​&#xff1a;通过试错与环境交互&#xff0c;学习策略以最大化累积奖励的机器学习范式。​​核心思想​​&#xff1a;智能体在环境中执行动作&#xff0c;接收奖励信号并更新策略&#xff0c;最…...

初识Redis · C++客户端set和zset

目录 前言&#xff1a; set sadd sismember smembers spop scard sinter sinterstore zset zadd zrange zcard zrem zrank zscore 前言&#xff1a; 前文我们已经介绍了string list hash在Redis-plus-plus的使用&#xff0c;本文我们开始介绍set和zset在redis-plus-pl…...

平板电脑做欧盟网络安全法案(EU)2022/30

平板电脑做欧盟网络安全法案&#xff08;EU&#xff09;2022/30 平板电脑做EN18031,平板电脑做无障碍法规EU2019/882 欧盟委员会于2022年通过补充授权法案 &#xff08;EU&#xff09; 2022/30&#xff0c;明确要求无线电设备需满足网络安全、隐私保护及反欺诈要求。 新规时间轴…...

GeoJSON 格式详解与使用指南

一、引言 GeoJSON 是一种对各种地理数据结构进行编码的格式&#xff0c;它基于 JavaScript 对象表示法&#xff08;JSON&#xff09;&#xff0c;被广泛应用于地理信息系统&#xff08;GIS&#xff09;、地图应用开发以及地理数据的存储和交换。本文将详细介绍 GeoJSON 的格式…...

JavaScript与TypeScript

TypeScript 和 JavaScript 都是用于构建 Web 应用的编程语言&#xff0c;但它们有着不同的设计目标和特性。 一、JavaScript 1. 定义与特点 动态脚本语言&#xff1a;由 Brendan Eich 在 1995 年创建&#xff0c;最初用于浏览器端的交互逻辑。弱类型/动态类型&#xff1a;变量…...

ArcGIS、ArcMap查看.shp文件时属性表中文乱码

Shapefile(.shp): 根本错误原因&#xff1a; Shapefile 的属性数据 .dbf 是老旧格式&#xff0c;默认不含编码信息 解决方法&#xff1a; 在shapefile文件夹目录上&#xff0c;创建一个同名的.cpg文件&#xff0c;内容"oem" 使用ArcGIS再右键打开属性表&#xff0c;…...

C++学习:六个月从基础到就业——内存管理:自定义内存管理(上篇)

C学习&#xff1a;六个月从基础到就业——内存管理&#xff1a;自定义内存管理&#xff08;上篇&#xff09; 本文是我C学习之旅系列的第二十一篇技术文章&#xff0c;也是第二阶段"C进阶特性"的第六篇&#xff0c;主要介绍C中的自定义内存管理技术&#xff08;上篇&…...

大模型基础

1、提示词 典型构成&#xff1a; - **角色**&#xff1a;给 AI 定义一个最匹配任务的角色&#xff0c;比如&#xff1a;「你是一位软件工程师」「你是一位小学数学老师」 - **指示**&#xff1a;对任务进行描述 - **上下文**&#xff1a;给出与任务相关的其它背景信息&#x…...

TDengine 存储引擎设计

简介 TDengine 的核心竞争力在于其卓越的写入和查询性能。相较于传统的通用型数据库&#xff0c;TDengine 在诞生之初便专注于深入挖掘时序数据场景的独特性。它充分利用了时序数据的时间有序性、连续性和高并发特点&#xff0c;自主研发了一套专为时序数据定制的写入及存储算…...

C++回溯算法详解

文章目录 引言第一题1.1 题目解析1.2 解题思路回溯解法队列解法 1.3 解题代码回溯解法队列解法 引言 回溯算法是一种通过深度优先搜索系统性地遍历问题解空间的算法。它的核心思想是"试错"&#xff1a;逐步构建候选解&#xff0c;当发现当前选择无法得到有效解时&am…...

前端Javascript模块化 CommonJS与ES Module区别

一、模块化规范的演进历程 IIFE(立即执行函数)阶段 早期通过立即执行函数实现模块化,利用函数作用域隔离变量,解决全局命名冲突问题。例如通过(function(){})()包裹代码,形成独立作用域。 CommonJS(Node.js)阶段 CommonJS规范以同步加载为核心,通过require和module.exp…...

问题 | RAIM + LSTM 你怎么看???

github&#xff1a;https://github.com/MichaelBeechan CSDN&#xff1a;https://blog.csdn.net/u011344545 RAIM LSTM import numpy as np import tensorflow as tf from tensorflow.keras.layers import LSTM, Dense# RAIM-LSTM 融合模型 class RAIM_LSTM(tf.keras.Model):d…...

进程与线程:03 用户级线程

多进程与操作系统基础 上一个内容我们讲了多进程图像&#xff0c;强调多进程图像是操作系统最核心的图像。我们还通过Windows任务管理器&#xff0c;实际观察了操作系统里的进程。 进程是操作系统的核心内容&#xff0c;管理好多个进程&#xff0c;就能管理好操作系统和CPU。…...

四种阻抗匹配的方式

一、串联端接方式 即靠近输出端的位置串联一个电阻。 要达到匹配效果&#xff0c;串联电阻和驱动端输出阻抗的总和应等于传输线的特征Z0 二、并联端接方式 并联端接又被称为终端匹配。 要达到阻抗匹配的要求&#xff0c;端接电阻应该和传输线的特征阻抗Z0相等。 三、AC并联端…...

WebRTC通信技术EasyRTC音视频实时通话安全巡检搭建低延迟、高可靠的智能巡检新体系

一、方案背景 在现代安防和工业领域&#xff0c;安全巡检是确保设施正常运行和保障人员安全的关键环节。传统的巡检方式往往依赖人工&#xff0c;效率低下且容易出现遗漏。随着技术的发展&#xff0c;实时通信技术EasyRTC为安全巡检提供了更加高效和智能化的解决方案。 二、方…...

使用json_repair修复大模型的json输出错误

json_repair 有些 LLM 在返回格式正确的 JSON 数据时会有些问题&#xff0c;有时会漏掉括号&#xff0c;有时会在数据中添加一些单词。不至于这种错误每次都要丢弃&#xff0c;再次生成太浪费时间了&#xff0c;因此能修复错误时还是要尽量修复。这就是 json_repair 的主要目的…...