《Vue3 二》Vue 的模板语法

在 React 中，想要编写 HTML，是使用 JSX，之后通过 Babel 将 JSX 编译成 React.createElement 函数调用；在 Vue 中，也支持 JSX 的开发模式，但大多数情况下都是使用基于 HTML 的模板语法，在模板中允许开发者以声明式的方式将 DOM 和底层组件实例的数据绑定在一起，在底层的实现中，Vue 会将面编译成虚拟 DOM 渲染函数。

Mustache 插值语法：

Mustache 插值语法：可以通过双大括号将 data 中的数据、methods 中的函数或者 JavaScript 表达式显示到 template 模板中。

<div id="app">
    <!-- data 中的数据 -->
    <div>当前数字：{{count}}</div>
    <!-- methods 中的函数 -->
    <div>{{formatCount(count)}}</div>
    <!-- JavaScript 表达式 -->
    <div>三倍当前数字：{{count * 3}}</div>
    <!--  JavaScript 表达式只能是单个表达式，下面的语法会报错 -->
    <div>{{ const count = 10 }}</div>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            count: 10,
	        }
	    },
	    methods: {
	        formatCount(argu) {
	            return `双倍当前数字：${argu*2}`
	        },
	    }
	})
	app.mount('#app')
<script>

常见的基本指令：

指令都是用在元素的属性上。

v-bind：

v-bind：用于动态绑定一个或多个属性值，或者向另一个组件传递 props 值。语法糖是 :。

<div id="app">
    <img v-bind:src="imgUrl" />
</div>

<script>
const app = Vue.createApp({
    data() {
        return {
            imgUrl: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
        }
    },
})
app.mount('#app')
</script>

使用 v-bind 动态绑定 class 属性值：

动态绑定的 class 和普通静态的 class 是可以一起使用的，不会被覆盖。

  1. 绑定对象：可以给 :class 绑定一个对象来动态切换 class。对象中的属性名是 class 名，属性值是布尔类型，只有属性值为 true 时才会渲染对应的 class。
    <!-- 只有当 isActive 为 true 时才会显示 active 样式 -->
<div v-bind:class="{ active: isActive }"></div>
  2. 绑定数组：可以给 :class 绑定一个数组来渲染多个 class。
    <div v-bind:class="[activeClass, errorClass]"></div>

使用 v-bind 动态绑定 style属性值：

  1. 绑定对象：属性名可以使用驼峰式或者用引号括起来的短横线分割来命名。
    <div v-bind:style="{ color: activeColor, fontWeight: activeFontWeight, 'font-size': activeFontSize + 'px' }"></div>
  2. 绑定数组：可以将多个样式对象应用到同一个元素上。
    <div :style="[baseStyles, {color: activeColor}]"></div>

使用 v-bind 动态绑定属性名：

如果属性名称不是固定的，可以使用 v-bind:[属性名]="属性值" 的格式来定义。

<~-- name 是动态的 --> 
<div v-bind:[name]="value"></div>

使用 v-bind 直接绑定一个对象：

常用于给组件传递 props 属性值。

<div id="app">
    <!-- 会自动地遍历对象中的所有属性，将它们作为属性添加到当前的元素上 -->
    <div v-bind="props">Hello Vue</div>
</div>

<script>
const app = Vue.createApp({
    data() {
        return {
            props: {
                name: 'Lee',
                height: 1.88,
            },
        }
    },
})
app.mount('#app')
</script>

在这里插入图片描述

v-on：

v-on：用于绑定事件。语法糖是 @。

<div id="app">
    <div v-on:click="handleClick">Hello Vue</div>
</div>

<script>
	const app = Vue.createApp({
	    methods: {
	        handleClick() {
	            console.log('click')
	        }
	    }
	})
	app.mount('#app')
</script>

传递参数：

  1. 只有默认参数：如果在绑定事件时，没有传递任何参数，那么 event 对象会被默认传递进来。
    <div id="app">
    <div v-on:click="handleClick">Hello Vue</div>
</div>

<script>
	const app = Vue.createApp({
	    methods: {
	        handleClick(event) {
	            console.log('click', event)
	        }
	    }
	})
	app.mount('#app')
</script>
```	![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/4aa258c96a1347a1aa771cf3ecaf5873.png)
  2. 只有明确传递的参数：如果在绑定事件时，有显式地传递参数，那么只有明确传递的参数会被传递进来。
<div id="app">
    <div v-on:click="handleClick('Lee')">Hello Vue</div>
</div>

<script>
	const app = Vue.createApp({
	    methods: {
	        handleClick(name) {
	            console.log('click', name)
	        }
	    }
	})
	app.mount('#app')
</script>

在这里插入图片描述

  1. 既有明确传递的参数，也有默认参数：如果在绑定事件时，有显式地传递参数和 $event，那么明确传递的参数和 event 对象都会被传递进来。
    <div id="app">
    <div v-on:click="handleClick('Lee', $event)">Hello Vue</div>
</div>

<script>
	const app = Vue.createApp({
	    methods: {
	        handleClick(name, event) {
	            console.log('click', name, event)
	        }
	    }
	})
	app.mount('#app')
</script>
    在这里插入图片描述

修饰符：

v-on 支持修饰符，相当于是对事件进行一些特殊的处理。

  1. .stop：调用 event.stopPropagation() 阻止事件冒泡。
  2. .prevent：调用 event.preventDefault() 阻止默认事件。
  3. .capture：添加事件侦听器时使用 capture 捕获模式。
  4. .passive：添加事件侦听器时使用 {passive: true} 模式，提前告知浏览器不要阻止事件的默认行为。
  5. .self：只有当事件是从侦听器绑定的元素本身触发时才触发回调。
  6. .{keyAlias}：只有当事件是从特定键触发时才触发回调。
  7. .left：只有当点击鼠标左键时才触发回调。
  8. .right：只有当点击鼠标右键时才触发回调。
  9. .middle：只有当点击鼠标中键时才触发回调。
  10. .once：只触发一次回调。

v-model：

v-model：用于实现双向绑定。经常和表单一起使用，可以用于 input、textarea、select、checkbox、radio 等表单控件。

双向数据绑定：是指将视图（用户界面）中的数据与模型（业务逻辑）中的数据进行双向关联。当视图中的数据发生变化时，模型中的数据也会随之更新；同样，当模型中的数据发生变化时，视图中的数据也会随之更新。

select 如果是单选，v-model 绑定到属性中的值是就是单个的值；如果是多选，v-model 绑定到属性中的值就是数组类型。
checkbox 如果只有一个选择框时，v-model 绑定到属性中的值是布尔值类型，此时即使明确地给元素绑定 value 属性，当选中时也不会影响到 v-model 绑定的值； 如果有多个选择框时，v-model 绑定到属性中的值是数组类型， 此时必须明确地给元素绑定 value 属性，当选中时 value 属性值会被自动地添加到 v-model 绑定的数组中。

<div id="app">
    <!-- 手动实现双向数据绑定 -->
    <input :value="message" @input="handleMessageInput" />
    <!-- Vue 实现双向数据绑定，本质上就是上面代码的语法糖 -->
    <input v-model="message" />
    <div>{{message}}</div>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            message: 'Hello Vue',
	        }
	    },  
	    methods: {
	        handleMessageInput(event) {
	            this.message = event.target.value
	        }
	    },
	})
	app.mount('#app')
</script>

v-model 的原理：

  1. v-bind 绑定 value 属性的值。
  2. v-on 绑定 input 事件监听函数，在函数中会获取到最新的值赋值到绑定的属性中。

v-model 的修饰符：

多个修饰符可以并列使用。

  1. lazy：默认情况下，v-model 在进行双向数据绑定时，绑定的是 input 事件，那么在每次内容输入后就会将最新的值和绑定的属性进行同步；如果在 v-model 后面跟上 lazy 修饰符，那么就会将绑定的事件切换为 change 事件，只有在提交时才会触发。
    <div id="app">
    <input v-model.lazy="message" />
    <div>{{message}}</div>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            message: 'Hello Vue',
	        }
	    },  
	})
	app.mount('#app')
</script>
  2. number：自动将内容转换为数字。
  3. trim：去除内容首尾的空格。

v-text：

v-text：用于设置元素的 textContent 文本内容。

<divv-text="message"></div>
<!-- v-text 会直接替换掉元素中的内容 -->
<divv-text="message">你好，Vue</div>

<!-- 和Mustache 插值语法的效果一样，只不过Mustache 插值语法更灵活 -->
<div>{{message}}</div>

v-html：

v-html：默认情况下，如果显示的内容本身是 HTML，Vue 是不会对其进行解析的；如果想要解析出来，需要使用 v-html。

<div id="app">
    <!-- 会直接将字符串显式出来 -->
    <div>{{content}}</div>
    <!-- 会解析 HTML -->
    <divv-html="content"></div>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            content: `<span style="color:red">Hello Vue</span>`,
	        }
	    },
	})
	app.mount('#app')
</script>

在这里插入图片描述

v-pre：

v-pre：用于跳过元素及其子元素的编译过程，显示原始 Mustache 标签。可以跳过不需要编译的节点，加快编译速度。

<div id="app">
    <!-- Vue 会跳过对其的编译过程，将其直接显示出来 -->
    <div-pre>{{message}}</div>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            message: 'Hello Vue',
	        }
	    },
	})
	app.mount('#app')
</script>

v-cloak：

v-cloak：这个指令会保持在元素上直到关联的实例结束编译。和 CSS 规则例如 [v-cloak]{display:none} 一起用时，可以用于隐藏未编译的 Mustache 标签直到实例编译完成。

<div id="app">
    <!-- 初始会显示 {{message}}，直到三秒后才显示正确的效果 -->
    <div>{{message}}</div>
</div>

<script>
	setTimeout(() => {
	    const app = Vue.createApp({
	        data() {
	            return {
	                message: 'Hello Vue',
	            }
	        },
	    })
	    app.mount('#app')
	},3000)
</script>

<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <!-- 由于有 v-cloak 指令，叠加设置的 CSS 属性，初始什么都不会显示；直到三秒后，Vue 实例编译完成，v-cloak 指令会被 Vue 自动移除，显示正确的效果 -->
    <divv-cloak>{{message}}</div1>
</div>

<script>
	setTimeout(() => {
	    const app = Vue.createApp({
	        data() {
	            return {
	                message: 'Hello Vue',
	            }
	        },
	    })
	    app.mount('#app')
	},3000)
</script>

v-once：

v-once：只渲染元素/组件一次，当数据发生变化时，元素/组件及其所有的子节点将被视为静态内容直接跳过，不会重新渲染。可以用于优化更新性能。

<div id="app">
    <!-- 点击按钮也不会改变 message 显示的内容，因为只会渲染一次 -->
    <divv-once>{{message}}</div>
    <button @click="handleMessageChange">改变 Message</button>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            message: 'Hello Vue',
	        }
	    },
	    methods: {
	        handleMessageChange() {
	            this.message = 'Hello World'
	        },
	    }
	})
	app.mount('#app')
</script>

v-memo：

v-memo：缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较，如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。可以用于优化更新性能。

v-memo 传入空依赖数组 v-memo="[]" 将与 v-once 效果相同。

<!-- 当组件重新渲染，如果 valueA 和 valueB 都保持不变，div 及其子项的所有更新都将被跳过。 -->
<div v-memo="[valueA, valueB]">
  ...
</div>

条件渲染：

v-if、v-else、v-else-if、v-show ：根据条件决定是否显示元素或组件。类似 JavaScript 中的条件语句。

<div id="app">
    <div v-if="Object.keys(info).length">
        <p>姓名：{{info.name}}</p>
        <p>年龄：{{info.age}}</p>
    </div>
    <div v-else>
        <p>暂无个人信息</p>
        <p>请填写后查看</p>
    </div>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            info: {
	                name: 'Lee',
	                age: 18,
	            },
	        }
	    }
	})
	app.mount('#app')
</script>

v-if 和 v-show 的区别：

v-show 和 v-if 类似，但二者也有一些区别：

  1. 用法上的区别：v-show 不可以和 v-else 一起使用，不支持在 template 上使用。
  2. 本质上的区别：
    1. v-show 无论条件是 true 还是 false，它的 DOM 都是实际存在的，只不过是通过 CSS 的 display 属性来进行切换。
      在这里插入图片描述
    2. v-if 只有当条件为 true 时，才会渲染条件块中的元素内容，当条件为 false 时，条件块中的元素内容完全不会被渲染。
      因此，如果元素切换频繁，就使用 v-show；如果元素切换不频繁，就使用 v-if。

列表渲染：

v-for：用来遍历一组数据。类似 JavaScript 中的 for 循环 。基本格式是 v-for="(item, index) in 数据"，其中 item 和 index 分别是每项元素的自定义别名和自定义索引。

<div id="app">
    <ul>
        <li v-for="movie in movies">{{movie}}</li>
    </ul>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            movies: ['大话西游', '少年派', '盗梦空间']
	        }
	    }
	})
	app.mount('#app')
</script>

v-for 遍历支持的类型：

其实只要是可迭代对象，v-for 都可以遍历。

  1. 数组：基本格式是 v-for="(item, index) in 数组"。

    Vue 对被侦听的数组的变更方法进行了包裹，所以使用它们也会触发视图更新，这些方法包括 push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
    可以发现，上面的方法都是会修改到原数组的；如果是不会修改到原数组的方法，是无法触发视图更新的，例如 map() 、filter() 等。

  2. 对象：基本格式是 v-for="(value, key, index) in 对象"。
  3. 字符串：基本格式是 v-for="(str, index) in 字符串"。
  4. 数字：基本格式是 v-for="(num, index) in 数字"。

v-for 中的 key 属性：

在使用 v-for 进行列表渲染时，经常会给元素或者组件绑定一个 key 属性，属性值要求是唯一的。

<div id="app">
    <ul>
        <li v-for="movie in movies" v-bind:key="item">{{movie}}</li>
    </ul>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            movies: ['大话西游', '少年派', '盗梦空间']
	        }
	    }
	}) 
	app.mount('#app')
</script>
key 的作用：

key 属性主要用于 Vue 中的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。

  1. 如果不使用 key，Vue 会使用一种最大限制减少动态元素并且尽可能尝试就地复用/修改相同类型元素的算法。在源码中是使用 patchUnkeyedChildren() 方法。
  2. 如果使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素。在源码中是使用 patchkeyedChildren() 方法。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
<div id="app">
    <ul>
        <li v-for="movie in movies">{{movie}}</li>
    </ul>
</div>

<script>
	const app = Vue.createApp({
	    data() {
	        return {
	            movies: ['大话西游', '少年派', '盗梦空间']
	        }
	    }
	}) 
	app.mount('#app')
</script>

假设要在大话西游后面插入夏洛特烦恼，原本是大话西游、少年派、盗梦空间，现在是大话西游、夏洛特烦恼、少年派、盗梦空间。
4. 不使用 key 的话：Vue 只能一个一个对比对应位置的元素。会发现第一个元素一样，可以直接复用；但是第二个元素就不一样了，原本是少年派，现在是夏洛特烦恼，因此需要修改其中的值；第三个元素也不一样，需要修改其中的值；还需要创建一个新的第四个元素。
5. 使用 key 的话：Vue 可以通过 key 来比较是否是同一个元素。会发现大话西游、少年派、盗梦空间的元素都一样，可以直接复用，只需要创建一个新的元素插入即可。

template 元素：

template 元素作为一个不可见的包裹元素，最终是不会被浏览器渲染出来的，与条件渲染和列表渲染结合使用可以减少元素层级的嵌套。

<div id="app">
    <template v-if="Object.keys(info).length">
        <p>姓名：{{info.name}}</p>
        <p>年龄：{{info.age}}</p>
    </template>
    <template v-else>
        <p>暂无个人信息</p>
        <p>请填写后查看</p>
    </template>
</div>

<script>
const app = Vue.createApp({
    data() {
        return {
            info: {
                name: 'Lee',
                age: 18,
            },
        }
    }
})
app.mount('#app')
</script>

可以看到，p 元素外面并不会再嵌套一层多元的元素。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

idea 安装插件(在线安装、离线安装)

idea 安装插件(在线安装、离线安装)

目录 在线安装 离线安装 在线安装 1、打开IntelliJ IDEA 2024.x软件&#xff0c; 点击file-Settings 2、点击搜索框&#xff0c;输入plugins&#xff0c;找到plugins列&#xff0c;输入xxx软件--点击install 安装 3、重启idea 离线安装 1、在官网上下载插件包 &#xff08;1&…
阅读更多...
FPGA三模冗余TMR工具（二）

FPGA三模冗余TMR工具（二）

学术和商业领域有许多自动化的三模冗余TMR工具&#xff0c;本文介绍当前主流的基于寄存器传输级的三模冗余工具&#xff08;Register-Transfer Level&#xff0c;RTL&#xff09;&#xff0c;基于重要软核资源的三模冗余工具&#xff0c;以及新兴的基于高层次综合的三模冗余工具…
阅读更多...
Ubuntu 中安装 RabbitMQ 教程

Ubuntu 中安装 RabbitMQ 教程

简介 RabbitMq作为一款消息队列产品&#xff0c;它由Erlang语言开发&#xff0c;实现AMQP&#xff08;高级消息队列协议&#xff09;的开源消息中间件。 应用场景 异步处理 场景说明&#xff1a;用户注册后&#xff0c;注册信息写入数据库&#xff0c;再发邮件、短信通知。 …
阅读更多...
WPF TextBox 输入限制 详解

WPF TextBox 输入限制 详解

总目录 前言 通常对于WPF输入框 输入的控制无非以下方式 1 直接禁止输入(包括粘贴) 不符合要求的字符 如只可输入数字的输入框&#xff0c;当你输入字母的时候是无法输入的 2 输入后&#xff0c;校验内容是否符合要求&#xff0c;然后提示错误&#xff0c;禁止提交信息 如只可…
阅读更多...
Docker 安装与配置 Nginx

Docker 安装与配置 Nginx

摘要 1、本文全面介绍了如何在 Docker 环境中安装和配置 Nginx 容器。 2、文中详细解释了如何设置 HTTPS 安全连接及配置 Nginx 以实现前后端分离的代理服务。 2、同时&#xff0c;探讨了通过 IP 和域名两种方式访问 Nginx 服务的具体配置方法 3、此外&#xff0c;文章还涵…
阅读更多...
Linux学习2.0——vi编辑器和gcc编译器的使用

Linux学习2.0——vi编辑器和gcc编译器的使用

vi是一种方便的代码编辑器&#xff0c;Linux系统一般是自带的、 vi和vim的区别&#xff1a;vim是vi的升级版&#xff0c;基础功能两者一致&#xff0c;不过在嵌入式开发板中 只有vi没有vim&#xff0c;但是在Ubuntu上我们可以使用vim编辑器&#xff0c;它的功能更加丰富。 这里…
阅读更多...
有一个4*5的矩阵如下，要求编写程序计算总和与平均值，并找出其中值最大的那个元素输出，以及其所在的行号和列号。

有一个4*5的矩阵如下，要求编写程序计算总和与平均值，并找出其中值最大的那个元素输出，以及其所在的行号和列号。

一、题目 二、代码解析 max_value 被初始化为矩阵的第一个元素 matrix[0][0]。max_row 和 max_col 分别被初始化为 0&#xff0c;表示最大值所在的行和列。s 被初始化为 0&#xff0c;用于累加矩阵中的所有元素。外层循环 for k in range(len(matrix)) 遍历矩阵的每一行。内层…
阅读更多...
html + css 淘宝网实战

html + css 淘宝网实战

之前有小伙伴说&#xff0c;淘宝那么牛逼你会写代码&#xff0c;能帮我做一个一样的淘宝网站吗&#xff0c;好呀&#xff0c;看我接下来如何给你做一个淘宝首页。hahh,开个玩笑。。。学习而已。 在进行html css编写之前 先了解下网页的组成和网页元素的尺寸吧 1.网页的组成 …
阅读更多...
网神SecFox FastJson反序列化RCE漏洞复现（附脚本）

网神SecFox FastJson反序列化RCE漏洞复现（附脚本）

0x01 产品描述&#xff1a; ‌网神SecFox是奇安信网神信息技术(北京)股份有限公司推出的一款运维安全管理与审计系统‌&#xff0c;集“身份认证、账户管理、权限控制、运维审计”于一体&#xff0c;提供统一运维身份认证、细粒度的权限控制、丰富的运维审计报告、多维度的预警…
阅读更多...
MoH：将多头注意力（Multi-Head Attention）作为头注意力混合（Mixture-of-Head Attention）

MoH：将多头注意力（Multi-Head Attention）作为头注意力混合（Mixture-of-Head Attention）

摘要 https://arxiv.org/pdf/2410.11842? 在本文中&#xff0c;我们对Transformer模型的核心——多头注意力机制进行了升级&#xff0c;旨在提高效率的同时保持或超越先前的准确度水平。我们表明&#xff0c;多头注意力可以表示为求和形式。鉴于并非所有注意力头都具有同等重…
阅读更多...
uniapp——微信小程序读取bin文件，解析文件的数据内容（三）

uniapp——微信小程序读取bin文件，解析文件的数据内容（三）

微信小程序读取bin文件内容 读取用户选择bin文件&#xff0c;并解析数据内容&#xff0c;分包发送给蓝牙设备&#xff1b; 文章目录 微信小程序读取bin文件内容读取文件读取内容返回格式 API文档&#xff1a; getFileSystemManager 关于App端读取bin文件&#xff0c;请查看&…
阅读更多...
穷举vs暴搜vs深搜vs回溯vs剪枝系列一＞组合

穷举vs暴搜vs深搜vs回溯vs剪枝系列一＞组合

题目&#xff1a; 解析&#xff1a; 代码&#xff1a; private List<List<Integer>> ret;private List<Integer> path;private int n,k;public List<List<Integer>> combine(int _n, int _k) {n _n;k _k;path new ArrayList<>();ret…
阅读更多...
鸿蒙开发实战之“使用HiLog和HiSysEvent进行日志与系统事件管理”

鸿蒙开发实战之“使用HiLog和HiSysEvent进行日志与系统事件管理”

HiLog和HiSysEvent作为鸿蒙&#xff08;HarmonyOS&#xff09;系统中进行日志记录和系统事件管理的关键组件&#xff0c;为开发者提供了强大的工具来追踪系统行为、调试应用以及监控设备状态。它们不仅简化了日志管理和事件追踪的流程&#xff0c;还提高了开发效率和系统可维护…
阅读更多...
Linux(Centos 7.6)yum源配置

Linux(Centos 7.6)yum源配置

yum是rpm包的管理工具&#xff0c;可以自动安装、升级、删除软件包的功能&#xff0c;可以自动解决软件包之间的依赖关系&#xff0c;使得用户更方便软件包的管理。要使用yum必须要进行配置&#xff0c;个人将其分为三类&#xff0c;本地yum源、局域网yum源、第三方yum源&#…
阅读更多...
数据中台从centos升级为国产操作系统后，资源增加字段时，提交报500错误

数据中台从centos升级为国产操作系统后，资源增加字段时，提交报500错误

文章目录 背景一、步骤1.分析阶段2.查看nginx3.修改用户&#xff08;也可以修改所有者权限&#xff09; 背景 故障报错&#xff1a; nginx报错信息&#xff1a; 2024/12/19 15:25:31 [crit, 500299#0: *249 onen0 " /var/lib/nginx/tmp/cient body/0000000001" f…
阅读更多...
uniapp 前端解决精度丢失的问题 （后端返回分布式id）

uniapp 前端解决精度丢失的问题 （后端返回分布式id）

原因&#xff1a; 后端使用分布式id, id为19位数&#xff0c;导致精度丢失 &#xff0c;前端解决方法 这个是通过浏览器请求回来的数据&#xff0c;这个时候id 数据已经丢失了&#xff0c;在数据库查询不到&#xff0c;在调获详情接口的时候会有问题 实际的&#xff1a; 解决…
阅读更多...
十大排序---下

十大排序---下

文章目录 前言一、归并排序二、快速排序三、计数排序四、桶排序五、基数排序总结 前言 今天我们来继续学习十大排序中剩下的五个。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、归并排序 归并排序&#xff08;Merge sort&#xff09;是建立在归…
阅读更多...
Git如何设置和修改当前分支跟踪的上游分支

Git如何设置和修改当前分支跟踪的上游分支

目录 前言 背景 设置当前分支跟踪的上游分支 当前分支已有关联&#xff0c;删除其关联&#xff0c;重新设置上游 常用的分支操作 参考资料 前言 仅做学习记录&#xff0c;侵删 背景 在项目开发过程中&#xff0c;从master新建分支时&#xff0c;会出现没有追踪的上游分…
阅读更多...
【笔记】Linux中vim编辑器回忆录

【笔记】Linux中vim编辑器回忆录

&#xff08;一&#xff09;替换 末行模式中 替换整个文本的某个字符为某个东西 全局替换 &#xff1a;%s/旧字符/新字符/g &#xff1a;进入命令行 % 全局范围 s 替换命令 /旧字符/新字符/ 将旧字符换为新字符 g 全局替换 局部范围替换 &#xff1a;开始行号&#xff0c;…
阅读更多...
【玩转MacBook】Git安装

【玩转MacBook】Git安装

Git 官网也提到了MacBook 可以使用 Homebrew 安装 Git&#xff0c;所以在此使用 Homebrew 安装。 1、安装 Homebrew 执行安装脚本 在 Terminal 中执行如下命令&#xff1a; /bin/bash -c "$(curl -fsSL https://gitee.com/ineo6/homebrew-install/raw/master/install.…
阅读更多...
最新文章

Copyright @ 2022~2023