Vue 核心 數據監聽 computed | watch

在這里插入圖片描述

Vue 核心 數據監聽 computed | watch

一、今日學習目標

1.指令補充

  1. 指令修飾符
  2. v-bind對樣式增強的操作
  3. v-model應用于其他表單元素

2.computed計算屬性

  1. 基礎語法
  2. 計算屬性vs方法
  3. 計算屬性的完整寫法
  4. 成績案例

3.watch偵聽器

  1. 基礎寫法
  2. 完整寫法

4.綜合案例 （演示）

  1. 渲染 / 刪除 / 修改數量 / 全選 / 反選 / 統計總價 / 持久化

二、指令修飾符

1.什么是指令修飾符？

? 所謂指令修飾符就是通過“.”指明一些指令后綴 不同的后綴封裝了不同的處理操作 —> 簡化代碼

2.按鍵修飾符

  • @keyup.enter —>當點擊enter鍵的時候才觸發

代碼演示：

  <div id="app"><h3>@keyup.enter  →  監聽鍵盤回車事件</h3><input v-model="username" type="text"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: ''},methods: {}})</script>

3.v-model修飾符

  • v-model.trim —>去除首位空格
  • v-model.number —>轉數字

4.事件修飾符

  • @事件名.stop —> 阻止冒泡
  • @事件名.prevent —>阻止默認行為
  • @事件名.stop.prevent —>可以連用 即阻止事件冒泡也阻止默認行為
 <style>.father {width: 200px;height: 200px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: skyblue;}</style><div id="app"><h3>v-model修飾符 .trim .number</h3>姓名：<input v-model="username" type="text"><br>年紀：<input v-model="age" type="text"><br><h3>@事件名.stop     →  阻止冒泡</h3><div @click="fatherFn" class="father"><div @click="sonFn" class="son">兒子</div></div><h3>@事件名.prevent  →  阻止默認行為</h3><a @click href="http://www.baidu.com">阻止默認行為</a></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',},methods: {fatherFn () {alert('老父親被點擊了')},sonFn (e) {// e.stopPropagation()alert('兒子被點擊了')}}})</script>

三、v-bind對樣式控制的增強-操作class

為了方便開發者進行樣式控制， Vue 擴展了 v-bind 的語法，可以針對 class 類名 和 style 行內樣式 進行控制 。

1.語法：

<div> :class = "對象/數組">這是一個div</div>

2.對象語法

當class動態綁定的是對象時，鍵就是類名，值就是布爾值，如果值是true，就有這個類，否則沒有這個類

<div class="box" :class="{ 類名1: 布爾值, 類名2: 布爾值 }"></div>

? 適用場景：一個類名，來回切換

3.數組語法

當class動態綁定的是數組時 → 數組中所有的類，都會添加到盒子上，本質就是一個 class 列表

<div class="box" :class="[ 類名1, 類名2, 類名3 ]"></div>

使用場景:批量添加或刪除類

4.代碼練習

 <style>.box {width: 200px;height: 200px;border: 3px solid #000;font-size: 30px;margin-top: 10px;}.pink {background-color: pink;}.big {width: 300px;height: 300px;}</style><div id="app"><!--綁定對象--><div class="box">黑馬程序員</div><!--綁定數組--><div class="box">黑馬程序員</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>

四、京東秒殺-tab欄切換導航高亮

1.需求：

? 當我們點擊哪個tab頁簽時，哪個tab頁簽就高亮

2.準備代碼:

 <style>* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #e01222;color: #fff;}</style><div id="app"><ul><li><a class="active" href="#">京東秒殺</a></li><li><a href="#">每日特價</a></li><li><a href="#">品類秒殺</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, name: '京東秒殺' },{ id: 2, name: '每日特價' },{ id: 3, name: '品類秒殺' }]}})</script>

3.思路：

1.基于數據，動態渲染tab（v-for）

2.準備一個下標 記錄高亮的是哪一個 tab

3.基于下標動態切換class的類名

五、v-bind對有樣式控制的增強-操作style

1.語法

<div class="box" :style="{ CSS屬性名1: CSS屬性值, CSS屬性名2: CSS屬性值 }"></div>

2.代碼練習

<style>.box {width: 200px;height: 200px;background-color: rgb(187, 150, 156);}</style><div id="app"><div class="box"></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>

3.進度條案例

 <style>.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}</style><div id="app"><div class="progress"><div class="inner"><span>50%</span></div></div><button>設置25%</button><button>設置50%</button><button>設置75%</button><button>設置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>

六、v-model在其他表單元素的使用

1.講解內容：

常見的表單元素都可以用 v-model 綁定關聯 → 快速 獲取 或 設置 表單元素的值

它會根據 控件類型 自動選取 正確的方法 來更新元素

輸入框  input:text   ——> value
文本域  textarea	 ——> value
復選框  input:checkbox  ——> checked
單選框  input:radio   ——> checked
下拉菜單 select    ——> value
...

2.代碼準備

 <style>textarea {display: block;width: 240px;height: 100px;margin: 10px 0;}</style><div id="app"><h3>小黑學習網</h3>姓名：<input type="text"> <br><br>是否單身：<input type="checkbox"> <br><br><!-- 前置理解：1. name:  給單選框加上 name 屬性 可以分組 → 同一組互相會互斥2. value: 給單選框加上 value 屬性，用于提交給后臺的數據結合 Vue 使用 → v-model-->性別: <input type="radio">男<input type="radio">女<br><br><!-- 前置理解：1. option 需要設置 value 值，提交給后臺2. select 的 value 值，關聯了選中的 option 的 value 值結合 Vue 使用 → v-model-->所在城市:<select><option>北京</option><option>上海</option><option>成都</option><option>南京</option></select><br><br>自我描述：<textarea></textarea> <button>立即注冊</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>

七、computed計算屬性

1.概念

基于現有的數據，計算出來的新屬性。 依賴的數據變化，自動重新計算。

2.語法

  1. 聲明在 computed 配置項中，一個計算屬性對應一個函數
  2. 使用起來和普通屬性一樣使用 {{ 計算屬性名}}

3.注意

  1. computed配置項和data配置項是同級的
  2. computed中的計算屬性雖然是函數的寫法，但他依然是個屬性
  3. computed中的計算屬性不能和data中的屬性同名
  4. 使用computed中的計算屬性和使用data中的屬性是一樣的用法
  5. computed中計算屬性內部的this依然指向的是Vue實例

4.案例

比如我們可以使用計算屬性實現下面這個業務場景

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

5.代碼準備

<style>table {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}</style><div id="app"><h3>小黑的禮物清單</h3><table><tr><th>名字</th><th>數量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}個</td></tr></table><!-- 目標：統計求和，求得禮物總數 --><p>禮物總數：? 個</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 現有的數據list: [{ id: 1, name: '籃球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '鉛筆', num: 5 },]}})</script>

八、computed計算屬性 VS methods方法

1.computed計算屬性

作用：封裝了一段對于數據的處理，求得一個結果

語法：

  1. 寫在computed配置項中
  2. 作為屬性，直接使用
    • js中使用計算屬性： this.計算屬性
    • 模板中使用計算屬性：{{計算屬性}}

2.methods計算屬性

作用：給Vue實例提供一個方法，調用以處理業務邏輯。

語法：

  1. 寫在methods配置項中
  2. 作為方法調用
    • js中調用：this.方法名()
    • 模板中調用 {{方法名()}} 或者 @事件名=“方法名”

3.計算屬性的優勢

  1. 緩存特性（提升性能）

    計算屬性會對計算出來的結果緩存，再次使用直接讀取緩存，

    依賴項變化了，會自動重新計算 → 并再次緩存

  2. methods沒有緩存特性

  3. 通過代碼比較

<style>table {border: 1px solid #000;text-align: center;width: 300px;}th,td {border: 1px solid #000;}h3 {position: relative;}span {position: absolute;left: 145px;top: -4px;width: 16px;height: 16px;color: white;font-size: 12px;text-align: center;border-radius: 50%;background-color: #e63f32;}</style><div id="app"><h3>小黑的禮物清單🛒<span>?</span></h3><table><tr><th>名字</th><th>數量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}個</td></tr></table><p>禮物總數：{{ totalCount }} 個</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 現有的數據list: [{ id: 1, name: '籃球', num: 3 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '鉛筆', num: 5 },]},computed: {totalCount () {let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>

4.總結

1.computed有緩存特性，methods沒有緩存

2.當一個結果依賴其他多個值時，推薦使用計算屬性

3.當處理業務邏輯時，推薦使用methods方法，比如事件的處理函數

九、計算屬性的完整寫法

既然計算屬性也是屬性，能訪問，應該也能修改了？

  1. 計算屬性默認的簡寫，只能讀取訪問，不能 “修改”
  2. 如果要 “修改” → 需要寫計算屬性的完整寫法

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

完整寫法代碼演示

 <div id="app">姓：<input type="text" v-model="firstName"> +名：<input type="text" v-model="lastName"> =<span></span><br><br> <button>改名卡</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: '劉',lastName: '備'},computed: {},methods: {}})</script>

十、綜合案例-成績案例

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

功能描述：

1.渲染功能

2.刪除功能

3.添加功能

4.統計總分，求平均分

思路分析：

1.渲染功能 v-for :key v-bind:動態綁定class的樣式

2.刪除功能 v-on綁定事件， 阻止a標簽的默認行為

3.v-model的修飾符 .trim、 .number、 判斷數據是否為空后 再添加、添加后清空文本框的數據

4.使用計算屬性computed 計算總分和平均分的值

十一、watch偵聽器（監視器）

1.作用：

? 監視數據變化，執行一些業務邏輯或異步操作

2.語法：

  1. watch同樣聲明在跟data同級的配置項中

  2. 簡單寫法： 簡單類型數據直接監視

  3. 完整寫法：添加額外配置項

    data: { words: '蘋果',obj: {words: '蘋果'}
},watch: {// 該方法會在數據變化時，觸發執行數據屬性名 (newValue, oldValue) {一些業務邏輯 或 異步操作。 },'對象.屬性名' (newValue, oldValue) {一些業務邏輯 或 異步操作。 }
}

3.偵聽器代碼準備

 <style>* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}</style><div id="app"><!-- 條件選擇框 --><div class="query"><span>翻譯成的語言：</span><select><option value="italy">意大利</option><option value="english">英語</option><option value="german">德語</option></select></div><!-- 翻譯框 --><div class="box"><div class="input-wrap"><textarea v-model="words"></textarea><span><i>??</i>文檔翻譯</span></div><div class="output-wrap"><div class="transbox">mela</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 請求方式：get// 請求參數：// （1）words：需要被翻譯的文本（必傳）// （2）lang： 需要被翻譯成的語言（可選）默認值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {words: ''},// 具體講解：(1) watch語法 (2) 具體業務實現})</script>

十二、翻譯案例-代碼實現

  <script>// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 請求方式：get// 請求參數：// （1）words：需要被翻譯的文本（必傳）// （2）lang： 需要被翻譯成的語言（可選）默認值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {//words: ''obj: {words: ''},result: '', // 翻譯結果// timer: null // 延時器id},// 具體講解：(1) watch語法 (2) 具體業務實現watch: {// 該方法會在數據變化時調用執行// newValue新值, oldValue老值（一般不用）// words (newValue) {//   console.log('變化了', newValue)// }'obj.words' (newValue) {// console.log('變化了', newValue)// 防抖: 延遲執行 → 干啥事先等一等，延遲一會，一段時間內沒有再次觸發，才執行clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: newValue}})this.result = res.data.dataconsole.log(res.data.data)}, 300)}}})</script>

十三、watch偵聽器

1.語法

完整寫法 —>添加額外的配置項

  1. deep:true 對復雜類型進行深度監聽
  2. immdiate:true 初始化 立刻執行一次
data: {obj: {words: '蘋果',lang: 'italy'},
},watch: {// watch 完整寫法對象: {deep: true, // 深度監視immdiate:true,//立即執行handler函數handler (newValue) {console.log(newValue)}}
}

2.需求

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 當文本框輸入的時候 右側翻譯內容要時時變化
  • 當下拉框中的語言發生變化的時候 右側翻譯的內容依然要時時變化
  • 如果文本框中有默認值的話要立即翻譯

3.代碼實現

 <script> const app = new Vue({el: '#app',data: {obj: {words: '小黑',lang: 'italy'},result: '', // 翻譯結果},watch: {obj: {deep: true, // 深度監視immediate: true, // 立刻執行，一進入頁面handler就立刻執行一次handler (newValue) {clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.dataconsole.log(res.data.data)}, 300)}} }})</script>

4.總結

watch偵聽器的寫法有幾種？

1.簡單寫法

watch: {數據屬性名 (newValue, oldValue) {一些業務邏輯 或 異步操作。 },'對象.屬性名' (newValue, oldValue) {一些業務邏輯 或 異步操作。 }
}

2.完整寫法

watch: {// watch 完整寫法數據屬性名: {deep: true, // 深度監視(針對復雜類型)immediate: true, // 是否立刻執行一次handlerhandler (newValue) {console.log(newValue)}}
}

十四、綜合案例

購物車案例

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

需求說明：

  1. 渲染功能
  2. 刪除功能
  3. 修改個數
  4. 全選反選
  5. 統計 選中的 總價 和 總數量
  6. 持久化到本地

實現思路：

1.基本渲染： v-for遍歷、:class動態綁定樣式

2.刪除功能 ： v-on 綁定事件，獲取當前行的id

3.修改個數 ： v-on綁定事件，獲取當前行的id，進行篩選出對應的項然后增加或減少

4.全選反選

  1. 必須所有的小選框都選中，全選按鈕才選中 → every
  2. 如果全選按鈕選中，則所有小選框都選中
  3. 如果全選取消，則所有小選框都取消選中

聲明計算屬性，判斷數組中的每一個checked屬性的值，看是否需要全部選

5.統計 選中的 總價 和 總數量 ：通過計算屬性來計算選中的總價和總數量

6.持久化到本地： 在數據變化時都要更新下本地存儲 watch

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

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

相關文章

缺陷責任期與質量保修期如何快速區分？

缺陷責任期與質量保修期如何快速區分？

缺陷責任期 《建設工程質量保證金管理辦法》第二條對缺陷給出了定義&#xff0c;是指建設工程質量不符合工程建設強制性標準、設計文件&#xff0c;以及承包合同的約定。缺陷責任期是指承包人對工程質量瑕疵擔保的期限&#xff0c;由發承包雙方在合同中進行約定&#xff0c;期…
閱讀更多...
制造業數字化轉型該怎么做？這篇1.6萬字的文章終于講透了！

制造業數字化轉型該怎么做？這篇1.6萬字的文章終于講透了！

制造業數字化轉型該怎么做&#xff1f;下面通過 1.6W 字干貨內容&#xff0c;全面講透制造業數字化轉型。 &#xff08;為防后續找不到&#xff0c;建議大家先點贊收藏~&#xff09; 引言&#xff1a; 1、發達國家制造業回流力度加大&#xff0c;中國制造業戰略地位提升。 …
閱讀更多...
selenium 解決 id定位、class定位中，屬性值帶空格的解決辦法

selenium 解決 id定位、class定位中，屬性值帶空格的解決辦法

一、前置說明 selenium遇到下面這種元素&#xff1a; <th id"demo id" class"value1 value2 value3 ">1、雖然id一般不會有空格&#xff0c;但是前端錯誤的這種寫法(如下圖)&#xff0c;會造成使用id定位不到元素&#xff0c;如&#xff1a; find…
閱讀更多...
面試遇到的一些問題（二）

面試遇到的一些問題（二）

1、v-if v-show 區別，他們的生命周期區別 v-show: (類似于display:none/black 的切換)不管初始值是true 或false 都會進行渲染，狀態改變也不會銷毀和重新生成。不會影響生命周期 v-if : 是根據條件，dom進行刪除插入操作。 依附于普通元素時：會觸發父組件的beforeUpdate和u…
閱讀更多...
IOday6作業

IOday6作業

1>使用有名管道&#xff0c;完成兩個進程的相互通信 //create.c #include<myhead.h>int main(int argc, const char *argv[]) {if((mkfifo("myfifo1",0664)) -1){perror("mkfifo");return -1;}if((mkfifo("myfifo2",0664)) -1){perror…
閱讀更多...
MYSQL練題筆記-高級查詢和連接-這系列最后一題以及下個系列（子查詢）的第一題

MYSQL練題筆記-高級查詢和連接-這系列最后一題以及下個系列（子查詢）的第一題

今天做了下面兩題&#xff0c;到第三題的時候想了下但是沒有太多的思路&#xff0c;然后看題解的時候實在是覺得自己不會&#xff0c;打算明天看吧。 1.按分類統計薪水相關的表和題目如下 我是想著簡化問題&#xff0c;先找出薪水低于30000的員工&#xff0c;然后找這些員工的上…
閱讀更多...
JAVA 鎖

JAVA 鎖

樂觀鎖 樂觀鎖是一種樂觀思想&#xff0c;即認為讀多寫少&#xff0c;遇到并發寫的可能性低&#xff0c;每次去拿數據的時候都認為別人不會修改&#xff0c;所以不會上鎖&#xff0c;但是在更新的時候會判斷一下在此期間別人有沒有去更新這個數據&#xff0c;采取在寫時先讀出…
閱讀更多...
Sam Altman當選“TIME時代周刊”2023年度最佳CEO！還有梅西、Taylor Swift當選...

Sam Altman當選“TIME時代周刊”2023年度最佳CEO！還有梅西、Taylor Swift當選...

TIME時代周刊昨日在官網公布了2023年最佳CEO—— Sam Altman當選! 此外&#xff0c;Taylor Swift當選年度最佳人物&#xff0c;梅西當選年度最佳運動員。 Sam Altman的當選可謂是實至名歸&#xff01;沒有誰能比火爆全球的ChatGPT背后&#xff0c;OpenAI的CEO更“成功”了。 …
閱讀更多...
ssh安裝及問題解決

ssh安裝及問題解決

ssh安裝及遇到的問題 ssh分為客戶端 openssh-client 和服務器 openssh-server&#xff0c;可以利用以下命令確認是否安裝&#xff1a; dpkg -l | grep ssh我用ubantu安裝的&#xff0c;所以默認安裝了客戶端 安裝客戶端和服務器端的命令分別為&#xff1a; sudo apt-get ins…
閱讀更多...
金融量化交易：使用Python實現遺傳算法

金融量化交易：使用Python實現遺傳算法

大家好&#xff0c;遺傳算法是一種受自然選擇過程啟發的進化算法&#xff0c;用于尋找優化和搜索問題的近似解決方案。本文將使用Python來實現一個用于優化簡單交易策略的遺傳算法。 1.遺傳算法簡介 遺傳算法是一類基于自然選擇和遺傳學原理的優化算法&#xff0c;其特別適用…
閱讀更多...
MySQL 教程 2.1

MySQL 教程 2.1

MySQL 插入數據 MySQL 表中使用 INSERT INTO 語句來插入數據。 你可以通過 mysql> 命令提示窗口中向數據表中插入數據&#xff0c;或者通過PHP腳本來插入數據。 語法 以下為向MySQL數據表插入數據通用的 INSERT INTO SQL語法&#xff1a; INSERT INTO table_name (colu…
閱讀更多...
使用Pytorch實現Grad-CAM并繪制熱力圖

使用Pytorch實現Grad-CAM并繪制熱力圖

這篇是我對嗶哩嗶哩up主 霹靂吧啦Wz 的視頻的文字版學習筆記 感謝他對知識的分享 看一下這個main cnn.py的文件 那這里我為了方便 就直接從官方的torch vision這個庫當中導入一些我們常用的model 比如說我這里的例子是采用的mobile net v3 large這個模型 然后這里我將pretrain設…
閱讀更多...
微信小程序 純css畫儀表盤

微信小程序 純css畫儀表盤

剛看到設計稿的時候第一時間想到的就是用canvas來做這個儀表盤&#xff0c;雖然本人的畫布用的不是很好但還可以寫一寫&#x1f600;。話不多說直接上代碼。最后有純css方法 <!--wxml--> <canvas canvas-id"circle" class"circle" >// js dat…
閱讀更多...
MySQL 忘記root密碼后重置密碼操作

MySQL 忘記root密碼后重置密碼操作

在忘記 MySQL 密碼的情況下&#xff0c;可以通過 --skip-grant-tables 關閉服務器的認證&#xff0c;然后重置 root 的密碼&#xff0c;具體操作步驟如下。 步驟 1)&#xff1a;關閉正在運行的 MySQL 服務。打開 cmd 進入 MySQL 的 bin 目錄。 步驟 2)&#xff1a;輸入mysqld -…
閱讀更多...
【Docker】容器數據持久化及容器互聯

【Docker】容器數據持久化及容器互聯

容器數據持久化及容器互聯 一、Docker容器的數據管理1.1、什么是數據卷1.2、數據卷特點1.3、數據卷使用 二、Docker的數據卷容器2.1、什么是數據卷容器2.2、掛載數據卷容器方法 三、Docker數據卷的備份和還原3.1、數據備份方法3.2、數據還原方法 四、Docker容器互聯4.1、docker…
閱讀更多...
數據寶庫：深入探討數據隱私與安全的要義

數據寶庫：深入探討數據隱私與安全的要義

寫在開頭 隨著數字時代的蓬勃發展&#xff0c;數據已成為當今社會的新型燃料。然而&#xff0c;正如能源需要保護和管理一樣&#xff0c;我們的數據同樣需要被妥善對待。本文將深入討論數據隱私和安全的不可忽視的重要性&#xff0c;并為您提供一些實用的基本措施和方法&#…
閱讀更多...
xcode ——Instrumets（網絡連接調試）使用

xcode ——Instrumets（網絡連接調試）使用

環境&#xff1a; instruments 使用只能在真機調試時使用&#xff0c;且真機系統必須ios15 點擊debug 按鈕——Network——Profile in Instruments 然后就可以看到如下面板 展開運行的項目&#xff0c;點擊session下的域名&#xff0c;下方回出現該域名下的網絡請求。點擊Deve…
閱讀更多...
管理類聯考——數學——真題篇——按題型分類——充分性判斷題——秒殺

管理類聯考——數學——真題篇——按題型分類——充分性判斷題——秒殺

題型結構 問題求解&#xff1a;通過計算求解&#xff0c;從五個選項中選出一個正確答案。條件充分性判斷&#xff1a;問所給的條件&#xff08;1&#xff09;&#xff08;2&#xff09;能否推出題設的結論&#xff0c;共有五個選項&#xff0c;從中選出正確的一個。&#xff0…
閱讀更多...
車聯網安全學習路標

車聯網安全學習路標

1. 汽車和物聯網基礎知識 首先&#xff0c;你需要全面了解汽車和物聯網的基礎知識&#xff0c;包括汽車電子體系結構、車載通信技術&#xff08;如CAN、LIN、FlexRay、Ethernet&#xff09;以及物聯網的架構和通信協議&#xff08;如MQTT、CoAP&#xff09;。 2. 汽車網絡安全…
閱讀更多...
LCR 090. 打家劫舍 II(leetcode)動態規劃

LCR 090. 打家劫舍 II(leetcode)動態規劃

文章目錄 前言一、題目分析二、算法原理1.狀態表示2.狀態轉移方程3.初始化4.填表順序5.返回值是什么 三、代碼實現總結 前言 在本文章中&#xff0c;我們將要詳細介紹一下LeetcodeLCR 090. 打家劫舍 II。采用動態規劃解決&#xff0c;這是一道經典的多狀態dp問題 一、題目分析…
閱讀更多...
最新文章

Copyright @ 2022~2023