Vue核心指令解析：探索MVVM与数据操作之美

在这里插入图片描述

文章目录

  • 前言
  • 一、Vue.js
    • 1. MVVM模式介绍
    • 2. 单页面组件介绍及案例讲解
    • 3. 插值表达式介绍及案例讲解
  • 二、Vue常用指令详解
    • 1. 数据绑定指令
      • v-text
      • v-html
    • 2. 条件渲染指令
      • v-if
      • v-show
    • 3. 列表渲染指令
      • v-for
      • 循环数组介绍及案例讲解
      • 循环对象介绍及案例讲解
    • 4. 事件监听指令
      • v-on
      • 事件修饰符介绍与案例讲解
    • 5. 表单输入与数据同步指令
      • v-model
      • v-model修饰符介绍及案例讲解
    • 6. 属性绑定指令
      • v-bind
      • 对象语法绑定class介绍及案例讲解
      • 数组语法绑定class介绍及案例讲解
      • 绑定style介绍及案例讲解

前言

    MVVM模式将数据（Model）、视图（View）和视图模型（ViewModel）三者分离，实现数据驱动视图的双向绑定。而Vue.js的指令系统则提供了强大的数据操作和控制能力，使开发更加高效。

    接下来，我们将重点介绍Vue.js中一系列强大的指令。从数据绑定指令 v-text、v-html开始，它们让我们能够轻松地将数据渲染到页面上；到条件渲染指令 v-if、v-show，它们使得页面能够根据不同的条件展示不同的内容；再到列表渲染指令 v-for，它极大地简化了列表数据的展示；此外，还有事件监听指令 v-on，它让我们能够监听用户与页面的交互，实现动态响应；而表单输入与数据同步指令 v-model，则让表单数据的处理变得简单而高效；最后，属性绑定指令 v-bind，它使得我们能够灵活地绑定元素的属性。

一、Vue.js

Vue.js是当下很火的一个JavaScript MVVM 库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
    相比于使用jQuery操作DOM，使用Vue.js时要先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

1. MVVM模式介绍

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。
在这里插入图片描述
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

  • 首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
  • 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
  • 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

2. 单页面组件介绍及案例讲解

文件扩展名为 .vue 的 single-file components (单文件组件) 为前端项目开发中遇到的一系列问题提供了解决方法。

这是一个文件名为 Hello.vue 的简单实例：

<template><!-- 模板，存放HTML标签 -->
</template><script>// Js 代码
export default {name: "Hello"}
</script><style>
/* css样式 */
</style>

3. 插值表达式介绍及案例讲解

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<template><span>Message:{{msg}} </span>
</template><script>
export default {name: "Hello",data() {return {msg: "Hello World",};},
};
</script>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

二、Vue常用指令详解

1. 数据绑定指令

v-text

v-text指令用于将数据填充到标签中，作用与插值表达式类似，但是没有闪烁问题：

<template><span v-text="msg"></span>
</template><script>
export default {name: "Hello",data() {return {msg: "Hello World",};},
};
</script>

v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<template><span v-html="msg"></span>
</template><script>
export default {name: "Hello",data() {return {msg: "<h1>Hello World</h1>",};},
};
</script>

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

2. 条件渲染指令

v-if

v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候渲染

<template><div id="app"><p v-if="is_show">这是一个p标签</p><p v-if="is_have">我也是一个p标签</p></div>
</template><script>
export default {data(){return{is_show: true,is_have: false}}
}
</script>

案例：动态切换内容：

<template><div id="app"><input type="radio" name="gender" value="男" v-model="msg">男<input type="radio" name="gender" value="女" v-model="msg">女<input type="radio" name="gender" value="保密" v-model="msg">保密<h2 v-if="msg == '女'">你是一个Girl</h2><h2 v-else-if="msg == '男'">你是一个Boy</h2><h2 v-else>你是一个神秘的人</h2></div>
</template><script>
export default {data(){return{msg: "保密",}}
}
</script>

v-show

v-show 和 v-if 的用法和效果看起来是一样的

<template><div id="app"><input type="button" value="点击" @click="btn"><h2 v-show="a">嗨，我在</h2></div>
</template><script>
export default {data(){return{a: true}},methods:{btn(){this.a = !this.a}}
}
</script>

v-if和v-show异同介绍：

  • v-if 是控制元素是否在 DOM 渲染，实现显示和隐藏
    v-show 是控制元素的 CSS 属性 display，实现显示和隐藏

3. 列表渲染指令

v-for

  • v-for 可以循环遍历数据，并渲染出多个标签
  • 在v-for指令操作里 a in b是必要格式
  • v-for 可以循环遍历数据，并渲染出多个标签
<div id="app"><p v-for="i in 8">{{i}}</p>
</div>
在v-for指令操作里 a in b是必要格式v-for 可以循环遍历数据，并渲染出多个标签

循环数组介绍及案例讲解

  • 遍历数组时，i 是数组中的值，k 是索引
遍历数组介绍及案例讲解 
<template><div id="app"><p v-for="(i, k) in list_">{{i}} {{k}}</p></div>
</template>
<script>
export default {data(){return{list_: [2,4,6,8,10]}}
}
</script>

循环对象介绍及案例讲解

  • v-for 支持最多三个参数，同时获取遍历对象的key和value值，以及index索引位置
  • 要注意的是，此时的key和value和python中的顺序是颠倒的，key在后，value在前
<template><div id="app"><p v-for="(value, key, i) in user">{{i}}--{{key}}--{{value}}</p></div>
</template><script>
export default {data(){return{user: {name: "张三",age: 18}}}
}
</script>

4. 事件监听指令

v-on

v-on给元素绑定对应事件,可以缩写为@

<template><div><! -- <button v-on:click="btn">弹框</button> --><!-- 效果和上面等同 --><button @click="btn">弹框</button></button></div> 
</template><script>
export default {methods:{btn(){alert(111)}}
}
</script>

事件修饰符介绍与案例讲解

1、阻止冒泡 .stop介绍及案例讲解

  • 比如一个按钮在一个div中,并且按钮和div均有自己的事件,那么此时点击按钮,事件会像冒泡一样从按钮开始一直到div进行触发,.stop用来阻止默认的事件触发行为
<template><div id="app"><p @click="pClick"><input type="button" value="按钮" @click.stop="btnClick"></p></div>
</template><script>
export default {methods:{pClick() {console.log("p点击被触发了")},btnClick() {console.log("按钮点击被触发了")}}
}
</script>

2 、阻止默认 .prevent介绍及案例讲解

  • 比如像a标签这样的,在点击时他有默认的跳转动作,可以通过.prevent阻止该默认行为
<template><div id="app"><a v-bind:href="url" :id="msg + '123'" @click.prevent="aClick">百度 </a></div>
</template><script>
export default {name: 'one',data(){return{url: "http://www.baidu.com",msg:"bd"}},methods:{aClick(){console.log("链接被点击啦")}}
}
</script>

3、 捕获事件 .capture介绍及案例讲解

  • 默认的事件触发处理机制是冒泡机制，通过.capture即可将冒泡顺序从里向外，颠倒顺序
  • 也可理解为在冒泡机制中,谁有该修饰符，先触发谁的事件
<template><div id="app"><p @click.capture="pClick"><input type="button" value="按钮" @click="btnClick"></p></div>
</template><script>
export default {name: 'one',data(){return{msg:'hello'}},methods:{pClick() {console.log("p点击被触发了")},btnClick() {console.log("按钮点击被触发了")}}
}
</script>

4、 自身事件 .self介绍及案例讲解：

  • 与capture和冒泡不同,.self只有是自身触发的当前的事件才真正执行处理的回调函数
  • 并且.self只会阻止当前元素的事件触发行为
<template><div @click="divClick" class="div1"><p @click.self="pClick" class="p1"><input type="button" value="按钮" @click="btnClick"></p></div>
</template><script>
export default {name: 'one',data(){return{msg:'hello'}},methods:{divClick() {console.log("盒子点击被触发了")},pClick() {console.log("p点击被触发了")},btnClick() {console.log("按钮点击被触发了")}}
}
</script>

5、 单次事件 .once介绍及案例讲解：

  • 使用.once只触发一次事件函数
<template><div id="app"><input type="button" value="提交" @click.once="btn"></div>
</template><script>
export default {name: 'one',data(){return{msg:'hello'}},methods:{btn(){alert(1111)}}
}
</script>

5. 表单输入与数据同步指令

v-model

  • 使用v-model指令可以在表单 input 、 textarea 以及 select 元素上创建双向数据绑定 根据表单上的值，自动更新模板变量中的值
  • 注意v-model会忽略表单的初始值，比如: checked 、 value 、 selected ，如果需要的话，应该在 javascript中首先声明初始值

1、表单类型为文本输入框

使用v-model指令可以在表单 input 、 textarea 以及 select 元素上创建双向数据绑定 根据表单上的值，自动更新模板变量中的值
<template><div><p>用户名：<input type="text" v-model="userinfo.name" /></p><p>密码：<input type="password" v-model="userinfo.pwd" /></p><p> {{userinfo.name}} 已登录</p></div>
</template><script>
export default {name: "Hello",data() {return {userinfo:{name:"xxx",pwd:"xxx"}};},
};
</script>

2、表单类型为文本域

<template><div><p><input type="textarea" v-model="a" /></p><p>{{a}}</p></div>
</template><script>
export default {name: "Hello",data() {return {a: 1,};},
};
</script><style scoped>
input{width: 200px;  /* 设置宽 */height: 50px;  /* 设置高 */
}
</style>

3、单个复选框:数据为绑定为 true 和 false 的布尔值

<template><div><p><input type="checkbox" v-model="checked" /></p><p>{{checked}}</p></div>
</template><script>
export default {name: "Hello",data() {return {checked: false,};},
};
</script><style scoped>
input {width: 100px;height: 100px;
}
</style>

复选框:选中的结果会绑定到同一个数组，将保存的 v-model 变量创建为数组

<template><div><p><input type="checkbox" name="fruit" value="banana" v-model="checked" /> 香蕉<input type="checkbox" name="fruit" value="apple" v-model="checked" /> 苹果<input type="checkbox" name="fruit" value="orange" v-model="checked" /> 橘子</p><p>{{checked}}</p></div>
</template><script>
export default {name: "Hello",data() {return {checked: new Array(), // [] 空数组};},
};
</script><style scoped>
input {width: 20px;height: 20px;
}
</style>

4、表单类型为单选框

<template><div><h3>哈哈，我的性别是:{{checked}}</h3><p><input type="radio" name="gender" value="man" v-model="checked"> 男<input type="radio" name="gender" value="women" v-model="checked"> 女<input type="radio" name="gender" value="secret" v-model="checked"> 保密</p></div>
</template><script>
export default {name: "Hello",data() {return {checked: "XX", };},
};
</script>

5、表单类型为下拉框

<template><div><h3>十一你想要去旅游的城市:{{selected}}</h3><select v-model="selected"><option disabled value selected="selected">省份</option><option value="山西">山西</option><option value="北京">北京</option><option value="上海">上海</option></select></div>
</template><script>
export default {name: "Hello",data() {return {selected: "",};},
};
</script>

设置select标签的multiple属性即可设置为多选下拉菜单，按着ctrl键可以多选

<template><div><h3>十一你想要去旅游的城市:{{selecteds}}</h3><select multiple v-model="selecteds"><option value="山西">西安</option><option value="北京">北京</option><option value="上海">上海</option></select></div>
</template><script>
export default {name: "Hello",data() {return {selecteds: new Array(), // 多重数据一般都要保存成数组};},
};
</script>

v-model修饰符介绍及案例讲解

默认情况下，v-model在input和textarea表单中进行同步输入框的改动，添加了.lazy修饰符之后，对应的v- model绑定事件触发机制将变为change事件，只有在光标失去焦点时会触发。

<template><div><h3 v-html="msg"></h3><input type="text" v-model.lazy="msg" /></div>
</template><script>
export default {name: "Hello",data() {return {msg: "hello",};},
};
</script>

使用.trim可以自动过滤输入框的首尾空格

<template><div><h3 v-html="msg"></h3><input type="text" v-model.trim="msg" /></div>
</template><script>
export default {name: "Hello",data() {return {msg: "hello",};},
};
</script>

如果用户希望将输入表单的内容处理为Number类型，可以使用.number给v-model进行修饰;如果表单字符串无法被处理为数字，则返回原始的值

<template><div><h3 v-html="msg"></h3><input type="text" v-model.number="msg" /><p>{{typeof msg}}</p></div>
</template><script>
export default {name: "Hello",data() {return {msg: "123",};},
};
</script>

6. 属性绑定指令

v-bind

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

对象语法绑定class介绍及案例讲解


对象语法
顾名思义，就是传给class的是一个对象，例如：

<template>
<div id="app"><p class="font_Size" v-bind:class="{ red: isRed }">Hello World!</p>
</div>
</template>
<script>export default {name:'HelloWorld',data: {return {isRed: true}}}
</script>
<style>css先后顺序有影响.red{font-size: 20px;color: red;}.font_size{font-size: 40px;color: blue;}</style>

数组语法绑定class介绍及案例讲解

数组语法
数组语法可以理解为我们把一个class列表直接传给class，例如：

<div id="app"><p v-bind:class="[redClass, centerClass]">Hello World!</p>
</div>
<script>
export default{name:'HelloWorld',data: {return{redClass: 'active',centerClass: 'text-danger'}}}</script>
<style>
.active {width: 100px;height: 100px;background: green;
}
.text-danger {background: red;
}
</style>

绑定style介绍及案例讲解

除了绑定class，v-bind指令还可以绑定style，绑定style和绑定class其实大同小异，也是可以使用对象语法和数组语法，使用对象语法的时候也是可以直接绑定data上的对象或者绑定一个返回对象的计算属性
唯一不同的是，在使用数组语法的时候，绑定class传的是class列表，绑定style传的是style对象列表

<template><div id="app"><p>直接绑定：</p><p v-bind:style="{color: redColor, 'text-align': centerPos}">Hello World!</p><p>绑定data的对象：</p><p v-bind:style="classObj">Hello World!</p><p>绑定计算属性：</p><p v-bind:style="classObj1">Hello World!</p><p>数组语法：</p><p v-bind:style="[redStyle, centerStyle]">Hello World!</p></div>
</template>
<script>
export default{name:'HelloWorld',data: {return{redColor: 'red',centerPos: 'center',redStyle: {color: 'red'},centerStyle: {'text-align': 'center'},classObj: {color: 'red','text-align': 'center'}}},computed: {classObj1: function(){return {color: 'red','text-align': 'center'}}}}
</script>

在这里插入图片描述

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

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

相关文章

Oracle-重启数据库及可能遇到的问题

Oracle-重启数据库及可能遇到的问题

1、登录到oracle用户 su - oracle2、关闭监听 lsnrctl stop3、杀掉oracle有关进程 #下面两条命令结合成一条 ps -ef|grep $ORACLE_SID|grep -v ora_|grep LOCALNO|awk {print $2}|xargs kill -9#查询pid ps -ef|grep $ORACLE_SID|grep -v ora_|grep LOCALNO|awk {print $2}…
阅读更多...
公共筛选组件（二次封装antd）支持代码提示

公共筛选组件（二次封装antd）支持代码提示

如果项目是基于antd组件库为基础搭建&#xff0c;可使用此公共筛选组件 使用到的库 npm i antd npm i lodash-es npm i types/lodash-es -D/components/CommonSearch index.tsx import React from react; import { Button, Card, Form } from antd; import styles from ./…
阅读更多...
高晓松音频 百度网盘，高晓松音频 百度网盘资源，百度云大全

高晓松音频 百度网盘，高晓松音频 百度网盘资源，百度云大全

讲座主要围绕分享了自己的心得和体会&#xff0c;以及对产业现状的深刻洞察。认为&#xff0c;不仅是一种艺术形式&#xff0c;更是一种生活方式。他鼓励年轻人要勇于追求自己的音乐梦想&#xff0c;同时也要关注音乐产业的发展趋势&#xff0c;为音乐产业的繁荣贡献自己的力量…
阅读更多...
DDei在线设计器-API-DDeiSheet

DDei在线设计器-API-DDeiSheet

DDeiSheet DDeiSheet是代表一个页签&#xff0c;一个页签含有一个DDeiStage用于显示图形。   DDeiSheet实例包含了一个页签的所有数据&#xff0c;在获取后可以通过它访问其他内容。DDeiFile中的sheets属性记录了当前文件的页签列表。 一个DDeiFile实例至少包含一个DDeiSheet…
阅读更多...
【人工智能】百度文心一言智能体：AI领域的新里程碑

【人工智能】百度文心一言智能体：AI领域的新里程碑

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…
阅读更多...
讯飞星火超自然语言合成的完整Demo

讯飞星火超自然语言合成的完整Demo

依赖文件和功能 requirements.txt 该文件列出了所需的依赖包。 data.py 定义了应用的配置信息&#xff0c;如APPId&#xff0c;APIKey&#xff0c;APISecret等。包含请求数据和请求URL。 main.py 主程序&#xff0c;设置了WebSocket连接&#xff0c;定义了处理消息的各个回调函…
阅读更多...
度假酒店新风尚：可视化管理解决方案引领行业变革

度假酒店新风尚：可视化管理解决方案引领行业变革

在繁忙的都市生活中&#xff0c;度假酒店成了许多人逃离喧嚣、寻找宁静的首选之地。然而&#xff0c;随着旅游业的蓬勃发展&#xff0c;度假酒店面临的挑战也日益增多。如何提升服务质量、确保客人满意度、优化运营效率&#xff0c;成为了摆在各大度假酒店面前的难题。 传统的酒…
阅读更多...
小红书商家电话采集软件使用指南

小红书商家电话采集软件使用指南

使用小红书商家电话采集软件可以提高商家电话的采集效率&#xff0c;以下是使用指南及附带代码。 步骤一&#xff1a;安装Python和相关库 首先&#xff0c;确保你的电脑已经安装了Python运行环境&#xff08;建议安装Python3版本&#xff09;。安装完成后&#xff0c;同样需要…
阅读更多...
《代码整洁之道》精华速览，助你提升代码质量

《代码整洁之道》精华速览，助你提升代码质量

最近重读了一遍《代码整洁之道》&#xff0c;这本书既是整洁代码的定义&#xff0c;也是写出整洁代码的指南。我认为既适合新手阅读&#xff0c;快速提升代码质量&#xff1b;也适合老鸟阅读&#xff0c;持续精进。本篇将汇总《代码整洁之道》的必读要点&#xff0c;把书读薄&a…
阅读更多...
客户端从服务器端获取图片场景，加入CDN的实施方案

客户端从服务器端获取图片场景，加入CDN的实施方案

场景 浏览器&#xff08;客户端&#xff09;发送获取图片的请求&#xff0c;参数1—指定文件夹&#xff0c;参数2—指定文件夹中的指定图片名称&#xff08;数字编号&#xff09;作为开始&#xff0c;然后web服务器端通过websocket的方式从指定图片开始源源不断的按照顺序依次…
阅读更多...
Java中的NIO编程实践精华

Java中的NIO编程实践精华

Java中的NIO编程实践精华 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java网络编程中&#xff0c;NIO&#xff08;New I/O&#xff09;是一种基于通道和…
阅读更多...
人工智能机器学习算法总结偏差和方差

人工智能机器学习算法总结偏差和方差

1.定义 在机器学习中&#xff0c;偏差&#xff08;Bias&#xff09;和方差&#xff08;Variance&#xff09;是评估模型泛化能力的重要概念。它们描述了模型在训练数据上的表现以及对新数据的适应能力。 偏差&#xff08;Bias&#xff09; &#xff1a; 偏差是指模型的预测值与…
阅读更多...
fetch 封装 文件流下载进度监控-demo

fetch 封装 文件流下载进度监控-demo

要使用 fetch API 下载文件并监控下载进度&#xff0c;你需要处理响应的 ReadableStream。这里是一个如何封装此功能的基本示例&#xff1a; <script setup lang"ts"> const downloadFileWithProgress async (url, onProgress) > {// 发起 fetch 请求cons…
阅读更多...
北斗三号短报文通信终端 | 助力户外无网络场景作业

北斗三号短报文通信终端 | 助力户外无网络场景作业

北斗三号短报文通信终端是一款专为户外无网络场景作业设计的先进通信工具&#xff0c;它依托于中国自主研发的北斗卫星导航系统&#xff0c;为用户在偏远地区或无网络覆盖区域提供了可靠的通信保障。以下是关于北斗三号短报文通信终端的详细介绍&#xff1a; 一、功能特点 北斗…
阅读更多...
【Linux系列】tree 命令的实用指南

【Linux系列】tree 命令的实用指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
头歌——机器学习——集成学习案例

头歌——机器学习——集成学习案例

第1关&#xff1a;基于集成学习模型的应用案例 任务描述 本次任务我们将会使用银行营销数据集&#xff08;来源于UCI数据集&#xff1a;UCI Machine Learning Repository &#xff09;,该数据集共45211条数据&#xff0c;涉及葡萄牙银行机构的营销活动&#xff0c;通过一些与…
阅读更多...
大端和小端存储

大端和小端存储

在计算机科学中&#xff0c;数据存储的“字节顺序”是指数据的字节在内存中排列的顺序。主要有两种字节序&#xff1a;大端&#xff08;Big Endian&#xff09;和小端&#xff08;Little Endian&#xff09;。 大端字节序 (Big Endian) 大端字节序将数据的高位字节存储在内存…
阅读更多...
【机器学习】自然语言处理的新前沿：GPT-4与Beyond

【机器学习】自然语言处理的新前沿：GPT-4与Beyond

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 目录 &#x1f525;引言 背景介绍 文章目的 一、GPT-4简介 GPT-4概述 主要特性 局限性和挑战 二、自监督学习的新进展 自监督学习的原理 代表性模型和技术 三、少样本学习和零样本学习 少样本学习的挑战 先…
阅读更多...
Maven深度解析：Java项目构建

Maven深度解析：Java项目构建

Maven是一个由Apache软件基金会维护的软件项目管理和理解工具&#xff0c;它主要服务于基于Java的软件项目。。 Maven深度解析&#xff1a;Java项目构建 引言 在Java开发领域&#xff0c;项目构建和管理是一个复杂而关键的任务。Maven作为这一领域的佼佼者&#xff0c;以其声…
阅读更多...
【MDK5问题】：MDK5无法跳转，并且提示：no browse information available in xxxxx

【MDK5问题】：MDK5无法跳转，并且提示：no browse information available in xxxxx

1、问题&#xff1a; MDK5原来的函数调用可以直接跳转到原函数&#xff0c;但是出现不能跳转原函数的情况&#xff0c;且提示&#xff1a;no browse information available in xxxxx 的情况&#xff1b; 2、解决&#xff1a; 如下图所示&#xff1a;在魔术棒&#xff08;pro…
阅读更多...
最新文章

Copyright @ 2022~2023