Softmax：原理及python實現
阿新 • • 發佈：2021-10-13
本文基於B站尚矽谷的Vue學習教程，推薦大家去觀看。
三種方法層層遞進——實現姓名案例
效果圖：
首先要明確，當data中資料有變化時，Vue的模板頁面會重新解析一遍。
一. 使用插值語法實現
示例程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用插值語法實現姓名案例</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="root"> 姓<input type="text" v-model:value="firstName"><br><br> 名<input type="text" v-model="lastName"><br><br> 全名:<span>{{firstName}}-{{lastName}}</span> </div> </body> <script type="text/javascript"> Vue.config.productionTip=false; const vm=new Vue({ el:'#root', data:{ firstName:"張", lastName:'三' } }) </script> </html>
缺點：插值方法不夠靈活，不好隨意取firstName和lastName文字框中的值來組成fullName。
二. 使用methods實現
示例程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用methods實現姓名案例</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="root"> 姓<input type="text" v-model:value="firstName"><br><br> 名<input type="text" v-model="lastName"><br><br> 全名:<span>{{fullName()}}</span> </div> </body> <script type="text/javascript"> Vue.config.productionTip=false; const vm=new Vue({ el:'#root', data:{ firstName:"張", lastName:'三' }, methods:{ fullName(){ return this.firstName + '-' + this.lastName; } } }) </script> </html>
缺點：fullName始終是個函式，每次都要重新計算，不夠高效。
三. 使用計算屬性實現
示例程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用計算屬性實現姓名案例</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <!-- 計算屬性: 1.定義:要用的屬性不存在，要通過已有屬性計算得來。 2.原理:底層藉助了objcet.defineproperty方法提供的getter和setter. 3. get函式什麼時候執行? (1).初次讀取時會執行一次。 (2).當依賴的資料發生改變時會被再次呼叫。 4.優勢:與methods實現相比，內部有快取機制(複用)，效率更高，除錯方便。 5.備註: 1.計算屬性最終會出現在vm上，直接讀取使用即可。 2.如果計算屬性要被修改，那必須寫set函式去響應修改，且set中要引起計算時依賴的資料發生變化 --> <div id="root"> 姓<input type="text" v-model:value="firstName"><br><br> 名<input type="text" v-model="lastName"><br><br> 全名:<span>{{fullName}}</span> </div> </body> <script type="text/javascript"> Vue.config.productionTip=false; const vm=new Vue({ el:'#root', data:{ firstName:"張", lastName:'三' }, computed:{ fullName:{ //讀取fullName時，get會被呼叫，返回值就作為fullName的值 // get什麼時候呼叫? 1. 初次讀取fu11Name時。2. 所依賴的資料發生變化時。 get(){ console.log("get被呼叫了"); return this.firstName+'-'+this.lastName;//此處this指向是vm }, //當fullName被修改時，set就會被呼叫 set(value){ console.log('set',value); const arr=value.split('-'); this.firstName=arr[0]; this.lastName=arr[1]; } }, //當不考慮修改，只讀取時可以簡寫如下，直接當做getter函式來用,但fullName本質上還是個屬性 /* fullName(){ console.log('get被呼叫來了'); return this.firstName+'-'+this.lastName; } */ } }) </script> </html>
計算屬性大部分只讀取，不修改，確實只讀取不修改時就可以簡寫。