vue2 案例入门

news/2024/7/22 0:26:54/文章来源:https://blog.csdn.net/zk13120778155/article/details/135111657

vue2 案例入门

  • 1 vue环境
  • 2 案例
    • 2.1 1.v-text v-html
    • 2.2 v-bind
    • 2.3 v-model
    • 2.4 v-on
    • 2.5 v-for
    • 2.6 v-if和v-show
    • 2.7 v-else和v-else-if
    • 2.8 计算属性和侦听器
    • 2.9 过滤器
    • 2.10 组件化
    • 2.11 生命周期
    • 2.12 使用vue脚手架
    • 2.13 引入ElementUI
      • 2.13.1 npm方式安装
      • 2.13.2 main.js导入elementUI组件
      • 2.13.3 配置vue快捷模板

1 vue环境

参考官网:https://v2.cn.vuejs.org/v2/guide/installation.html
npm 安装

npm install vue@^2

之后在项目引入

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

Visual Studio Code 安装插件

Auto Close Tag
Auto Rename Tag
Chinese (Simplified)
ESLint
HTML CSS Support
HTML Snippets
JavaScript (ES6) code snippets
Live Server
open in browser
Vetur
Vue 2 Snippets

在这里插入图片描述

2 案例

2.1 1.v-text v-html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{msg}} {{1+1}} {{hello()}} <br/><span v-html="msg"></span><br/><span v-text="msg"></span></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el:"#app",data:{msg:"<h1>Hello</h1>"},methods:{hello(){return "World"}}});</script>
</body>
</html>

2.2 v-bind

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 给html标签的属性绑定 v-bind是单向绑定--><div id="app"><a v-bind:href="link">gogogo</a><!--class,style      {class名:加上?}--><span v-bind:class="{active:isActive,'text-danger':hasError}"v-bind:style="{color: color1,'font-size': size}">你好</span></div><script src="./node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:"#app",data:{link:"http://www.baidu.com",isActive:true,hasError:true,color1:"red",size:"36px"}});</script>
</body>
</html>

2.3 v-model

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--表单项,自定义组件--><div id="app">精通的语言:<input type="checkbox" v-model="language" value="Java">java<br/><input type="checkbox" v-model="language" value="PHP">PHP<br/><input type="checkbox" v-model="language" value="Python">Python<br/>选中了{{language.join(",")}}</div><script src="./node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:"#app",data:{language:[]}})</script>
</body>
</html>

2.4 v-on

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!--事件中直接写js片段--><button v-on:click="num++">点赞</button><!--事件指定一个回调函数,必须是Vue实例定义的函数--><button v-on:click="cancle">v-on取消</button><!--简写v-on @--><button @click="cancle">简写@取消</button><!-- --><h1>{{num}} 个赞</h1><!--事件修饰符在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理DOM事件细节。为了解决这个问题,Vue.js为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的stop :阻止事件冒泡到父元素prevent: 阻止默认事件发生capture:使用事件捕获模式self:只有元素自身触发事件才执行。冒泡或捕获的都不执行once:只执行一次--><div style="border:1px solid red;padding:20px;" v-on:click="hello">大div<!--正常的点 @click会弹两次 加上stop阻止事件冒泡到父类--><div style="border:2px solid blue;padding:20px;" @click.stop="hello">小div<br/><a href="http://wwww.baidu.com">去百度</a></div><div style="border:2px solid blue;padding:20px;" @click.stop="hello">小div<br/><!--prevent: 阻止默认事件发生--><a href="http://wwww.baidu.com" @click.prevent>click.prevent点击也不去百度</a></div><div style="border:2px solid blue;padding:20px;" @click.stop="hello">小div<br/><!--prevent: 阻止默认事件发生--><a href="http://wwww.baidu.com" @click.prevent="hello">@click.prevent="hello"点击也不去百度,还可以走其他方法(hello方法)</a></div><div style="border:2px solid blue;padding:20px;" @click.stop="hello">小div<br/><!--prevent: 阻止默认事件发生--><a href="http://wwww.baidu.com" @click.prevent.stop="hello">@click.prevent.stop="hello"点击也不去百度,还可以走其他方法(hello方法),之后还可以阻止默认行为</a></div></div><div style="border:1px solid red;padding:20px;" v-on:click.once="hello">大div v-on:click.once 只执行一次再点就不弹了<!--正常的点 @click会弹两次 加上stop阻止事件冒泡到父类--><div style="border:2px solid blue;padding:20px;" @click.stop="hello">小div<br/><a href="http://wwww.baidu.com">去百度</a></div></div><!--按键修饰符在监听键盘事件时,我们经常需要检查常见的键值。Vue允许为 v-on 在监听键盘事件时添加按键修饰符只有在keyCode=13时调用vm.submit()<input v-on:keyup.13="submit">记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:<input v-on:keyup.enter="submit">缩写法<input @keyup.enter="submit">全部的按键别名:.enter.tab.delete.esc.space.up.down.left.fight--><!--组合按钮可以用如下修饰符来实现仅在按下响应按键时才会触发鼠标或键盘事件的监听器。.ctrl.alt.shiftAlt + C<input @keyup.alt.67="clear"Ctrl + Click<div @click.ctrl="doSomething">Do something</div>--><input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br/>提示:鼠标单击下input输入框后才有效果 按上加2 按下减2 按ctrl + click 直接改为10</div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el:"#app",data:{num:1},methods:{cancle(){this.num--;},hello(){alert("点击了")}}})</script>
</body>
</html>

2.5 v-for

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><ul><li v-for="user in users"><!-- 1.显示user信息:v-for="item in items" -->{{user.name}} ==> {{user.gender}} ==> {{user.age}}<!-- 2.获取数组下标:v-for="(item,index) in items"--><!-- 3.遍历对象v-for="value in object"v-for="(value,key) in object"v-for="(value,key,index) in object"-->对象信息v:<span v-for="v in user">{{v}} ==> </span><!-- 4.遍历的时候加上:key来区分不同数据,提高vue渲染效率 --></li><li v-for="user in users">对象信息v,k:<span v-for="(v,k) in user">{{k}} ==> {{v}} ==> </span></li><li v-for="user in users">对象信息v,k,i:<span v-for="(v,k,i) in user">{{k}} ==> {{v}} ==> {{i}} </span></li><li v-for="(user,index) in users"><!-- 2.获取数组下标:v-for="(item,index) in items"-->当前索引:{{index}} ==> {{user.name}} ==> {{user.gender}} ==> {{user.age}}</li><li v-for="user in users" :key="user.name"><!-- 1.显示user信息:v-for="item in items" -->{{user.name}} ==> {{user.gender}} ==> {{user.age}}<!-- 2.获取数组下标:v-for="(item,index) in items"--><!-- 3.遍历对象v-for="value in object"v-for="(value,key) in object"v-for="(value,key,index) in object"-->对象信息v:<span v-for="v in user">{{v}} ==> </span><!-- 4.遍历的时候加上:key来区分不同数据,提高vue渲染效率 --></li></ul><ul><!--推荐以后遍历的时候都加上 :key来区分不同的元素--><li v-for="(num,index) in nums" :key="index"></li></ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>let app = new Vue({el:"#app",data:{users:[{name:'孙悟空',gender:'男',age:25},{name:'克林',gender:'男',age:26},{name:'比克',gender:'男',age:27},{name:'贝吉塔',gender:'男',age:25},{name:'布玛',gender:'女',age:24}],nums:[1,2,3,4,4]}})</script>
</body>
</html>

2.6 v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--v-if,顾名思义,条件判断。当得到结果为true时,所在的元素会被渲染。v-show,当得到结果为true,所在的元素才会被显示--><div id="app"><button v-on:click="show = !show">点我啊</button><!--1.使用v-if显示--><h1 v-if="show">if=看到我....</h1><!--2.使用v-show显示--><h1 v-show="show">show=看到我</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>let app = new Vue({el:"#app",data:{show:true}})</script>
</body>
</html>

2.7 v-else和v-else-if

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><button v-on:click="random=Math.random()">点我啊</button><span>{{random}}</span><h1 v-if="random>=0.75">看到我拉 &gt;=0.75</h1><h1 v-else-if="random>=0.5">看到我拉 &gt;=0.5</h1><h1 v-else-if="random>=0.2">看到我拉 &gt;=0.2</h1><h1 v-else>看到我拉 &gt;=0.1</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>let app = new Vue({el:"#app",data:{random:1}})</script>
</body>
</html>

2.8 计算属性和侦听器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 某些结果是基于之前数据实时计算出来的,我们可以利用计算属性来完成--><ul><li>西游记;价格:{{xyjPrice}},数量: <input type="number" v-model="xyjNum"></li><li>水浒传;价格:{{shzPrice}},数量: <input type="number" v-model="shzNum"></li><li>总价:{{totalPrice}}</li>{{msg}}</ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>//watch可以让我们监控一个值的变化,从而做出相应的反应。new Vue({el:"#app",data:{xyjPrice:99.98,shzPrice:98.00,xyjNum:1,shzNum:1,msg:""},//计算属性computed:{totalPrice(){return this.xyjPrice*this.xyjNum+this.shzPrice*this.shzNum}},watch:{xyjNum(newVal,oldVal){// alert("newVal"+newVal+"==>oldVal"+oldVal)if(newVal>=3){this.msg="库存超出限制";this.xyjNum=3}else{this.msg="";}}}})</script></body>
</html>

2.9 过滤器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--过滤器常用语处理文本格式化的操作,过滤器可以用在两个地方:双花括号插值和v-bind表达式--><div id="app"><ul><li v-for="user in userList">{{user.id}},{{user.name}},{{user.gender==1?"男":"女"}} ,{{user.gender | genderFilter}} , {{user.gender|gFilter}}</li></ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>//全局过滤器Vue.filter("gFilter",function(val){if(val==1){return "男----";}else{return "女----"}})let vm = new Vue({el:"#app",data:{userList:[{id:1,name:'jack',gender:1},{id:2,name:'peter',gender:0}]},//过滤器实现 filters定义局部过滤器,只可以在当前vue实例中使用filters:{//用在{{user.gender | genderFilter}}genderFilter(val){if(val==1){return "男";}else{return "女"}}}})</script>
</body>
</html>

2.10 组件化

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><button v-on:click="count++">我被点了 {{count}}</button><!--1.1 使用全局组件--><counter></counter><!--2.2使用局部组件--><button-counter></button-counter></div><script src="./node_modules/vue/dist/vue.js"></script><script>//1.全局声明注册一个组件,可以在任何一个vue实例中调佣Vue.component("counter", {template: '<button v-on:click="count++">我被点了 {{count}} 次</button>',data() {return {count: 1}}});//2.局部声明一个组件const buttonCounter={template: `<button v-on:click="count++">我被点了 {{count}} 次····</button>`,data() {return {count: 1}}};new Vue({el: "#app",data: {count: 1},//2.2 必须写在vue里的components里components:{'button-counter': buttonCounter}})</script>
</body></html>

2.11 生命周期

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><span id="num">{{num}}</span><button @click="num++">赞!</button><h2>{{name}},{{num}}个人点赞</h2></div><script src="./node_modules/vue/dist/vue.js"></script> <script>let app = new Vue({el:"#app",data:{name:"张三",num:100},methods:{show(){return this.name;},add(){this.num++;},beforeCreate(){console.log("========beforeCreate========");console.log("数据模型未加载:"+this.name,this.num);console.log("方法未加载:"+this.show());console.log("html模板未加载:"+document.getElementById("num"));},created: function(){console.log("======= created==========");console.log("數数据模型已加载:"+this,name,this.num);console.log("方法已加载:"+this.show());console.log("htm1模板已加载:"+ document. getelementbyid("num"));console.log("htm模板未渲染:"+ document, getelementbyid("num"). innertext);},beforeMount(){console.log("========beforeMount========");console.log( "html模板未渲染:"+ document.getelementbyid ("num").innertext);},mounter(){console.log("========mounter========");console.log( "html模板已渲染:"+ document.getelementbyid ("num").innertext);},beforeUpdate(){console.log("========beforeUpdate========");console.log("数据模型已更新:",this.num);console.log( "html模板未更新: "+ document.getelementbyid("num").innertext);},updated(){console.log("========updated========");console.log("数据模型已更新:"+this.num);console.log("html模板已更新"+document.getElementById("num").innerText);}}})</script>
</body>
</html>

2.12 使用vue脚手架

1.全局安装webpack

npm install webpack -g

在这里插入图片描述
2.全局安装vue脚手架

npm install -g @vue/cli-init

在这里插入图片描述
3.初始化vue项目
vue init webpack appname:vue 脚手架使用webpack模块化初始化一个appname项目
建立项目目录C:\xx\work\code\vue\vue-demo
在项目目录中cmd执行

vue init webpack vue-demo

如果执行失败就尝试下面的命令

cnpm install --global vue-cli

成功后再次执行vue init webpack vue-demo
途中会询问参考我的选择

#直接回车
? Project name vue-demo
#直接回车
? Project description A Vue.js project
#直接回车
? Author
#选择Vue build standalone
? Vue build standalone
#按y 回车
? Install vue-router? Yes
#按n 回车
? Use ESLint to lint your code? No
#按n 回车
? Set up unit tests No
#按n 回车
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

cd 到生成的 vue-demo 里面输入

npm run dev

在这里插入图片描述
访问http://localhost:8080 搭建成功
在这里插入图片描述
后面转到Visual Studio Code中开发
config/index.js中port改启动端口
在这里插入图片描述

2.13 引入ElementUI

ElementUI官网:https://element.eleme.io

2.13.1 npm方式安装

npm i element-ui

2.13.2 main.js导入elementUI组件

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

在这里插入图片描述

2.13.3 配置vue快捷模板

文件->首选项->配置用户代码片段->vue.code-snippets
在这里插入图片描述

把原始内容注解掉,放入以下模板:

{"生成vue模板": {"prefix": "vue","body": ["<!-- $1 -->","<template>","<div class='$2'>$5</div>","</template>","","<script>","//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)","//例如:import 《组件名称》 from '《组件路径》';","","export default {","//import引入的组件需要注入到对象中才能使用","components: {},","data() {","//这里存放数据","return {","","};","},","//监听属性 类似于data概念","computed: {},","//监控data中的数据变化","watch: {},","//方法集合","methods: {","","},","//生命周期 - 创建完成(可以访问当前this实例)","created() {","","},","//生命周期 - 挂载完成(可以访问DOM元素)","mounted() {","","},","beforeCreate() {}, //生命周期 - 创建之前","beforeMount() {}, //生命周期 - 挂载之前","beforeUpdate() {}, //生命周期 - 更新之前","updated() {}, //生命周期 - 更新之后","beforeDestroy() {}, //生命周期 - 销毁之前","destroyed() {}, //生命周期 - 销毁完成","activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发","}","</script>","<style scoped>","//@import url($3); 引入公共css类","$4","</style>"],"description": "生成vue模板"},"http-get请求": {"prefix": "httpget","body": ["this.\\$http({","url: this.\\$http.adornUrl(''),","method: 'get',","params: this.\\$http.adornParams({})","}).then(({ data }) => {","})"],"description": "httpGET请求"},"http-post请求": {"prefix": "httppost","body": ["this.\\$http({","url: this.\\$http.adornUrl(''),","method: 'post',","data: this.\\$http.adornData(data, false)","}).then(({ data }) => { });" ],"description": "httpPOST请求"}
}

在这里插入图片描述

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

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

相关文章

读书短视频脚本:四川京之华锦信息技术公司

读书短视频脚本&#xff1a;打造引人入胜的文学世界 随着短视频平台的兴起&#xff0c;各类内容以更加直观、生动的方式呈现在观众面前。在这个信息爆炸的时代&#xff0c;如何将书籍的精华和魅力通过短视频这一新兴媒介传递给更多人&#xff0c;成为了一个值得探讨的话题。四…

有哪些藏文翻译器在线翻译?工具分享

有哪些藏文翻译器在线翻译&#xff1f;随着全球化的推进&#xff0c;语言之间的交流变得越来越重要。藏语作为中华民族的重要语言之一&#xff0c;其翻译需求也日益增加。为了满足这一需求&#xff0c;市场上涌现出了多款藏文翻译器在线翻译工具&#xff0c;它们以其高效、准确…

六一儿童节创意项目:教你用HTML5和CSS3制作可爱的雪糕动画

六一儿童节快到了&#xff0c;这是一个充满童趣和欢乐的日子。为了给孩子们增添一份节日惊喜&#xff0c;我们决定用HTML5和CSS3制作一个生动有趣的雪糕动画。通过这个项目&#xff0c;不仅能提升你的前端技能&#xff0c;还能带给孩子们一份特别的节日礼物。无论你是前端开发新…

CISCN——2024——re——app-debug

输入检查类题型 package com.example.re11113;import android.os.Bundle; import android.util.Log; import android.view.View.OnClickListener; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; im…

服务高峰期gc,导致服务不可用

随着应用程序的复杂性和负载的不断增加&#xff0c;对JVM进行调优&#xff0c;也是保障系统稳定性的一个重要方向。 需要注意&#xff0c;调优并非首选方案&#xff0c;一般来说解决性能问题还是要从应用程序本身入手&#xff08;业务日志&#xff0c;慢请求等&#xff09;&am…

[算法][数字][leetcode]2769.找出最大的可达成数字

题目地址 https://leetcode.cn/problems/find-the-maximum-achievable-number/description/ 题目描述 实现代码 class Solution {public int theMaximumAchievableX(int num, int t) {return num2*t;} }

记录一次安装k8s初始化失败

实例化 kubeadm init --configkubeadm.yaml --ignore-preflight-errorsSystemVerification报错 [init] Using Kubernetes version: v1.25.0 [preflight] Running pre-flight checks error execution phase preflight: [preflight] Some fatal errors occurred:[ERROR CRI]: co…

uniapp 使用vuex 在app上能获取到state,小程序获取不到

1. 在根目录下新建store目录, 在store目录下创建index.js定义状态值import Vue from vue; import Vuex from Vuex; import Vuex from vuex; Vue.use(Vuex);const store new Vuex.Store({ state: { login: false, token: , avatarUrl: , userName: }, mutations: { lo…

轻兔推荐 —— vfox

简介 vfox 是一个跨平台且可扩展的版本管理工具&#xff0c;终于有一个可以管理所有运行环境的工具了 - 支持一键安装 Java、Node.js、Flutter、.Net、Golang、PHP、Python等多种环境 - 支持一键切换不同版本 特点 支持Windows(非WSL)、Linux、macOS! 支持不同项目不同版本、…

Spark项目实训(一)

目录 实验任务一&#xff1a;计算级数 idea步骤分步&#xff1a; 完整代码&#xff1a; linux步骤分布&#xff1a; 实验任务二&#xff1a;统计学生成绩 idea步骤分布&#xff1a; 完整代码&#xff1a; linux步骤分步&#xff1a; 实验任务一&#xff1a;计算级数 请…

力扣106. 从中序与后序遍历序列构造二叉树

Problem: 106. 从中序与后序遍历序列构造二叉树 文章目录 题目描述思路复杂度Code 题目描述 思路 具体思路参考&#xff1a; Problem: 力扣105. 从前序与中序遍历序列构造二叉树 再后序遍历中&#xff1a;每次取int rootVal postorder[postEnd];构造根节点&#xff1b;左子树…

Pytorch环境配置2.0.1+ Cuda11.7

查找cuda、cudnn、Pytorch(GPU)及cuda和NVIDIA显卡驱动对应关系 查询可支持的最高cuda版本 nvidia-smi查看支持的cuda的版本 CUDA版本对应表 我的显卡驱动是Driver Version&#xff1a;535.40.&#xff0c;那么左边对应的CUDA都可以兼容 右上角为CUDA 版本&#xff0c;可以看…

java面试框架篇(Spring常见问题、SpringBoot、SpringMVC、mybatis经典问题、SpringCloud组件)

文章目录 面试专题-java框架篇1. spring常见问题1.1. spring是什么?1.2. 谈谈你对AOP的理解1.3. 谈谈你对IOC的理解1.4. Spring Boot、 Spring MVC和Spring有什么区别1.5. spring bean 生命周期1.6. spring事务传播机制有哪些?1.7. 循环依赖1.8. spring框架中使用了哪些设计模…

作为一名前端工程师,该如何控制高并发请求呢?「如果有更好的方案,欢迎讨论」

假如现在有几十、上百个请求&#xff0c;我们该如何去控制这么高的并发呢&#xff1f; 给你一分钟时间&#xff0c;稍作思考 &#xff5e; &#x1f914; 此场景有很多&#xff0c;比如 图片或文件批量下载、RSSHub高速抓取内容。。。 第一想法是不是请求池&#xff01;&…

虚拟化技术[1]之服务器虚拟化

文章目录 虚拟化技术简介数据中心虚拟化 服务器虚拟化服务器虚拟化层次寄居虚拟化裸机虚拟化VMM无法直接捕获特权指令解决方案 服务器虚拟化底层实现CPU虚拟化内存虚拟化I/O设备虚拟化 虚拟机迁移虚拟机动态迁移迁移内容&#xff1a;内存迁移迁移内容&#xff1a;网络资源迁移迁…

NSSCTF | [SWPUCTF 2021 新生赛]no_wakeup

打开题目后&#xff0c;点击三个&#xff1f;&#xff0c;发现是一个php序列化脚本 <?phpheader("Content-type:text/html;charsetutf-8"); error_reporting(0); show_source("class.php");class HaHaHa{public $admin;public $passwd;public function…

2024第三届AIGC开发者大会圆桌论坛:AI Agent中国落地发展现状及多模态结合具身智能的发展展望

在2024年第三届AIGC开发者大会上&#xff0c;多位业内专家齐聚一堂&#xff0c;共同探讨了AI Agent在中国的落地发展现状以及多模态结合具身智能的发展前景。本次圆桌论坛的嘉宾包括&#xff1a; Fast JP作者于金龙Agent创始人莫西莫必胜作者秦瑞January Agent创始人李晨 多模…

Cesium For Unity 在Unity中无法下载的问题

Unity 下载失败&#xff0c;提供百度网盘“com.cesium.unity-1.10.0.tgz”下载链接 链接&#xff1a;https://pan.baidu.com/s/1PybXQ8EvkRofOKD6rSN66g?pwd1234 提取码&#xff1a;1234 导入方法&#xff1a; 1.打开PackageManager;Window-PackageManager 2.在PackageMan…

Vue3:封装Table 表格组件

组件官网 elementPlus : 点击跳转 封装组件 创建新的组件文件: Table.vue <!-- PropTableS &#xff1a; 父组件传递过来的数据 (对象)PropTableS.tables : 父组件传递的对象中 存放表格每行显示的数据PropTableS.keyS &#xff1a; 父组件传递过来的对象&#xff0c;里…

Golang实现递归复制文件夹

代码 package zdpgo_fileimport ("errors""os""path/filepath""strings" )// CopyDir 复制文件夹 // param srcPath 源文件夹 // param desPath 目标文件夹 // return error 错误信息 func CopyDir(srcPath, desPath string) error {…