快速掌握Vue:基础命令详解

1. Vue概述

Vue.js(读音 /vjuː/, 类似于 「view」) 是一套构建用户界面的 「渐进式框架」。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现「响应的数据绑定」「组合的视图组件」

框架即是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效。

MVVM(Model-View-ViewModel),具体释义如下:

  • Model: 数据模型,特指前端中通过请求从后台获取的数据

  • View: 视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据

  • ViewModel: 视图模型,数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上

如图所示就是MVVM开发思想的含义:

基于上述的MVVM思想,其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分,我们将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架,用来替代JavaScript的DOM操作,让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢?可以参考下图对比:

在更加复杂的dom操作中,vue只会变得更加的简单!在上述的代码中,我们看不到之前的DOM操作,因为vue全部帮我们封装好了。

2. 快速入门

接下来我们通过一个vue的快速入门案例,来体验一下vue。

第一步:在VS Code中创建名为1. Vue-快速入门.html的文件,并且在html文件同级创建js目录,如下图所示:

第二步:编写<script>标签来引入vue.js文件,代码如下:

<script src="js/vue.js"></script>

第三步:在js代码区域定义vue对象,代码如下:

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue"}})
</script>

在创建vue对象时,有几个常用的属性:

  • el: 用来指定哪些标签受 Vue 管理。 (该属性取值 #app 中的 app 需要是受管理的标签的id属性值)

  • data: 用来定义数据模型

  • methods: 用来定义函数

第四步:在html区域编写视图,其中{{}}是插值表达式,用来将vue对象中定义的model展示到页面上的

<body><div id="app"><input type="text" v-model="message">{{message}}</div>
</body>

浏览器打开效果如图所示:

整体代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><!-- 1.引入vue.js文件 --><script src="js/vue.js"></script>
</head>
<body><!-- 编写视图 --><div id="app"><input type="text" v-model="message">{{message}}</div>
</body>
<!-- 2.在JS代码区域,创建Vue核心对象,定义数据模型 -->
<script>// 定义Vue对象new Vue({el:"#app",// vue接管区域data:{message:"Hello Vue"}})
</script>
</html>

3. Vue指令

在上述的快速入门中,我们发现了html中输入了一个没有学过的属性v-model,这个就是vue的「指令」

**指令:**HTML 标签上带有 v- 前缀的特殊属性,不同指令具有不同含义。例如:v-if,v-for…

在vue中,通过大量的指令来实现数据绑定到视图的,所以接下来我们需要学习vue的常用指令,如下表所示:

「指令」「作用」
v-bind为HTML标签绑定属性值,如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if, v-else-if, v-else条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show根据条件展示某元素,区别在于切换的是display属性的值
v-for列表渲染,遍历容器的元素或者对象的属性

3.1 v-bind

「指令」「作用」
v-bind为HTML标签绑定属性值,如设置 href , css样式等
  • v-bind: 为HTML标签绑定属性值,如设置 href , css样式等。当vue对象中的数据模型发生变化时,标签的属性值会随之发生变化。

    编写如下代码:

  <a v-bind:href="url">链接1</a>

在上述的代码中,v-bind指令是可以省略的:

  <a :href="url">链接2</a>

浏览器打开,2个超链接都可以点击,然后跳转到百度去!效果如图所示:

代码如下:

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令v-bind</title><script src="js/vue.js"></script></head><body><div id="app"><!-- v-bind:为HTML标签绑定属性值 --><!-- 两种绑定方式 --><a v-bind:href="url">链接1</a><a :href="url">链接2</a></div></body><script>new Vue({el:"#app",data:{url:"https://space.bilibili.com/349567482"}})</script></html>

「注意:html属性前面有:表示采用的vue的属性绑定!」

3.2 v-model

「指令」「作用」
v-model在表单元素上创建双向数据绑定
  • v-model: 在表单元素上创建双向数据绑定。什么是双向?

    • vue对象的data属性中的数据变化,视图展示会一起变化

    • 视图数据发生变化,vue对象的data属性中的数据也会随着变化。

    data属性中数据变化,我们知道可以通过赋值来改变,但是视图数据为什么会发生变化呢?「只有表单项标签!所以双向绑定一定是使用在表单项标签上的」。编写如下代码:

  <input type="text" v-model="url">

打开浏览器,我们修改表单项标签,发现vue对象data中的数据也发生了变化,如下图所示:

通过上图我们发现,我们只是改变了表单数据,那么我们之前超链接的绑定的数据值也发生了变化,为什么?

就是因为我们双向绑定,在视图发生变化时,同时vue的data中的数据模型也会随着变化。

「双向绑定的作用:可以获取表单的数据的值,然后提交给服务器」

代码如下:

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令v-model</title><script src="js/vue.js"></script></head><body><div id="app"><a v-bind:href="url">链接1</a><!-- v-model:在表单元素上创建双向数据绑定 --><input type="text" v-model="url"></div></body><script>new Vue({el:"#app",data:{url:"https://www.baidu.com"}})</script></html>

3.3 v-on

「指令」「作用」
v-on为HTML标签绑定事件
  • v-on语法给标签的事件绑定的函数,必须是vue对象种声明的函数

  • v-on语法绑定事件时,事件名相比较js中的事件名,没有on

    例如:在js中,事件绑定demo函数

  <input onclick="demo()">

vue中,事件绑定demo函数

  <input v-on:click="demo()">

在vue对象的methods属性中定义事件绑定时需要的handle()函数,代码如下:

 methods: {handle: function(){alert("你点击了一下...");}
}

然后给第一个按钮,通过v-on指令绑定单击事件,代码如下:

<!-- 两种方式 -->
<input type="button" value="点击" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">

效果如图所示:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令v-on</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><!-- v-on:为HTML标签绑定事件 --><input type="button" value="点击" v-on:click="handle()"><input type="button" value="点击" @click="handle()"></div>
</body>
<script>new Vue({el:"#app",data:{},methods:{handle:function(){alert("你点击了一下...")}}})
</script>
</html>

3.4 v-if

指令描述
v-if, v-else-if, v-else条件性的渲染某元素,判定为true时渲染,否则不渲染

需求:当我们改变年龄时,需要动态判断年龄的值,呈现对应的年龄的文字描述。

年轻人,需要使用条件判断age<=35,中年人需要使用条件判断age>35 && age<60,其他情况是老年人。所以通过v-if指令

编写如下代码:

年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>

浏览器打开测试效果如下图:

image-20240805161450401

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令v-if</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><!-- v-if, v-else-if, v-else:条件性的渲染某元素,判定为true时渲染,否则不渲染 -->年龄<input type="text" v-model="age">判断为:<span v-if="age <= 35">年轻人(35及以下)</span><span v-else-if="age>35 && age <60">中年人(35-60)</span><span v-else="age>=60">老年人(60及以上)</span></div>
</body>
<script>new Vue({el:"#app",data:{age:25},methods:{}})
</script>
</html>

3.5 v-show

「指令」「作用」
v-show根据条件展示某元素,区别在于切换的是display属性的值

v-show和v-if的作用效果是一样的,只是原理不一样。代码如下:

年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)</span>
<span v-show="age > 35 && age < 60">中年人(35-60)</span>
<span v-show="age >= 60">老年人(60及以上)</span>

打开浏览器,展示效果如下所示:

可以发现,浏览器呈现的效果是一样的,但是浏览器中html源码不一样。v-if指令,不满足条件的标签代码直接没了,而v-show指令中,不满足条件的代码依然存在,只是添加了css样式来控制标签不去显示。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令v-show</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><!-- v-show:根据条件展示某元素,区别在于切换的是display属性的值 -->年龄<input type="text" v-model="age">判断为:<span v-show="age <= 35">年轻人(35及以下)</span><span v-show="age>35 && age <60">中年人(35-60)</span><span v-show="age>=60">老年人(60及以上)</span></div>
</body>
<script>new Vue({el:"#app",data:{age:25},methods:{}})
</script>
</html>

3.6 v-for

「指令」「作用」
v-for列表渲染,遍历容器的元素或者对象的属性

v-for: 用来遍历变量。其语法格式如下:

<标签 v-for="变量名 in 集合模型数据">{{变量名}}
</标签>

遍历时需要使用索引,那么v-for指令遍历的语法格式如下:

<标签 v-for="(变量名,索引变量) in 集合模型数据"><!--索引变量是从0开始,所以要表示序号的话,需要手动的加1-->{{索引变量 + 1}} {{变量名}}
</标签>

编写2种遍历语法来遍历数组,展示数据,代码如下:

 <div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>

浏览器打开,呈现如下效果:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><!-- v-for:列表渲染,遍历容器的元素或者对象的属性 --><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div></div>
</body>
<script>new Vue({el:"#app",data:{addrs:["北京","上海","广州","深圳"]},methods:{}})
</script>
</html>

3.7 案例

  • 需求:

    如上图所示,我们提供好了数据模型,users是数组集合,提供了多个用户信息。然后我们需要将数据以表格的形式,展示到页面上,其中,性别需要转换成中文男女,等级需要将分数数值转换成对应的等级。

  • 分析:

    首先我们肯定需要遍历数组的,所以需要使用v-for标签;然后我们每一条数据对应一行,所以v-for需要添加在tr标签上;其次我们需要将编号,所以需要使用索引的遍历语法;然后我们要将数据展示到表格的单元格中,所以我们需要使用{{}}插值表达式;最后,我们需要转换内容,所以我们需要使用v-if指令,进行条件判断和内容的转换

  • 步骤:

    • 使用v-for的带索引方式添加到表格的<tr>标签上

    • 使用{{}}插值表达式展示内容到单元格

    • 使用索引+1来作为编号

    • 使用v-if来判断,改变性别和等级这2列的值

  • 代码实现:

    准备如下代码:

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-案例</title><script src="js/vue.js"></script></head><body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr></table></div></body><script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})</script></html>

然后在<tr>上添加v-for进行遍历,以及通过插值表达式{{}}和v-if指令来填充内容和改变内容,其代码如下:

   <tr align="center" v-for="(user,index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >= 60">及格</span><span style="color: red;" v-else>不及格</span></td></tr>

效果如图所示:

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-案例</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><!-- vue指令渲染 --><tr align="ceenter" v-for="(user,index) in users"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span  v-if="user.gender==1">男</span><span  v-if="user.gender==2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >=85">优秀</span><span v-else-if="user.score >=60">及格</span><span style="color:red" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>
</html>

4. 生命周期

vue的生命周期:指的是vue对象从创建到销毁的过程。

vue的生命周期包含8个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法。

其完整的生命周期如下图所示:

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
「mounted」「挂载完成」
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数:

其中我们需要重点关注的是**mounted,**其他的我们了解即可。

mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。「以后我们一般用于页面初始化自动的ajax请求后台数据」

准备如下代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {}})
</script>
</html>

然后我们编写mounted声明周期的钩子函数,与methods同级,代码如下:

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>

浏览器打开,运行结果如下:我们发现,自动打印了这句话,因为页面加载完成,vue对象创建并且完成了挂在,此时自动触发mounted所绑定的钩子函数,然后自动执行,弹框。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-生命周期-mounted</title><script src="js/vue.js"></script>
</head>
<body><div id="app"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},<!-- mounted:挂载完成,Vue初始化成功,HTML页面渲染成功 -->mounted(){alert("Vue挂载完成,发送请求到服务端.")}})
</script>
</html>

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

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

相关文章

在Visual Studio/Qt Creator 中使用CMake安装和使用vcpkg包

文章目录 0. vcpkg简介和安装0.1 vcpkg简介0.2 vcpkg安装0.2.1 如何在Visual Studio 2022以及以上版本中安装vcpkg0.2.2 在其他VS版本或Qt Creator等平台上中安装vcpkg 1. 在Visual Studio 中使用CMake安装和使用vcpkg包1.1 创建Visual Studio项目1.2 设置项目文件a. 配置CMake…

FLUX.1 实测,堪比 Midjourney 的开源 AI 绘画模型,无需本地显卡,带你免费实战

要列举 AI 绘画开源界的几个关键贡献&#xff0c;一定少不了 Stable Diffusion。 还记否前不久刚推出的 Stable Diffusion 3&#xff1f; 其背后的团队 Stability AI&#xff0c;真的是一波三折&#xff0c;其核心成员出走&#xff0c;成立了一个新公司&#xff1a;Black For…

【Hot100】LeetCode—41. 缺失的第一个正数

原题链接&#xff1a;41. 缺失的第一个正数 1- 思路 手动实现哈希的方式 1- 遍历数组&#xff1a;如果当前的元素落在了 [1,N] 区间内&#xff0c;则 i 元素 赋值在 i-1 的位置上 比如对于数字 1 落在 数组 [0] 的位置 2- 判断条件 利用 while 加条件 ①当前元素落在了 [1,N]…

LVS(Linux virual server)

一&#xff1a;环境准备&#xff1a; rhel9 软件&#xff1a;httpd&#xff0c; ipvsadm 四台纯净的rhel9机子&#xff1a;一台LVS调度设备&#xff08;双网卡&#xff09;&#xff0c;两台webserver&#xff08;单网卡仅主机&#xff09;&#xff0c;一台客户机 DR模式多…

夏天猫毛满天飞?别怕一篇文章教你空气净化器怎么选

家里猫实在太多&#xff0c;3只短毛加上2只长毛&#xff0c;简直就是行走的蒲公英。夏天一到&#xff0c;猫咪的毛发便开始肆意飞舞&#xff0c;这对爱猫人士来说无疑是个烦恼。自从养猫以后&#xff0c;已经养成了每天都打扫卫生的习惯&#xff0c;吸尘器、扫地机必不可少&…

四种推荐算法——Embedding+MLP、WideDeep、DeepFM、NeuralCF

一、EmbeddingMLP模型 EmbeddingMLP 主要是由 Embedding 部分和 MLP 部分这两部分组成&#xff0c;使用 Embedding 层是为了将类别型特征转换成 Embedding 向量&#xff0c;MLP 部分是通过多层神经网络拟合优化目标。——用于广告推荐。 Feature层即输入特征层&#xff0c;是模…

【MySQL】全面剖析索引失效、回表查询与索引下推

1.索引失效的情况 以tb_user表举例&#xff0c;id为主键索引、name和phone字段上建立了一个普通索引&#xff0c;name和phone均为varchar类型。 索引列运算 当在 WHERE 子句或 JOIN 子句中对列使用函数或表达式时&#xff0c;索引会失效。 执行以下语句&#xff0c;可以发现执…

STM32-门电路-储存器-寄存器-STM32f1-MCU-GPIO-总线-keil5-点led

1、门电路 门电路组成简单加法器&#xff1a; 二进制对电路的影响&#xff1a; 0和1代表无和有&#xff1b; 以下图例&#xff0c;演示与门&#xff1a;左1右1输出1&#xff1b; 电平标准&#xff1a;使用不同的电压表示数字0和1&#xff1b; 高电平&#xff1a;1&#xff1…

AI在医学领域:残差扩散模型预测特发性肺纤维化 (IPF)

关键词&#xff1a; IPF 进展预测、残差扩散模型、临床信息 特发性肺纤维化&#xff08;Idiopathic Pulmonary Fibrosis&#xff0c;IPF&#xff09;是一种严重且不可逆的肺部疾病&#xff0c;它会导致肺部组织出现瘢痕和增厚&#xff0c;从而引起呼吸困难。。及时对IPF进行治…

电子围栏报警系统的创新应用

在科技日新月异的今天&#xff0c;安全防护技术正以前所未有的速度发展&#xff0c;其中&#xff0c;电子围栏报警系统作为智能安防领域的佼佼者&#xff0c;正逐步成为各行各业守护安全的主要选择方案。这一创新技术的应用&#xff0c;不仅极大地提升了安全防护的效率和精准度…

24/8/7 算法笔记 支持向量机回归问题天猫双十一

import numpy as np from sklearn.svm import SVR import matplotlib.pyplot as plt X np.linspace(0,2*np.pi,50).reshape(-1,1) y np.sin(X) plt.scatter(X,y) 建模 线性核函数 svr SVR(kernel linear) svr.fit(X,y.ravel())#变成一维y_ svr.predict(X) plt.scatter(…

阿里云播放器 web端 问题解决总结

1&#xff1a;ios设备长按视频&#xff0c;会出现系统的放大镜效果&#xff1a; 可以只监听touchstart事件即可 var playerContainer document.getElementById(this.playerId); playerContainer.addEventListener(touchstart, preventZoom, { passive: false }); playerConta…

unity 创建项目报错feature has expired (H0041),sentinel key not found (H0007)

两个报错同一种处理方式。 1、删除以下路径所有文件&#xff1a;C:\ProgramData\SafeNet Sentinel&#xff08;注意&#xff1a;ProgramData为隐藏文件&#xff09; 2、打开Cmd&#xff08;WinR键&#xff0c;输入cmd回车&#xff09;&#xff0c;进入Unity安装所在盘符&#…

为啥https比http慢

Https有ssl的握手 HTTP没有 HTTPS TCP 和HTTP 的TCP 时间差不是很大 HTTPS请求中,ssl所占的时间比例是请求时间总和93.37%, HTTPS请求中,ssl的请求会是tcp请求的14倍,而HTTP中没有这个问题 建议:对安全要求不是很高的,不要使用https请求 图例

自定义DIY线上预约小程序源码系统 带完整的安装代码包以及搭建部署教程

系统概述 随着移动互联网的快速发展&#xff0c;人们越来越习惯于通过手机进行各种活动的预约。传统的预约方式往往存在着信息不透明、沟通不畅、效率低下等问题&#xff0c;无法满足用户日益增长的需求。同时&#xff0c;对于企业和商家来说&#xff0c;建立一个专属的线上预…

Isaac Lab 安装 (ubuntu22.04环境)

Windows下的安装见这篇博客&#xff1a; Isaac Lab 安装与初体验 &#xff08;windows环境&#xff09;-CSDN博客 ubuntu22.04下的安装与windows下十分类似&#xff0c;还是参考官方的&#xff0c;Installation using Isaac Sim Binaries Installation using Isaac Sim Bina…

Linux驱动开发—ioctl命令构成,设备驱动基础使用ioctl详解

文章目录 1.什么是ioctl?示例 2.ioctl 与 write&#xff0c;read 有什么区别&#xff1f;复杂的设备控制多种数据类型和操作简化应用层代码区分数据和控制 3.ioctl命令的构成宏定义的组成部分具体的宏定义举个栗子 4.ioctl命令的分解宏定义举个栗子 5.ioctl 设备使用应用程序构…

【游戏引擎之路】登神长阶(九)——《3D游戏编程大师技巧》:我想成为游戏之神!

5月20日-6月4日&#xff1a;攻克2D物理引擎。 6月4日-6月13日&#xff1a;攻克《3D数学基础》。 6月13日-6月20日&#xff1a;攻克《3D图形教程》。 6月21日-6月22日&#xff1a;攻克《Raycasting游戏教程》。 6月23日-7月1日&#xff1a;攻克《Windows游戏编程大师技巧》。 7月…

数据库篇--八股文学习第十六天| MySQL的执行引擎有哪些?;MySQL为什么使用B+树来作索引;说一下索引失效的场景?

1、MySQL的执行引擎有哪些&#xff1f; 答&#xff1a; MySQL的执行引擎主要负责查询的执行和数据的存储, 其执行引擎主要有MyISAM、InnoDB、Memery 等。 InnoDB引擎提供了对事务ACID的支持&#xff0c;还提供了行级锁和外键的约束&#xff0c;是目前MySQL的默认存储引擎&…

Codeforces Round 963 (Div. 2)

A题&#xff1a;Question Marks 题目&#xff1a; Tim正在做一个由 4n 个问题组成的测试&#xff0c;每个问题都有 4 个选项&#xff1a;“A”、“B”、“C”和“D”。对于每个选项&#xff0c;有 n 个正确答案对应于该选项&#xff0c;这意味着有 n 个问题的答案为“A”。 n…