拿來吧你——Vue官網：https://cn.vuejs.org/
目錄
1. 入門必知
1.1 了解Vue
1.2 基礎知識
2. 基礎必學
2.1 v-text指令
2.2 v-html指令
2.3 v-on指令
2.4 v-show指令
2.5 v-if指令
2.6 v-bind指令
2.7 v-for指令
2.8 v-model指令
3.案例參考
3.1 計數器
3.2 記事本
3.3 輪播圖
3.4 天氣預報
3.5 看笑話案例
不想學Vue?我不答應！入門Vue必備基礎-看這里！
手把手教你快速入門，僅需學會幾個知識點+小案例，分分鐘入門不是大問題！
所有案例已打包，點擊下載：https://download.csdn.net/download/qq_44140450/20360901
1. 入門必知
1.1 了解Vue
是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，
1.2 基礎知識
你需要學會：
- 引入vue：
<!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--或者：--> <!-- 生產環境版本，優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -
掌握幾個必要的指令：
- v-text指令；
- v-html指令；
- v-on指令
- v-show指令；
- v-if指令；
- v-bind指令；
- v-for指令；
- v-model指令
2. 基礎必學
2.1 v-text指令
- 作用：設定標簽的內容，
- 默認寫法：
<p v-text = " msg " ></p> -
差值寫法：
<p> {{ msg }} </p> -
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text指令案例</title> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; left: 50%; top: 20%; transform: translateY(-20%) translateX(-50%); } #app *{ margin: 10px; } #app ul li{ list-style-type: none; border-bottom: 1px solid #666; text-align: center; } </style> </head> <body> <div id="app"> <h1 v-text = "msg"></h1> <ul> <li v-text = 'myMsg[0]'></li> <li>{{myMsg[1]}}</li> <li>{{myMsg[2] + "人"}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ msg:"hello world!", myMsg:["海子哥","2749984520@qq.com","吉安永新"] } }) </script> </body> </html> -
效果
2.2 v-html指令
- 作用：設定元素innerHtml，
- v-html中有html結構會被自動決議為標簽，
- 與v-text區別
- v-text：無論內容是什么，只會決議為文本，
- v-html：能自動決議html結構，
- 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-html指令</title> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; left: 50%; top: 20%; transform: translateY(-20%) translateX(-50%); } #app *{ font-size: 14px; color: #666; margin: 10px; text-align: center; } </style> </head> <body> <div id= 'app' > <p v-text = "con"></p> <p v-html = "content"></p> <p v-text = "content"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ content:"<a href='https://blog.csdn.net/qq_44140450'>海子哥的主頁</a>", con:"海子哥", myMsg:["海子哥","188207245","吉安永新"] } }) </script> </body> </html> -
運行效果
2.3 v-on指令
- 作用：為元素系結事件，
- 寫法：
- 標準寫法
<!--以click事件為例--> <button v-on:click="方法名">按鈕</button> -
簡寫方式
<!--以click事件為例--> <input type="button" @click="方法名" value="按鈕">
- 標準寫法
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-on指令</title> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; left: 50%; top: 20%; transform: translateY(-20%) translateX(-50%); } #app *{ font-size: 14px; color: #666; margin: 10px; text-align: center; } </style> </head> <body> <div id="app"> <input type="button" v-on:click = "click_on" value="單擊滑鼠事件"> <input type="button" v-on:mouseleave = "mouse_leave" value="滑鼠離開事件"> <input type="button" v-on:mouseenter = "mouse_enter" value="滑鼠進入事件"> <input type="button" @mouseenter = "mouse_move" value="滑鼠進入事件"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", methods:{ click_on(){ alert("單擊了按鈕"); }, mouse_leave:function(){ alert("滑鼠離開") }, mouse_enter(){ alert("滑鼠進入！") }, mouse_move:function(){ alert("滑鼠移動了！") } } }) </script> </body> </html> -
運行效果
2.4 v-show指令
- 本質是切換元素的display屬性
- 作用：根據bool值來定義dispaly屬性，
- v-show的內容最終決議為一個bool值
- 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-show指令</title> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; width: 960px; height: 540px; left: 50%; top: 0; transform: translateX(-50%); } #app *{ display: inline; font-size: 14px; color: #666; margin: 10px; text-align: center; } #app button{ top: 0; outline: 0; border: 1px solid pink; background-color: pink; border-radius: 5px; } #app button:hover{ transition: 0.3s; box-shadow: 0 0 12px rgb(243, 133, 151); } #app img{ width: 960px; height: 540px; } </style> </head> <body> <div id="app"> <button @click="on">點擊查看物件</button> <br> <img src="./img/1.jpg" v-show="isShow"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ isShow:false, }, methods:{ on:function(){ this.isShow = !this.isShow; } } }) </script> </body> </html> -
運行結果
2.5 v-if指令
- 本質：修改dom元素，
- 作用：根據表達值（bool）切換元素狀態，
- 運算式值為ture時，元素存在于Dom樹中；否則，元素從Dom樹中移除，
- 頻發切換狀態下使用v-if，系統資源消耗大，建議這種狀態下使用v-show.
- 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-if指令</title> <!-- border --> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; width: 960px; height: 540px; left: 50%; top: 0; transform: translateX(-50%); } #app *{ display: inline; font-size: 14px; color: #666; margin: 10px; text-align: center; } #app button{ top: 0; outline: 0; border: 1px solid pink; background-color: pink; border-radius: 5px; } #app button:hover{ transition: 0.3s; box-shadow: 0 0 12px rgb(243, 133, 151); } #app img{ width: 960px; height: 540px; } </style> </head> <body> <div id="app"> <button @click="on">點擊一下查看物件</button> <img src="./img/3.jpg" v-if="isShow"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ isShow:false, }, methods:{ on:function(){ this.isShow = !this.isShow; } } }) </script> </body> </html> -
運行效果
2.6 v-bind指令
- 作用:設定元素屬性，為元素系結屬性，
- 格式：
- 標準寫法
v-bind:屬性名 = 運算式 -
簡寫方式
:屬性名 -
動態增刪屬性的兩種方式
<!--通過類名進行系結（推薦使用）--> <p v-bind:屬性名="{'類名':bool值}"></p> <!--使用三目運算子進行系結--> <p :屬性名="bool值？'類名':''"></p>
- 標準寫法
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-bind指令</title> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; width: 960px; height: 540px; left: 50%; top: 0; transform: translateX(-50%); } #app *{ display: inline; font-size: 14px; color: #666; margin: 10px; text-align: center; } #app button{ top: 0; outline: 0; border: 1px solid pink; background-color: pink; border-radius: 5px; } #app button:hover{ transition: 0.3s; box-shadow: 0 0 12px rgb(243, 133, 151); } #app img{ width: 960px; height: 540px; } .active{ transition: 0.5s; box-shadow: 2px 10px 12px rgb(238, 60, 90); border-radius: 30px; transform: translateY(-10px) translateZ(-10px); } </style> </head> <body> <div id="app"> <button @click="on">點擊一下</button> <img v-bind:src="imgSrc" :title="title" :class="isActive?'active':''"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ imgSrc:"./img/7.jpg", isShow:false, title:"188207245-肖家海", isActive:false, }, methods:{ on:function(){ this.isActive = !this.isActive; } } }) </script> </body> </html> -
運行效果
2.7 v-for指令
- 回應式生成串列結構，
- 作用：根據資料生成串列結構，陣列資料經常和v-for結合使用，
- 原始碼案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-for指令</title> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; left: 50%; top: 20%; transform: translateX(-50%) translateY(-20%); } #app *{ margin: 10px; } #app input{ top: 0; outline: 0; border: 1px solid darkslateblue; background-color: #fff; border-radius: 5px; } #app input:hover{ transition: 0.3s; color: #fff; background-color: darkslateblue; box-shadow: 0 0 12px darkslateblue; } #app li{ list-style-type: none; text-align: center; } </style> </head> <body> <div id="app"> <ul> <li v-for="item in arr"> {{ item }} </li> </ul> <input type="button" value="添加一個阿姨聯系方式" @click="add"> <input type="button" value="移除一個阿姨聯系方式" @click="remove"> <ul> <li v-for="(obj,index) in ayi"> {{index+1}}、{{ obj.name }}的電話號碼是：{{ obj.phone }} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ arr:["上海王阿姨", "北京李阿姨", "重慶劉阿姨", "南京胡阿姨"], ayi:[ {name:"上海王阿姨",phone:'1558596521'}, {name:"北京李阿姨",phone:'1365520452'}, {name:"重慶劉阿姨",phone:'1875554214'}, {name:"廣州趙阿姨",phone:'1985565421'}, {name:"南京胡阿姨",phone:'1865574258'} ], }, methods:{ add:function(){ this.ayi.push({name:"江蘇蘇阿姨",phone:'1998562478'}); }, remove:function(){ this.ayi.shift(); } } }); </script> </body> </html> -
運行效果
2.8 v-model指令
- v-model是一種雙向資料系結，
- 作用：設定、獲取表單元素的值，（同時解決了單標簽元素無法使用v-text指令的缺點），
- 系結的資料會和表單元素值進行雙向關聯，
- 代碼案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-model指令</title> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; left: 50%; top: 20%; transform: translateX(-50%) translateY(-20%); font-size:0 ; } #app *{ height: 30px; border: 1px solid darkslateblue; outline: 0; font-size: 0; font-size:18px ; } #app input[type="text"]{ padding-left: 5px; width: 200px; border-radius: 10px 0px 0 10px; } #app input[type="button"]{ width: 60px; height: 32px; border-radius: 0 10px 10px 0; vertical-align: top; background-color: darkslateblue; color: #fff; } #app input[type="button"]:hover{ transition: 0.3s; box-shadow: 0 0 12px darkslateblue; } </style> </head> <body> <div id="app"> <input type="text" @keyup.enter = "enter" v-model="val"><!-- --><input type="button" value="按他" @click="enter"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ val:"", }, methods:{ enter:function(){ if(this.val.trim() != "") alert("value:"+this.val); } } }); </script> </body> </html> -
運行效果
3.案例參考
3.1 計數器
- 參考原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>counter</title> <style> *{ margin: 0; padding: 0; } #context{ position:absolute; /* background-color: aquamarine; */ display: inline-block; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } #app{ border-radius: 5px; box-shadow: 0 0 5px #666; } #app button{ width: 60px; height: 40px; border: 0; outline: none; /* border-radius: 5px; */ background-color: #ccc; font-size: 28px; } #app button:hover{ transition: 0.5s; background-color: darkslateblue; color: #fff; /* box-shadow: 0 0 5px darkslateblue; */ } #app span{ margin: 20px; font-size: 18px; } </style> </head> <body> <div id="context"> <div id="app"> <button @click="sub" style="border-radius:5px 0 0 5px;">-</button> <span >{{ num }}</span> <button @click="add" style="border-radius:0 5px 5px 0;">+</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ num:1, }, methods:{ add:function(){ this.num = this.num >= 10? this.num:this.num+1; }, sub:function(){ this.num = this.num <=1 ? this.num:this.num-1; } } }) </script> </body> </html> -
運行效果
3.2 記事本
- 參考原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>記事本</title> <style> *{ margin: 0; padding: 0; font-family: "YouYuan"; } #notepad{ position: absolute; width: 50%; height: 50%; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); box-shadow: 0 0 8px #666; border-radius: 10px; } #notepad div{ width: 100%; height: 60%; overflow: auto; } #notepad h1{ width: 100%; padding-top: 10px; margin-bottom: 10px; text-align: center; } #notepad ul{ width: 90%; margin-left: 5%; } #notepad ul li{ list-style-type: none; padding-left: 10px; /* border-bottom: 1px solid #666; */ font-size: 18px; padding-bottom: 5px; padding-top: 5px; } #notepad ul li:hover input{ visibility:visible; } #notepad input[type="text"]{ width: 60%; margin-left: 10%; height: 25px; margin-bottom: 5px; margin-top: 5px; margin-right: 0; border:0; font-size: 18px; outline: none; border-radius: 5px 0 0 5px; box-shadow: 0 0 5px darkslateblue; } #notepad #sure{ width: 50px; height: 25px; margin-bottom: 5px; margin-top: 5px; margin-left: -6px; border:0; outline: none; border-radius: 5px; background-color: darkslateblue; color: #fff; transform: translateY(-1px); border-radius:0 5px 5px 0; } #notepad #sure:hover{ transition: 0.3s; box-shadow: 0 0 5px darkslateblue; } #notepad #left-p{ float:left; margin: 15px auto 5px 5px; border-bottom: 1px solid darkslateblue; } #notepad #right-but{ float:right; border-radius: 5px; margin: 15px 5px 5px auto; border: 1px solid darkslateblue; } #notepad #right-but:hover{ transition: 0.3s; background-color: darkslateblue; color: #fff; box-shadow: 0 0 5px red; } #notepad .remove-but{ visibility: hidden; width: 20px; height: 20px; color: red; border-radius: 20px; float: right; border: 0; text-align: center; margin-right: 5px; font-size: 18px; } </style> </head> <body> <div id="notepad"> <h1>記事本</h1> <input type="text" v-model="addVal" @keyup.enter="add"> <input type="button" id="sure" value="確認" @click="add"> <div> <ul > <li v-for="(item,index) in val" > {{index+1}}.{{ item }} <input class="remove-but" type="button" value="-" @click="clean(index)" > </li> </ul> </div> <p id="left-p" v-if = "val.length != 0">已有事務{{val.length}}條</p> <input id="right-but" v-show = "val.length != 0" type="button" value="全部清除" @click = "cleanAll"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#notepad", data:{ val:[], addVal:"", isShowCleanBut:false, }, methods:{ add:function(){ if(this.addVal.trim() != ""){ this.val.push(this.addVal.trim()); this.addVal=""; } }, clean:function(index){ this.val.splice(index,1); }, cleanAll:function(){ this.val=[]; } } }); </script> </body> </html> -
運行效果
3.3 輪播圖
- 參考原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>輪播圖</title> <style> *{ margin: 0; padding: 0; } #app{ width: 100%; height: 100%; } #context{ position: absolute; left:50%; top: 50%; transform: translateX(-50%) translateY(-50%); } img{ width: 768px; height: 432px; } #app img{ transition: all 0.3s; display: inline-block; } #app button{ position: absolute; top: 50%; transform: translateY(-50%); margin: 2px; width: 30px; height: 60px; border: 0; outline: none; color: #fff; font-size: 18px; border-radius: 2px; background-color: rgba(58, 58, 58, 0.548); } #app button:hover{ transition: 0.3s; box-shadow: 0 0 5px #666; } </style> </head> <body> <div id="app"> <div id = "context"> <button style="float: left;" @click="sub" >?</button> <img v-bind:src="imgSrc[index]"> <button style="float: right;transform:translateX(-34px) translateY(-50%);" @click="add">?</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ imgSrc:["./img/7.jpg", "./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg", "./img/5.jpg", "./img/6.jpg"], index: 0, }, methods:{ add:function(){ this.index =this.index < this.imgSrc.length-1? this.index + 1 :0; }, sub:function(){ this.index = this.index > 0? this.index - 1:this.imgSrc.length-1; } } }); </script> </body> </html> -
運行效果
3.4 天氣預報
- 參考原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>查詢天氣案例</title> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; width: 60%; height: 50%; top: 10%; left: 50%; transform: translateX(-50%) translateY(-10%); } /* #app .form_group{ margin-bottom: 5px; } */ #app .form_group input, #app .form_group button { margin: 0; padding: 0; display: inline-block; outline:none; } #app .form_group input[type='text']{ height: 31px; font-size: 15px; width: 80%; border: 2px solid darkslateblue; } #app .form_group button{ background-color: darkslateblue; color: #fff; width: 15%; height: 35px; border: 0; vertical-align: top; transform: translateX(-1px); } #app .hot-city{ margin: 5px; } #app .hot-city a{ font-size: 14px; color: #666; text-decoration: none; } #app .weather-list li{ display: inline-block; /* background-color: darkslategray; */ padding: 15px; border-right: 1px solid #666; } #app ul :nth-last-child(1){ border: 0; } #app .info_type, #app .info_temp, #app .info-date{ text-align: center; padding-bottom: 15px; } #app .info_type{ color: darkslateblue; font-size: 16px; } #app .info_temp{ color: darkslateblue; font-size: 8px; } #app .info-date{ color: #666; } </style> </head> <body> <div id="app"> <div> <div class="form_group"> <input type="text" @keyup.enter="down" v-model="city"><!----><button @click="down">查詢</button> </div> <div class="hot-city"> <a href="javascript:;" @click="hot_city('北京')">北京</a> <a href="javascript:;" @click="hot_city('上海')">上海</a> <a href="javascript:;" @click="hot_city('廣州')">廣州</a> <a href="javascript:;" @click="hot_city('深圳')">深圳</a> <a href="javascript:;" @click="hot_city('南昌')">南昌</a> </div> </div> <ul class="weather-list" > <li v-for="item in weatherList"> <div class="info_type"> <span class="iconfont"> {{item.type}} </span> </div> <div class="info_temp"> <b> {{item.low}} </b> ~ <b> {{item.high}} </b> </div> <div class="info-date"> <span> {{item.date}} </span> </div> </li> </ul> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ city:"", weatherList:[], }, methods:{ down:function(){ var that = this; axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" +this.city).then( function(response){ that.weatherList = response.data.data.forecast; },function(err){alert("連接失敗！")} ) }, hot_city(city){ this.city=city; this.down(); } } }); </script> </body> </html> -
運行效果
3.5 看笑話案例
- 參考原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>看笑話</title> <style> *{ margin: 0; padding: 0; } #app{ position: absolute; left: 50%; top: 20%; transform: translateX(-50%) translateY(-20%); font-size:0 ; margin: 5px; } #app *{ margin: 5px; outline: none; border: 1px solid darkslateblue; } #app input{ position: relative; width: 100px; height: 26px; left: 50%; transform: translateX(-50%); border-radius: 13px; } #app input:hover{ transition: 0.3s; color: #fff; background-color: darkslateblue; box-shadow: 0 0 12px darkslateblue; } #app textarea{ width: 600px; height: 300px; } </style> </head> <body> <div id="app"> <input type="button" value="來一個笑話" @click="down"> <textarea >{{ text }}</textarea> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue({ el:"#app", data:{ text:"", }, methods:{ down:function(){ var that = this; axios.get("https://autumnfish.cn/api/joke").then( function(response){ var str= response.data; that.text = response.data; },function (err){alter("連接失敗！")} ) }, } }); </script> </body> </html> -
運行效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/289337.html
標籤：其他
上一篇：Android：怎么看待大廠面試門檻越來越高，“面試造火箭，作業擰螺絲釘”現象越來越普遍？
下一篇：Kotlin基礎語法