vue入門

Attribute 綁定

v-bind:取值方式

開發前準備

安裝node.js需要高于15.0

創建vue項目

npm init vue@latest

安裝

npm install

啟動

npm run dev

模板語法

文本插值 {{ 變量 }}

<p> {{ mesg }} </p>

這種方式公支持單一表達式，也可以是js代碼，但是這代碼需要有返回值

原始html格式 v-html

<p v-html="屬性鍵"></p>

這個可以實現將返回的屬性鍵值是 html 的格式下，正確解析出 html

如 鍵為 baidu:<a href='http://www.baidu.com'>百度</a>
剛腳本內寫成
<p v-html="baidu"></p>

屬性綁定

v-bind:屬性名

簡寫方式為 :屬性名，如 v-bind:id,等同于:id

雙大括號不能在 html 標簽的屬性中使用，如果要響應式綁定，需要使用v-bind指令

即實現動態屬性值

<script >export default{data(){return {dtclass:"active",dtid:"dtid"}}}
</script><template><div v-bind:id="dtid" v-bind:class="dtclass">test</div>
</template>

上述執行后，div的id和class會變成 return內的對應值

如果 dtid 的值變為null或者undefind，則在頁面上會移除相應的標簽

也可使用批量綁定方式,即將所有屬性放到一個對象內，再通過v-bind綁定此對象

<div v-bind="obattr">test</div>data(){return {obattr:{id: "myid",class: "myclass"
}
}
}

class屬性綁定對象

用來動態顯示 class 屬性的屬性值

可以綁定的方式有

  • 對象
  • 數組
  • 三元運算
  • 數組嵌套對象
<template><!-- class 綁定對象 --><!-- 屬性值決定屬性是否顯示生效 --><!-- 即當 isActive 為ture時，則class屬性值顯示為 active兩個都為 ture 時，class屬性值顯示為 active text-danger --><h3 :class="{'active':isActive,'text-danger':hasError}">測試顯示class屬性值</h3><h3 :class="classObject">多個對象綁定</h3><!-- 這里運行后 class 的屬性值為  “active text-danger a b c” --><h3 :class="[classObject,mylist]">數組綁定</h3><h3 :class="[isActive ? 'active' : '']">三元運算</h3>
</template><script>export default {data(){return{isActive:true,hasError:true,classObject:{// 多個對象綁定時需要將這里的鍵與屬性名一致'active':true,'text-danger':true},mylist:["a","b","c"]}},methods:{},computed:{}}
</script>
<style>.active{color: red;font-size: 30px;}
</style>

style屬性綁定

同class屬性綁定

條件渲染

v-if 和 v-else

指令用于條件性渲染一塊內容。這塊內容只會在指令的表達式返回真值時才被渲染

v-else與v-if搭配使用，當不顯示v-if為假時，則渲染v-else的內容

<template>
<h3>條件渲染</h3>
<div v-if="flag">你能看見我么</div>
<div v-else>那你還是看看我吧</div>
</template>
<script>
export default {data(){return{flag:true}}
</script>

v-else-if

用于多重判斷

<template>
<h3>條件渲染</h3>
<div v-if="flag">你能看見我么</div>
<div v-else>那你還是看看我吧</div>
<div v-if="num == 10">10/div>
<div v-else-if="num == 20">20</div>
<div v-else="num == 30">30/div>
</template>
<script>
export default {data(){return{flag:true,num:10}}
</script>

v-show

同 v-if 的應用方式，只是這里不能接 v-else

v-if 與 v-show的區別

v-if 是“真實的”按條件染，因為它確保了在切換時，條件區塊內的事件監聽器和子組件都會被銷毀與重建
v-if 也是情性的:如果在初次染時條件值為 false，則不會做任何事。條件區塊只有當條件首次變為 true 時才被渲染。
相比之下，
v-show 簡單許多，元素無論初始條件如何，始終會被染，只有 CSS display 屬性會被切換.
總的來說，v-if 有更高的切換開銷，而 v-show 有更高的初始染開銷。
因此，如果需要頻繁切換，則使用總的來說，show 較好;
如果在運行時綁定條件很少改變，則 v-if 會更合適

列表渲染

v-for

循環新建標簽，也可以用這種方式遍歷對象的所有屬性

<p v-for="item in items">   #這里的in可以使用of替代{{ item }}
</p>

當遍歷對象的屬性時，可以使用如下獲取鍵值

<p v-for="（value,key,index） in items">   #這里的in可以使用of替代{{ value }},{{ key }},{{ index }}
</p>

對于json或者有嵌套的對象可以使用對象名.鍵名的方式調用

result:[{id：123，name:456},{id:456,name:789}]<p v-for="item in items">{{ item.id }}
</p>

也可以使用第二個參數，用來表示位置索引

result:[{id：123，name:456},{id:456,name:789}]<p v-for="(item，index) in items">   {{ item.id }}{{ index }}
</p>

通過key管理狀態

Vue 默認按照“就地更新”的策略來更新通過 or 染的元素列表。當數據項的順序改變時，Vue 不會隨之移動 DOM 元素的順序，而是就地更新每個元素，確保它們在原本指定的索引位置上渲染為了給 Vue 一個提示，以便它可以跟蹤每個節點的標識，從而重用和重新排序現有的元素，你需要為每個元素對應的塊提供一個唯一的 key attribute:

<div v-for="item of result" :key="item.id">

溫馨提示
在這里是一個通過 v-bind 綁定的特殊 attributekey推薦在任何可行的時候為 v-for 提供一個key attributekey 綁定的值期望是一個基礎類型的值，例如字符串或 number 類型

事件處理

v-on:事件類型

簡寫為 @：數據類型

<script >export default{data(){return {count:0}},methods:{addCount(){this.count++}}}
</script><template><h3>內聯事件處理器</h3><button @click="addCount">add</button><p>{{ count }}</p>
</template>

事件傳參

事件參數可以獲取 event 對象和通過事件傳遞數據

獲取event對象

    methods:{addCount(e){ #這里的e就是event對象，就是js原生的eventconsole.log(e)this.count++}}

傳參則是直接在事件上傳入參數

<script >export default{data(){return {count:0}},methods:{addCount(mesg){  #這里是形參console.log(mesg)this.count++}}}
</script><template><h3>內聯事件處理器</h3><button @click="addCount('hello')">add</button> #這里傳實參<p>{{ count }}</p>
</template>

如果要在傳參的過程中還傳遞event參數則需要在傳實參時，將envent以 $event 的方式傳入

<script >export default{data(){return {count:0}},methods:{addCount(mesg,e){  #這里是形參console.log(mesg)console.log(e)this.count++}}}
</script><template><h3>內聯事件處理器</h3><button @click="addCount('hello',$event)">add</button> #這里傳實參<p>{{ count }}</p>
</template>

事件修飾符

在處理事件時調用 event.preventDefaut0 或 evet.stopPropagation0 是很常見的。盡管我們可以直接在方法內調用，但如果方法能更專注于數據邏輯而不用去處理 DOM 事件的細節會更好
為解決這一問題，Vue 為 v-on 提供了事件修飾符，常用有以下幾個:

  1. .stop
  2. .prevent
  3. .once
  4. .enter

調用方式

<標簽名 @事件類型.事件修飾符=“xxx”>

<a @click:prevent="mymythod" href="https://baidu.com">test</a>

數組變化偵測

變更方法

Vue 能夠偵聽響應式數組的變更方法，并在它們被調用時觸發相關的更新。這些變更方法包括

push()
pop()
shift()
unshitf()
splice()
sort()
reverse()

替換數組方法

變更方法，顧名思義，就是會對調用它們的原數組進行變更。相對地，也有一些不可變(immutable) 方法，下面這些都不會更改原數組，而總是返回一個新數組。當遇到的是非變更方法時，我們需要將舊的數組替換為新的

filter()
concat()
slice()

<script >export default{data(){return {names:["a","b","c"]}},methods:{addList(){// 這種方式直接自動更新，向原數組添加數據并顯示this.names.push("d")  //變更方法// 這種方式不會自動更新，需要手動重新賦值才能顯示this.names = this.names.concat(["f","g"])//替換數組方法}}}
</script>
<template><button @click="addList">添加數據</button><ul><li v-for="(item,index) in names">{{ item }}</li></ul>
</template>

計算屬性

即 computed,將復雜邏輯封閉成一個方法，放入computed標簽內，在模板內直接調用方法名即可實現邏輯

<template><h3>測試</h3><p> {{ hasContent }}</p>
</template>
<script>export default {data(){return {item:{name:"myname",content: ["a","b"]}}},methods:{},// 計算屬性computed:{hasContent(){return this.item.content.length > 0 ? "yes" : "no"}}}
</script>

與方法的區別

重點區別:
計算屬性:計算屬性值會基于其響應式依賴被緩存。

一個計算屬性僅會在其響應式依賴更新時才重新計算方法:

方法調用總是會在重渲染發生時再次執行函數

偵聽器 watch

偵聽頁面數據變化

只能監聽 data 里面聲明的數據

<template><h3>測試偵聽器</h3><p>{{mesg}}</p><button @click="newMesg">修改數據</button>
</template>
<script>export default {data(){return{// mesg必須做為watch內的函數名mesg:"hello"}},methods:{newMesg(){this.mesg='update hello'}},computed:{},watch:{// newValue:改變之后的數據// oldvalue: 改變之前的數據// 函數名必須與偵聽的數據對象保持一致// 當 mesg 的值發生變化時，會自動執行這個函數mesg(newValue,oldValue){console.log(newValue+"===="+oldValue)}}}
</script>

表單輸入綁定 v-model

實時獲取用戶輸入的數據

<template><h3>測試表單輸入綁定</h3><form><input type="text" v-model="mesg"><p>{{ mesg }}</p><input type="checkbox" id="checkbox" v-model="checked"/><label for="checkbox">{{ checked }}</label></form>
</template>
<script>export default {data(){return{mesg:"",checked:false}},methods:{},computed:{}}
</script>

三人修飾符 lazy,number,trim

lazy: 只在失去焦點的時候調用

number: 只能輸入數字

trim: 去除前后空格

ref 模板引用

即使用 ref 屬性來操作DOM元素

  • 內容改變：模板語法{{}}
  • 屬性改變：v-band
  • 事件綁定：@事件名或者v-on指令

如果沒有特別需求，不要操作DOM

步驟是在 HTML元素中設置 ref 屬性值，然后再通過 this.$refs.屬性值的方式調用

<template><h3>測試 Ref 操作 DOM</h3><div ref="container" class="container">{{ container }}</div><button @click="getEle">getEle</button>
<!-- 這里的username供后面的 $refs 調用 --><input type="text" ref="username"/><button @click="getValue">getValue</button>
</template>
<script>export default {data(){return{container:"this is container"}},methods:{getValue(){console.log(this.$refs.username.value)},getEle(){// 使用 this.$refs.屬性名的方式引用在HTML元素中ref屬性指定的屬性值調用console.log(this.$refs.container)this.$refs.container.innerHTML = "UPDATA CONT"}},computed:{}}
</script>

組件組成

概念

Vue組件是可復用的 Vue 實例。組件是 Vue 應用程序的構建塊，它們提供了一種封裝 HTML、CSS 和 JavaScript 的方式，使得可以復用組件來構建復雜的界面。

其本質上是一個對象，下面的代碼就是一個組件，即一個 .vue 文件，組件中 template 是必須的，其它可以不必需

<template><h3>測試</h3>
</template>
<script>export default {data(){},methods:{},computed:{}}
</script>
<!-- scope: 如果寫了這個屬性，則表示讓當前樣式只在當前組件中生效 -->
<style scoped>
</style>

組件最大的優勢就是可復用性
當使用構建步驟時，我們一般會將 Vue 組件定義在一個單獨的 we 文件中，這被叫做單文件組件(簡稱 SFC)

組件注冊

一個組件在使用前需要被注冊，分為全局注冊和局部注冊

全局注冊

在main.js文件中操作，這種注冊方式使組件在整個項目中都可用

import MyComponent from './App.vue'app.component('MyComponent', MyComponent)

局部注冊

局部注冊的組件需要在使用它的父組件中顯式導入，并且只能在該父組件中使用。它的優點是使組件之間的依賴關系更加明確，并且對 tree-shaking 更加友好。

<script setup>
import ComponentA from './ComponentA.vue'
</script><template><ComponentA />
</template>

如果沒有使用 <script setup>，則需要使用 components 選項來顯式注冊：

import ComponentA from './ComponentA.js'export default {
// 這里用于注冊components: {ComponentA},setup() {// ...}
}

組件的引入

有四種引入方式

src屬性引入

即直接將script的 src 路徑設置為組件的路徑

<script src="path/to/vue.js"></script>  
<script src="path/to/your-component.vue"></script>

import引入

<script setup>
// RefDemo為引入名字，可以任取，一般與文件名一致
// from 后接 路徑，表示組件所在的路徑
import RefDemo from './components/RefDemo.vue';
</script><template>
<!-- 這里需要與 import 后的名稱一致，才能在模板中顯示 --><RefDemo />
</template>

路由配置引入

在Vue路由配置中通過components屬性引入：

const routes = [  { path: '/your-route', component: YourComponent }  
];

Vue.use()方法引入

在Vue插件中通過Vue.use()方法引入：

const YourPlugin = {  install(Vue, options) {  Vue.component('your-component', YourComponent);  }  
};  Vue.use(YourPlugin);

組件傳遞數據props

數據傳遞

注意事項:
傳遞數據，只能從父級傳遞到子級，不能反其道而行props,且porps只讀，無法在子級中修改

步驟：

  1. 在父模塊中引入子模塊
  2. 在模塊的中增加 <子模塊名 傳遞的變量名1=值1,…>
  3. 在子模塊export中增加 porps:[“變量名1”，“變量名2”，…]
  4. 在子模塊中以 模板語法 引用變量即可

father.vue

<template><Child :title=title :content=content /><div></div><h3>測試Props</h3></template>
<script >import Child from './Child.vue';export default {data(){return{title:"Father數據",content:"這是Fathercontent"}},components:{Child}}
</script>

child.vue

<template><h3>這是Child</h3><div>{{ title }}</div><div>{{ content }}</div>
</template>
<script>export default {props:["title","content"]}
</script>

數據校驗

直接在props增加以 傳遞數據變量為鍵的數據

校驗類型：

  • type:數據類型
  • default:父組件未傳遞變量時子組件顯示的默認值
  • required:必選項，不傳會發出警告
        props:{title:{type:[String,Object,Array]},content:{type:Number,// 當父組件沒有傳這個變量時顯示的默認值default:0},// 數字和字符串可以直接default，但是如果是數組和對象，必須通過工廠函數返回默認值names:{type:Array,default(){return ["空"]},// 必選項required: true} }

組件事件

在組件的模板表達式中，可以直接使用 $emit 方法觸發自定義事件觸發自定義事件的目的是組件之間傳遞數據

即實現子組件數據傳遞給父組件

步驟：

  1. 子組件中使用 this.$emit(方法名，參數)方式自定義一個事件
  2. 父組件中在引入的子組件模板內使用 @子組件方法名=“父方法名” 的方式引用

father.vue

<template><Child @send="getdata" /><div></div><h3>測試Props</h3><div>{{ mesg }}</div></template>
<script >import Child from './Child.vue';export default {data(){return{title:"Father數據",content:"這是Fathercontent",mesg:""}},components:{Child},methods:{getdata(mesg){console.log("ddddd")this.mesg=mesg}}}
</script>

Child.vue

<template><h3>這是Child</h3><button @click="sendToFather">發送數據</button>
</template>
<script>export default {methods:{sendToFather(){this.$emit("send","子組件數據")}}}
</script>

插槽 Slots

元素是一個插槽出口，標示了父元素提供的插槽內容(slot content)將在哪里被渲染

步驟

  1. 在父組件 template 中引入模板使用 <模板名>需要傳遞的內容</模板名> 方式
  2. 在子組件 template 中增加 標簽，即可在子組件中顯示

渲染作用域

插槽內容可以訪問到父組件的數據作用域，因為插槽內容本身是在父組件模板中定義的

father.vue

<template><Child><div>11111</div><!-- 這里可以動態顯示到子組件 --><h3>{{ mesg }}</h3><div>222222</div></Child>
</template>
<script >
import Child from './Child.vue';
export default {components: {Child},data() {return {mesg: "test"}}
}
</script>

child.vue

<template><h3>這是Child</h3><h3>開始引入slot</h3><slot></slot>   <h3>引入完成slot</h3>   
</template>
<script>
</script>

默認內容

當父組件沒有傳遞插槽給子組件時，可以在子組件child.vue中設置默認值

<template><h3>這是Child</h3><h3>開始引入slot</h3><slot>這里設置默認值</slot>   <h3>引入完成slot</h3>   
</template>
<script>
</script>

具名插槽

即給插槽命名，方便在子組件中指定slot引入

  1. 在父組件template中嵌套子組件template
  2. 在嵌套的template中添加屬性 v-slot:名稱 來定義slot名稱
  3. 在子組件中slot中添加name=名稱引用插槽

v-host可以使用#代替

father.vue

<template><Child><template v-slot:one><div>11111</div><!-- 這里可以動態顯示到子組件 --><h3>{{ mesg }}</h3></template><!-- v-slot可簡寫為 # --><template #two><div>222222</div><!-- 這里可以動態顯示到子組件 --><h3>{{ mesg2 }}</h3></template></Child>
</template>
<script >
import Child from './Child.vue';
export default {components: {Child},data() {return {mesg: "第一個插槽",mesg2: "第二個插槽"}}
}
</script>

child.vue

<template><h3>這是Child</h3><h3>開始引入slot</h3><slot name="one">默認1</slot>   <h3>引入完成slot</h3>   <slot name="two">默認2</slot>
</template>
<script>
</script>

在某些場景下插槽的內容可能想要同時使用父組件域內和子組件域內的數據。要做到這一點，我們需要一種方法來讓子組件在渲染時將一部分數據提供給插槽
我們也確實有辦法這么做!可以像對組件傳遞 props 那樣，向一個插槽的出口上傳遞attributes

組件的生命周期

每個Vue 組件實例在創建時都需要經歷一系列的初始化步驟，比如設置好數據偵聽，編譯模板，掛載實例到DOM，以及在數據改變時更新 DOM。在此過程中，它也會運行被稱為生命周期鉤子的函數，讓開發者有機會在特定階段運行自己的代碼

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/41537.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/41537.shtml
英文地址，請注明出處：http://en.pswp.cn/news/41537.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

大數據課程I2——Kafka的架構

大數據課程I2——Kafka的架構

文章作者郵箱：yugongshiye@sina.cn 地址：廣東惠州 ▲ 本章節目的 ? 掌握Kafka的架構； ? 掌握Kafka的Topic與Partition； 一、Kafka核心概念及操作 1. producer生產者，可以是一個測試線程，也可以是某種技術框架（比如flume）。 2. producer向kafka生…
閱讀更多...
SIP網絡音頻模塊SV-2401V網絡對講音頻模塊（支持POE）

SIP網絡音頻模塊SV-2401V網絡對講音頻模塊（支持POE）

功能和特點 音頻工作方式&#xff1a; 音頻解碼&#xff1a;即音頻播放。接收來自網絡的音頻流&#xff0c;經過模塊解碼后通過線路輸出高質量音頻信號。目前支持可以播放以下音頻格式&#xff1a;MP3、WAV (PCM IMA ADPCM)、G.711、G.722等&#xff0c;可以播放最高48k采樣率…
閱讀更多...
C語言，二級指針，p，*p,**p的使用

C語言，二級指針，p，*p,**p的使用

二級指針的使用是一個非常不易的問題&#xff0c;主要還是用的少了&#xff0c;如果經常使用到他&#xff0c;就會很明顯的感受到其具體使用方法。 char *a[10]{"as","bc","ssasd","asd"}&#xff1b; char **pa; 則 p,*p,**p的含義…
閱讀更多...
ROS-PyQt小案例

ROS-PyQt小案例

前言&#xff1a;目前還在學習ROS無人機框架中&#xff0c;&#xff0c;&#xff0c; 更多更新文章詳見我的個人博客主頁【前往】 ROS與PyQt5結合的小demo&#xff0c;用于學習如何設計一個界面&#xff0c;并與ROS中的Service和Topic結合&#xff0c;從而控制多個小烏龜的運動…
閱讀更多...
當判斷條件更多的時候，使用JS映射，讓代碼更加的優雅。

當判斷條件更多的時候，使用JS映射，讓代碼更加的優雅。

前端在進行各種判斷的時候&#xff0c;if會用到很多&#xff0c;但是如果判斷的條件過多&#xff0c;還一直用if&#xff0c;代碼會非常臃腫&#xff0c;而且可修改性不強 那么就有人說了&#xff0c;if不行&#xff0c;那我用switch case唄&#xff0c;但是用switch case 也沒…
閱讀更多...
不懂瞎指揮，就會闖大禍

不懂瞎指揮，就會闖大禍

不懂瞎指揮&#xff0c;就會闖大禍 【安志強趣講《孫子兵法》第12講】 【原文】 故君之所以患于軍者三&#xff1a;不知軍之不可以進而謂之進&#xff0c;不知軍之不可以退而謂之退&#xff0c;是謂縻軍&#xff1b; 【注釋】 患&#xff0c;危害、貽害。 縻&#xff08;m&…
閱讀更多...
Fine tune簡介

Fine tune簡介

目錄 Intro Related work Example .1 重新訓練 .2 使用新的數據集進行fine tune .3 修改net結構 References 移學習不是一種算法而是一種機器學習思想，應用到深度學習就是微調（Fine-tune)。通過修改預訓練網絡模型結構（如修改樣本類別輸出個數），選擇性載入預訓練網絡…
閱讀更多...
拒絕擺爛！C語言練習打卡第三天

拒絕擺爛！C語言練習打卡第三天

&#x1f525;博客主頁&#xff1a;小王又困了 &#x1f4da;系列專欄&#xff1a;每日一練 &#x1f31f;人之為學&#xff0c;不日近則日退 ??感謝大家點贊&#x1f44d;收藏?評論?? 目錄 一、選擇題 &#x1f4dd;1.第一題 &#x1f4dd;2.第二題 &#x1f4…
閱讀更多...
【LeetCode】337.打家劫舍Ⅲ

【LeetCode】337.打家劫舍Ⅲ

題目 小偷又發現了一個新的可行竊的地區。這個地區只有一個入口&#xff0c;我們稱之為 root 。 除了 root 之外&#xff0c;每棟房子有且只有一個“父“房子與之相連。一番偵察之后&#xff0c;聰明的小偷意識到“這個地方的所有房屋的排列類似于一棵二叉樹”。 如果 兩個直…
閱讀更多...
Command Injection

Command Injection

Command Injection Command Injection&#xff0c;即命令注入&#xff0c;是指通過提交惡意構造的參數破壞命令語句結構&#xff0c;從而達到執行惡意命令的目的。PHP命令注入攻擊漏洞是PHP應用程序中常見的腳本漏洞之一。 PHP命令注入漏洞的函數 systme()、exec()、shell_ex…
閱讀更多...
【3Ds Max】彎曲命令的簡單使用

【3Ds Max】彎曲命令的簡單使用

簡介 在3ds Max中&#xff0c;"彎曲"&#xff08;Bend&#xff09;是一種用于在平面或曲面上創建彎曲效果的建模命令。使用彎曲命令&#xff0c;您可以將對象沿特定軸向彎曲&#xff0c;從而創建出各種彎曲的幾何形狀。以下是使用3ds Max中的彎曲命令的基本步驟&…
閱讀更多...
8月17日，每日信息差

8月17日，每日信息差

1、專家稱無需太過擔心EG.5變異株 2、快手職級體系調整&#xff0c;職級序列由雙軌變單軌 3、抖音、火山引擎、中國電影資料館發起“經典香港電影修復計劃”&#xff0c;一年內將100部香港電影修復至4K版本。本次修復工作由火山引擎提供技術支持&#xff0c;與中國電影資料館…
閱讀更多...
【Bert101】最先進的 NLP 模型解釋【01/4】

【Bert101】最先進的 NLP 模型解釋【01/4】

0 什么是伯特&#xff1f; BERT是來自【Bidirectional Encoder Representations from Transformers】變壓器的雙向編碼器表示的縮寫&#xff0c;是用于自然語言處理的機器學習&#xff08;ML&#xff09;模型。它由Google AI Language的研究人員于2018年開發&#xff0c;可作為…
閱讀更多...
【Harbor】使用手冊

【Harbor】使用手冊

一、Harbor使用方式 Harbor 作為鏡像倉庫&#xff0c;主要的交互方式就是 將鏡像上傳到Harbor上&#xff0c;以及從Harbor上下載指定鏡像 在傳輸鏡像前&#xff0c;可以先使用 Harbor 提供的權限管理&#xff0c;將項目設置為私有項目&#xff0c;并對不同用戶設置不同角色&…
閱讀更多...
基于Spring Boot的高校在線考試系統的設計與實現（Java+spring boot+VUE+MySQL）

基于Spring Boot的高校在線考試系統的設計與實現（Java+spring boot+VUE+MySQL）

獲取源碼或者論文請私信博主 演示視頻&#xff1a; 基于Spring Boot的高校在線考試系統的設計與實現&#xff08;Javaspring bootVUEMySQL&#xff09; 使用技術&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java s…
閱讀更多...
uniapp小程序實現上傳圖片功能，并顯示上傳進度

uniapp小程序實現上傳圖片功能，并顯示上傳進度

效果圖&#xff1a; 實現方法&#xff1a; 一、通過uni.chooseMedia(OBJECT)方法&#xff0c;拍攝或從手機相冊中選擇圖片或視頻。 官方文檔鏈接: https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia uni.chooseMedia({count: 9,mediaType: [image,video],so…
閱讀更多...
vscode用ssh遠程連接linux

vscode用ssh遠程連接linux

1、vscode是利用ssh遠程連接linux的&#xff0c;所以首先確保vscode已經安裝了這兩個插件 2、點擊左下角的連接 3、選擇Connect to Host…… 5、按格式輸入 ssh 主機名ip 比如我的&#xff1a;ssh mnt192.168.198.128 6、選擇第一個打開配置文件&#xff0c;確保輸入正確 7、…
閱讀更多...
spring bean創建總覽 1

spring bean創建總覽 1

1 開始 這是一個總圖 下邊慢慢看 我們最基礎的寫的方式就是xml的方式去寫 像這樣&#xff0c; 而我們會通過applicationContext的方式去獲得我們的bean &#xff0c;我其中一篇博客就寫到了applicationContext他的父類就是beanFactory 但是中間的是怎么樣處理的呢&#xff1f…
閱讀更多...
VET：基因變異VCF數據集便捷提取工具

VET：基因變異VCF數據集便捷提取工具

VET&#xff1a;Vcf Export Tools 工具簡介 VET是一個基于R語言開發的變異位點信息批量提取工具&#xff0c;主要功能是根據VCF數據集&#xff0c;按照基因ID、樣品ID、變異位點ID等參數&#xff0c;實現批量提取&#xff0c;同時支持變異位點結構注釋&#xff0c;一步搞定變異…
閱讀更多...
android 的Thread類

android 的Thread類

Thread類 位于java.lang包下的Thread類是非常重要的線程類&#xff0c;它實現了Runnable接口&#xff0c;學習Thread類包括這些相關知識&#xff1a;線程的幾種狀態、上下文切換&#xff0c;Thread類中的方法的具體使用。 線程&#xff1a;比進程更小的執行單元&#xff0c;每…
閱讀更多...
最新文章

Copyright @ 2022~2023