Vite+Vue3学习笔记（2）——语法、渲染、事件、数据传递、生命周期、第三方库、前端部署

news2025/1/11 7:05:27

官网链接：https://cn.vuejs.org/

在这里插入图片描述

如果出现普通用户无法新建项目，必须要管理员身份新建，那么可以在nodejs的安装路径设置安全选项，提高普通用户的权限。
具体方法参考：

https://blog.csdn.net/weixin_43174650/article/details/121865934

0 基本标签

标签功能
template模板
div块
h1~h6标题
p文字
header头部
main主体
button按钮
img图片
canvas画布
ul无序列表
ol有序列表
li列表项目，用在ul和ol中
input输入文本框
textarea文本区域
select下拉选择框

1 模板语法

首先来看一下项目的结构，src下存放了需要我们关注的文件。

  • assets下包含了静态资源，包括图片和公共的css文件。
  • components下存放vue的组件。
  • App.vue是根组件。
  • main.js是主入口文件。

在这里插入图片描述

1.2 文本

数据绑定，形成能改变的动态文字。使用双花括号{{ }}插入文字。

<template>
		<p>{{ message }}</p>
</template>

<script>
  export default {
  data() {
	return {
		message:"学习Vue"
      }
    }
  }
</script>

1.3 链接

双花括号会将数据解释为普通文本，而不是HTML代码。为了输出真正的HTML代码，需要使用v-html代码。

<template>
	<div>{{rawHtml}}</div>
	<div v-html="rawHtml"></div>
</template>

<script>
  export default {
    data() {
      return {
        rawHtml:"<a href='https://www.baidu.com'>百度搜索</a>"
      }
    }
  }
</script>

在这里插入图片描述

1.4 属性（attribute）

位于尖角括号内的<*** class="text" width="100px" height="200px">，为标签的属性。

要让属性（class或id）成为能按照js改变的属性，需要使用v-bind指令。

<template>
	<div v-bind:id="dynamicID"></div>
</template>

<script>
export default{
    data(){
      return{
        dynamicID:10001,
      }
	}
</script>

注意：v-bind:可以简写为:。

1.5 表达式

只能单行表达式！
赋值语句不可以，if表达式也不可以。

<template>
	<p>输入：{{ num }}，输出：{{ num + 10 }}</p>
    <p>{{ flag ? "真":"假" }}</p>
</template>

<script>
	export default{
		data(){
	      return{
	        flag : true,
	        num:10,
	      }
	    }
	}
</script>

在这里插入图片描述

2 渲染方式

2.1 条件渲染：v-if和v-else

使用变量flag的true和false来控制是否渲染此对象。v-if后面可以紧跟着v-else来表达另外一种选择时的渲染对象。

<template>
    <p v-if="flag">Hello World!</p>
    <p v-else>I am Jonathan!</p>
</template>

<script>
	export default{
		data(){
	      return{
	        flag : true,
	      }
	    }
	}
</script>

2.2 v-show

只能控制一个，要么显示要么不显示。

<template>
    <p v-show="flag">Hello World!</p>
</template>

<script>
	export default{
		data(){
	      return{
	        flag : true,
	      }
	    }
	}
</script>

两者的区别：
v-if是真正的条件渲染，没有被渲染的会背销毁，重新渲染的会重建。是惰性的，有更高的切换开销。
v-show只是显示不显示的问题，所有都被渲染，有最高的初始渲染那开销。

2.3 列表渲染：v-for

把一个数组映射为一组元素，然后渲染。
维护模式，添加:key="id"确定一个唯一的标识，以便后期渲染时，只渲染新增的元素，以节约渲染开销。

<template>
    <ul>
      <li v-for="news in newslist" :key="news.id">
        {{ news.title }}
      </li>
    </ul>
</template>

<script>
	export default{
		data(){
	      return{
	        newslist:[
          {
            id:1001,
            title:"今日新闻1"
          },
          {
            id:1002,
            title:"今日新闻2"
          },
          {
            id:1003,
            title:"今日新闻3"
          },
          {
            id:1004,
            title:"今日新闻4"
          },
	      }
	    }
	}
</script>

在这里里插入图片描述

3 事件处理

3.1 监听事件：v-on或@

使用v-on或者@来监听DOM事件，并在触发事件时执行一些Javascript。用法为：v-on:lick="methodName"或者使用快捷方式@click="methodName"。

3.1.1简单事件处理

直接在click事件中添加变量自增。

<template>
    <button @click="counter += 1">点击增加counter值：{{ counter }}</button>
</template>

<script>
	export default{
		data(){
			return{
				counter:0,
			}
	    }
	}
</script>

在这里插入图片描述

3.1.2 事件处理方法

如果事件处理逻辑较为复杂，则v-on接收一个需要调用的方法（函数）名称。

<template>
    <button @click="clickHandle">点击弹出对话框</button>
</template>

<script>
	export default{
		methods:{
      		clickHandle(){
        		alert("只因你太美！");
      		},
    	}
	}
</script>

在这里插入图片描述

3.1.3 获取、修改页面信息

获取页面中的数据需要使用this.来指定对象。
event时间内有较多参数，也可以修改。

<template>
	<p>{{ message }}</p>
    <button @click="changeText">撤回消息</button>
</template>


<script>
	export default{
		data(){
			return{
				message:"消息通知",
			}
		},
		methods:{
			changeText(event){
				// 在时间中，读取data中的属性，是需要通过this.属性
			    this.message = "消息被撤回了。";
			    console.log(event);   //event为原生DOM event
			    event.target.innerText = "无新消息";
			},
		}
	}
</script>

在这里插入图片描述

3.1.4 事件传递参数

click可以传递参数到js内。
1、点击按钮传递参数：

<template>
	<p>----------------</p>
    <button @click="sendParam('hi')">send hi</button>
    <button @click="sendParam('bye')">send bye</button>
</template>

<script>
export default{
	methods:{
      sendParam(data){
        console.log(data);
      },
    }
}
</script>

点击按钮可以发现参数传递成功，调试输出了对应文本。

在这里插入图片描述
2、点击文本/列表传递参数

<template>
	<ul>
      <li @click="clickItemHandler(name)" 
      v-for="(name,index) in namelist" 
      :key="index">{{ name }}</li>
    </ul>
</template>

<script>
export default{
	data(){
		return{
			namelist:['owen','john','frank'],
		}
	},
	methods:{
      clickItemHandler(name_param){
        console.log(name_param)
      },
    }
}
</script>

点击无序列表的各个项目，可以发现下方调试面板输出了对应的name。

在这里插入图片描述

4 表单输入绑定

4.1 数据绑定v-model

可以使用v-model指令在表单<input>、<textarea>、<select>元素上穿件双向数据绑定，该指令会根据控件类型自动选取正确的方法来更新元素。
<input>为输入文本框，只有左半个标签，无</input>。

<template>
	<input type="text" v-model="username">
    <input type="text" v-model="password">
    <button @click="logIn">登录</button>
</template>

<script>
export default{
	data(){
		return{
			username:'',
			password:'',
		}
	},
	methods:{
      logIn(){
        console.log('username:' + this.username + ' ,password:' + this.password);
        console.log();
		},
    }
}
</script>

输入用户名和密码，点击登录，可以看到调试界面出现对应数据。
在这里插入图片描述

4.2 修饰符

4.2.1 lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。如果添加lazy修饰符，将会转化为在change事件之后进行同步（比如输入回车、鼠标点击其他位置）。

<template>
	<input type="text" v-model.lazy="username">
    <input type="text" v-model="password">
    <p>{{ username }},{{ password }}</p>
</template>

<script>
export default{
	data(){
		return{
			username:'',
			password:'',
		}
	},
}
</script>

输入两个文本框，可以发现下方文字不同的输出效果。
在这里插入图片描述

4.2.2 trim

自动过滤用户输入的首尾空白字符。

<template>
    <input type="text" v-model.trim="textBox">
    <p>{{ textBox }}</p>
</template>

<script>
export default{
	data(){
		return{
			textBox:'',
		}
	},
}
</script>

前后的空格都被过滤，中间的空格没有过滤。
在这里插入图片描述

5 组件基础

5.1 单文件组件

Vue单文件组件，文件后缀是.vue，是一种特殊的文件格式，运行将Vue组件的模板、逻辑与样式封装在单个文件中。

  • template：模板部分，相当于html
  • script：逻辑部分，相当于js。规范编程的话需要在export default内指定组件的name。
  • style：样式部分，相当于css。如果添加scoped，则表示当前样式只在该组件内部生效，外部不生效。
//文件名：MyComponent.vue
<template>
	<h1>单文件组件</h1>
</template>

<script>
export default{
	name:"MyComponent"
}
</script>

<style scoped>
h1{
	color:red;
}
</style>

5.2 加载组件

（1）<script>内引入组件：import MyComponent from './components/MyComponent.vue'
（2）<script>内挂载组件：components: { MyComponent }
（3）<template>内显示组件：<MyComponent />或<my-component />

注意：<script setup> </script>可以在<template>之前，如果这样的话，就不用第二步挂载组件了，但引入其他组件时，export default会报错。

在根组件App.vue内引用MyComponent.vue：

<script setup>
import HelloWorld from './components/HelloWorld.vue';
import TheWelcome from './components/TheWelcome.vue';
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <MyComponent />		//此处显示组件
      <HelloWorld />
    </div>
  </header>
  <main>
    <TheWelcome />
  </main>
</template>


<script>		// 此处引入组件，挂载组件
import MyComponent from './components/MyComponent.vue';
export default{
  components:{MyComponent}
}
</script>

在这里插入图片描述

5.3 组件组织关系

通常一个应用会以一棵嵌套的组件树的形式来组织。
在这里插入图片描述

6 样式style

<template class="styleName"> </template>中class能够引用样式。
在<style>中能够使用的样式种类：

名称功能
border设置边框（线性、宽度、颜色、圆角）
width宽度
height高度
color字体颜色
background背景（颜色、图片、位置）
font字型（字体、字号、加粗、斜体）
text文本（居中、行高、溢出内容处理）
margin外边距（上下左右）
padding内边距

参考网址：https://www.jianshu.com/p/ee736030239b

7 Props的组件交互

组件之间的数据存在交互，有传递数据的方式。

7.1 正向数据传递

prop是可以在组件上注册一些自定义的属性（attribute）。可以从父组件传递到子组件。

prop可以传递的类型：

名称Typedefault
字符串String“”
数字Number0，任何数字
布尔类型Booleantrue或者false
数组Arrayfunction() { return [] }
对象Objectfunction() { return [] }
函数Function

数组和对象必须使用函数进行返回

  • 传出内容的模板需要：
<MyComponent :param1_in="param1" :param2_in="param2"/>
  • 传入的模板需要：
props:{
	param1_in:{
		type:String,
		default:"",
	},
	param2_in:{
		type:Number,
		default:0,
	}
}

完整交互过程如下：

//App.vue
<template>
  <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  <div class="wrapper">
    <MyComponent :titleMC="title" :yearMC="year" :monthMC="month"/>	//此处传入的是内容
    <HelloWorld/>
    <TheWelcome />
  </div>
    
</template>


<script>
import HelloWorld from './components/HelloWorld.vue';
import TheWelcome from './components/TheWelcome.vue';
import MyComponent from './components/MyComponent.vue';
export default{
  name:'App',
  data(){
    return{
      title:'我是一个标题',		//此处定义传入数据
      year:2023,
    }
  },
  components:{
    HelloWorld,
    TheWelcome,
    MyComponent
  }
}
</script>

注意：

  • 不加:传递的是固定的字符串，<MyComponent title="title"/>。
  • 加:传递的是内容<MyComponent :title="title"/>。
//MyComponent.vue
<template>
	<h1>单文件组件</h1>
    <h3>prop传递数据</h3>
    <p>{{ titleMC }}</p>		//传入数据显示
    <p>{{ yearMC }}</p>
    <ul>
        <li v-for="(item,index) in monthMC" :key="index">{{ item }}</li>
    </ul>
</template>

<script>
export default{
	name:"MyComponent",
    props:{						//props固定格式
        titleMC:{				//传入的变量名
            type:String,		//传入的数据类型
            default:"未传入值的情况下的默认值",		//默认值
        },
        yearMC:{
            type:Number,
            default:1997,
        },
        monthMC:{
            type:Array,
            default:function(){
                return []
            }
        }
    },
}
</script>

在这里插入图片描述

7.2 自定义事件组件交互——反向传递数据

自定义事件可以在组件中反向传递数据，用$emit实现。
在子组件和父组件中需要构建两个methods：

  • 子组件在触发事件后的函数内使用this.$emit传递eventName和需要传递的数据。
  • 父组件监听eventName，并接入一个新函数来处理这个事件。

子组件示例：

// MyComponent.vue
<template>
	<button @click="sendClickHandle">点击反向传递</button>
</template>

<script>
export default{
	name:"MyComponent",
    data(){
        return{
            message:"我是MyComponent数据",
        }
    },
    methods:{
        sendClickHandle(){
            // 参数1：字符串，自定义事件，参数2：传递的数据
            this.$emit("onEvent",this.message);
            console.log("mycomponent.vue下 " + this.message);
        }
    }
}
</script>

父组件示例：

// App.vue
<template>
    <MyComponent @onEvent="getDataHandle"/>
    <p>{{ recvData }}</p>
</template>


<script>
import MyComponent from './components/MyComponent.vue';
export default{
  name:'App',
  data(){
    return{
      recvData:'null',
    }
  },
  components:{
    MyComponent
  },
  methods:{
    getDataHandle(data){
        this.recvData = data;
        console.log("app.vue下 " + this.recvData);
    }
  }
}
</script>

注意：<script>内给变量赋值或调用需要使用this.，<template>内不需要使用this.。

在这里插入图片描述

8 生命周期

每个组件在被创建时都要经过一系列的初始化过程。例如，需要设置数据监听、编译模板、将实例挂载到DOM，并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。这给了用户在不同阶段添加自己代码的机会。
自动化调用，无需手动写。

生命周期名称功能
beforeCreate创建前
created创建时
beforeMount渲染前
mounted渲染时网络请求放在此函数内
beforeUpdate更新前
updated更新时
beforeUnmount卸载前卸载消耗性能的处理
uomunted卸载时
<template>
    <p>---------------------------</p>
    <h3>生命周期函数</h3>
    <p>年龄：{{ lifetime }}</p>
    <button @click="lifetime ++">点击改变</button>
</template>

<script>
export default{
	name:"MyComponent",
    data(){
        return{
            lifetime:0,
        }
    },
    beforeCreate(){
        console.log("beforeCreate");
    },
    created(){
        console.log("created");
    },
    beforeMount(){
        console.log("beforeMount")
    },
    mounted(){
        console.log("mounted")
        // 把网络请求放到这里
    },
    beforeUpdate(){
        console.log("beforeUpdate")
    },
    updated(){
        console.log("updated")
    },
    beforeUnmount(){
        console.log("beforeUnmount")
        // 卸载之前，把消耗性能的处理都干掉，比如定时器
    },
    unmounted(){
        console.log("unmounted")
    }
}

可以在调试窗口看到生命周期函数按照顺序执行。
在这里插入图片描述

9 Vue引入第三方

9.1 轮播图——Swpier

Swpier是触摸滑动插件，纯js打造的，面向手机、平板电脑等移动终端。
官方文档：

https://swiperjs.com/vue

1、首先下载Swiper，命令行内输入：

npm install --save swiper

2、添加Swiper、Pagination（页码）和Autoplay（自动轮播），实现多张图片自动轮播。

<template>
  <div>
  	<swiper :modules="modules" :pagination="{clickable:true}" :autoplay="{autoplay: true, delay: 3000}">
    	<swiper-slide><img src="../assets/1.jpeg" alt=""></swiper-slide>
    	<swiper-slide><img src="../assets/3.jpeg" alt=""></swiper-slide>
        <swiper-slide><img src="../assets/6.jpeg" alt=""></swiper-slide>
    </swiper>
  </div>
</template>


<script>
  import {Pagination, Autoplay} from 'swiper/modules';
  import {Swiper,SwiperSlide} from 'swiper/vue';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import 'swiper/css/autoplay';
  export default{
    name:"helloworld",
    components:{
      Swiper,
      SwiperSlide,
    },
    data(){
      return{
        modules:[Pagination,Autoplay]
      }
    },
  }
</script>

<style scoped>
img{
  width:100%
}
</style>

三张图片能够以3秒间隔循环播放。
在这里插入图片描述

9.2 Axios网络请求库

Axios是基于promise的网络请求库。

1、安装：

npm intall --save axios

2、引入：

import axios from ‘axios’

<template>
  <div>
    <p>res_data:{{ res_data }}</p>
    <p>error_data:{{ error_data }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default{
  name:'TheWelcome',
  data(){
    return{
      res_data:'',
      error_data:'',
    }
  },
  mounted(){
    console.log("mounted");
    // 网络请求
    axios({
      method:'get',
      url:'http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php',
      // 使用http可以连接，使用https无法连接
    }).then(res =>{
      console.log(res.data);
      this.res_data = res.data;
    }).catch(error =>{
      console.log(error.data);
      this.error_data = error.data;
    })
  }
}
</script>

连接HTTP正常，连接HTTPS可能会出现跨域问题，暂时不知道怎么解决。

在这里插入图片描述

10 局域网内打开网页

首先找到文件夹下的package.json文件，将"dev":"vite"修改为"dev": "vite --host 0.0.0.0"。
在这里插入图片描述

重新启动服务器，然后就可以看到调试窗口内出现了新的网址，在局域网内输入该网址就可以打开该网页。

在这里插入图片描述
手机上显示网页。

在这里插入图片描述

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

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

相关文章

毫米波雷达：从 3D 走向 4D

毫米波雷达：从 3D 走向 4D

1 毫米波雷达已广泛应用于汽车 ADAS 系统 汽车智能驾驶需要感知层、决策层、执行层三大核心系统的高效配合&#xff0c;其中感知层通过传感器探知周围的环境。汽车智能驾驶感知层将真实世界的视觉、物理、事件等信息转变成数字信号&#xff0c;为车辆了解周边环境、制定驾驶操…
阅读更多...
2023 年有什么流行的开源项目？

2023 年有什么流行的开源项目？

背景介绍 作为一个资深开源参与者&#xff0c;我盘点下2023年有意思的开源项目&#xff0c;从GitHub热榜角度盘点下。 作为工程师我对技术理解顺势而为&#xff0c;当风口袭来拥抱研究使用&#xff0c;理解其中精髓为风口添砖加瓦。 2023年很特殊&#xff0c;AI生成开始火热…
阅读更多...
挑战Python100题(7)

挑战Python100题(7)

100+ Python challenging programming exercises 7 Question 61 Print a unicode string "hello world". Hints: Use ustrings format to define unicode string. 打印一个unicode字符串“helloworld”。 提示：使用u“字符串”格式定义unicode字符串。 Solution…
阅读更多...
【全网最细】爆肝3天，2023年年度音乐+图片+热词终于出来了，来看看你知道几个？

【全网最细】爆肝3天，2023年年度音乐+图片+热词终于出来了，来看看你知道几个？

目录 前言 2023年度音乐 1.《阳光开朗大男孩》 2.《早安隆回》 3.《一路生花》 4.《爱如火》 5.《向云端》 6.《孤勇者》 7.《起风了》 8.《只因你太美》 2023年度图片 1.R星 2.小飞棍来喽 3.一键三连 4.只因你太美 5.原神&#xff0c;启动&#xff01; 2023年…
阅读更多...
毅速：3D打印技术传统模具行业影响深远

毅速：3D打印技术传统模具行业影响深远

随着3D打印技术的不断发展和完善&#xff0c;一系列的优势使其在模具制造领域的应用越来越广泛&#xff0c;这一技术在模具行业的应用将为整个行业带来变革。 首先&#xff0c;3D打印技术将大幅提高模具制造的精度和效率。传统的模具制造过程中&#xff0c;由于加工设备的限制和…
阅读更多...
SOAP请求发送(基于Hutool)

SOAP请求发送(基于Hutool)

拿到SOAP请求的时候&#xff0c;先使用SOAPUI工具解析WSDL文件&#xff0c;得到请求方法列表&#xff0c;新建一个请求&#xff0c;SOAPUI查看协议版本和Action如下&#xff1a; 如下为解析出的XML入参示例。 <soapenv:Envelope xmlns:soapenv"http://schemas.xmlsoap…
阅读更多...
ffmpeg 解码文件时的时间戳问题

ffmpeg 解码文件时的时间戳问题

实时流和普通文件 1 实时流 实时流编码时&#xff0c;我们一般不进行b帧编码&#xff0c;但是文件存储时为了减小大小&#xff0c;会增加b帧&#xff0c;实时流只带了I&#xff0c;P帧&#xff0c;那就会好很多 2 普通文件 很多文件带了b帧&#xff0c;所以要使用解码时间去同…
阅读更多...
软件测试/测试开发丨Selenium环境安装配置

软件测试/测试开发丨Selenium环境安装配置

一、selenium 环境配置 1、下载浏览器 目前比较常用的浏览器是 Google Chrome 浏览器&#xff0c;所以本教程以 chrome 为主&#xff0c;后面简介一下其他浏览器的环境配置。 chrome 下载: www.google.cn/chrome/ 2、chromedriver 环境配置 chromedriver 是chromedriver提…
阅读更多...
搜索算法和推荐算法、广告算法的区别

搜索算法和推荐算法、广告算法的区别

广告和推荐算法的技术框架比较相似&#xff0c;在线计算时都分为召回&#xff08;candidates generating&#xff09;和排序&#xff08;candidates ranking&#xff09;两个阶段&#xff08;这似乎是计算资源有限条件下&#xff0c;所有检索问题的通用架构&#xff09;。 在某…
阅读更多...
从a类到b类理解原型链

从a类到b类理解原型链

一.一个Student类 class Student {constructor(name, age) {this.name name;this.age age;}learn() {console.log("学习");}}let a1new Student(王德发,20)console.log(a1); 打印出来的结果: 二.extends继承 // 老师类class Teacher {constructor(name, age) {thi…
阅读更多...
什么是uniapp？用uniapp开发好不好用？

什么是uniapp？用uniapp开发好不好用？

随着移动应用市场的持续发展&#xff0c;开发者们面临着不断增长的需求和多样化的平台选择。在这个背景下&#xff0c;UniApp 应运而生&#xff0c;成为一种跨平台开发框架&#xff0c;为开发者提供了一种高效、简便的方式来开发移动应用程序。利用 UniApp 开发应用程序可以节省…
阅读更多...
飞企互联-FE企业运营管理平台 登录绕过漏洞复现

飞企互联-FE企业运营管理平台 登录绕过漏洞复现

0x01 产品简介 飞企互联-FE企业运营管理平台是一个基于云计算、智能化、大数据、物联网、移动互联网等技术支撑的云工作台。这个平台可以连接人、链接端、联通内外&#xff0c;支持企业B2B、C2B与O2O等核心需求&#xff0c;为不同行业客户的互联网转型提供支持。 0x02 漏洞概…
阅读更多...
Android画布Canvas drawPath绘制跟随手指移动的圆，Kotlin

Android画布Canvas drawPath绘制跟随手指移动的圆，Kotlin

Android画布Canvas drawPath绘制跟随手指移动的圆&#xff0c;Kotlin import android.content.Context import android.graphics.Canvas import android.graphics.Color import android.graphics.Paint import android.graphics.Path import android.os.Bundle import android.…
阅读更多...
快速实现图片重命名（统一命名或按数字顺序命名）

快速实现图片重命名（统一命名或按数字顺序命名）

快速实现图片重命名&#xff08;统一命名或按数字顺序命名&#xff09; 有时候跑数据集需要图像的命名有规律&#xff0c;但储存时的命名可能是没有规律的。这时候手动一个个右键重命名&#xff0c;再进行修改过于耗时&#xff0c;这里给出简便的统一重命名方法。 按数字排序…
阅读更多...
Linux驱动开发学习笔记6《蜂鸣器实验》

Linux驱动开发学习笔记6《蜂鸣器实验》

目录 一、蜂鸣器驱动原理 二、硬件原理分析 三、实验程序编写 1、 修改设备树文件 &#xff08;1&#xff09;添加pinctrl节点 &#xff08;2&#xff09;添加BEEP设备节点 &#xff08;3&#xff09;检查PIN 是否被其他外设使用 2、蜂鸣器驱动程序编写 3、编写测试AP…
阅读更多...
LVM与磁盘配额

LVM与磁盘配额

文章目录 LVM与磁盘配额一、LVM概述1、LVM概述2、LVM机制的基本概念2.1 PV&#xff08;Physical Volume&#xff0c;物理卷&#xff09;2.2 VG&#xff08;Logical Volume&#xff0c;逻辑卷&#xff09;2.3 LV&#xff08;Logical Volume&#xff0c;逻辑卷&#xff09; 二、L…
阅读更多...
PayPal账户被封是因为什么？如何解决？

PayPal账户被封是因为什么？如何解决？

Paypal作为跨境出海玩家最常用的付款工具之一&#xff0c;同时也是最容易出现冻结封号现象。保障PP账号安全非常重要&#xff0c;只有支付渠道安全&#xff0c;才不会“白费力气”&#xff0c;那么最重要的就是要了解它的封号原因以做好规避。 一、Paypal账号被封原因 1、账号…
阅读更多...
Anolis安装Jdk保姆级教学

Anolis安装Jdk保姆级教学

前言 欢迎来到本博客&#xff0c;我们将带领你完成在Anolis操作系统上安装Java Development Kit&#xff08;JDK&#xff09;的详细过程。Anolis操作系统是一款基于Linux的轻量级操作系统&#xff0c;专为容器和云原生应用而设计。在Anolis上安装JDK将为你提供一个稳定、高效的…
阅读更多...
释放资源的方式

释放资源的方式

为什么要学这个释放资源的方式&#xff1f; //5 关流outputStream.close();inputStream.close();原来这种方式&#xff0c;一般项目都会有很多代码&#xff0c;万一前面的代码有异常&#xff0c;就无法执行到这一步&#xff0c;绑定的系统资源就得不到释放&#xff0c;影响系统…
阅读更多...
【Web】Ctfshow Thinkphp5 非强制路由RCE漏洞

【Web】Ctfshow Thinkphp5 非强制路由RCE漏洞

目录 非强制路由RCE漏洞 web579 web604 web605 web606 web607-610 前面审了一些tp3的sql注入,终于到tp5了&#xff0c;要说tp5那最经典的还得是rce 下面介绍非强制路由RCE漏洞 非强制路由RCE漏洞原理 非强制路由相当于开了一个大口子&#xff0c;可以任意调用当前框…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023