013-Vue：前端知识结构概述、基本语法、声明周期
生活随笔
收集整理的這篇文章主要介紹了
013-Vue：前端知识结构概述、基本语法、声明周期
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前端知識結構概覽
1、常見的js框架
說明：js框架底層封裝的都是js。
2、常見的ui框架
概述：
- ui是用戶界面的英文簡稱，那么ui框架又是什么呢?框架又可以理解為模板，ui框架也就是ui模板。這和編程里的封裝有些類似，就是說一些ui設計的常用效果已經被別人封裝成了ui框架，你想實現哪個效果只要直接調用就行，不需要太糾結于底層實現。
第一節 Vue.js簡介
1、框架
任何編程語言在最初的時候都是沒有框架的，后來隨著在實際開發過程中不斷總結『經驗』，積累『最佳實踐』，慢慢的人們發現很多『特定場景』下的『特定問題』總是可以『套用固定解決方案』。
于是有人把成熟的『固定解決方案』收集起來，整合在一起，就成了『框架』。
在使用框架的過程中，我們往往只需要告訴框架『做什么（聲明）』，而不需要關心框架『怎么做（編程）』。
對于Java程序來說，我們使用框架就是導入那些封裝了『固定解決方案』的jar包，然后通過『配置文件』告訴框架做什么，就能夠大大簡化編碼，提高開發效率。我們使用過的junit其實就是一款單元測試框架。
而對于JavaScript程序來說，我們使用框架就是導入那些封裝了『固定解決方案』的『js文件』，然后在框架的基礎上編碼。
用洗衣服來類比框架：
典型應用場景：洗衣服
輸入數據：衣服、洗衣液、水
不使用框架：手洗
使用框架：使用洗衣機，對人來說，只需要按鍵，具體操作是洗衣機完成的。人只是告訴洗衣機做什么，具體的操作是洗衣機完成的。
實際開發中使用框架時，我們也主要是告訴框架要做什么，具體操作是框架完成的。
2、Vue.js
2.1、Vue.js的作者
在為AngularJS工作之后，Vue的作者尤雨溪開發了Vue.js。他聲稱自己的思路是提取Angular中自己喜歡的部分，構建出一款相當輕量的框架。
Vue最早發布于2014年2月。作者在Hacker News、Echo JS與 Reddit的JavaScript版塊發布了最早的版本。一天之內，Vue 就登上了這三個網站的首頁。
Vue是Github上最受歡迎的開源項目之一。同時，在JavaScript框架/函數庫中， Vue所獲得的星標數已超過React，并高于Backbone.js、Angular 2、jQuery等項目。
2.2、Vue.js的官網介紹
Vue.js官網網址：https://cn.vuejs.org/
Vue (讀音 /vju?/，類似于view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈 以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
總結：
- Vue是一套前端框架，免除原生JavaScript（js）中的DOM操作，簡化書寫。
- 基于MVVM(Model-View-ViewModel)思想，實現數據的雙向綁定，將編程的關注點放在數據上。
- 單向展示：只能把模型中的數據取出來放到視圖中單向展示
- 缺點1：只能單方向的把數據從模型中取出放到視圖層展示
- 缺點2：只能實現展示而不是綁定（之前使用js或jquery需要先獲取Dom對象，在通過對象獲取屬性值來展示數據，一旦模型數據發生改變那么js代碼也會發生變化。現在使用Vue可以實現綁定，將來模型數據發生變化視圖中的數據也會跟著變化，不需要修改任何代碼）
- 雙向綁定：通過View提供的一個對象(ViewModel)將View(html元素)和Model(數據)實現雙向綁定
- 即：模型變了視圖跟著變，視圖變了模型跟著變。而且這些變化都是自動完成的。
第二節 準備Vue.js環境
1、開發中的最佳實踐
『最佳實踐』是實際開發中，針對特定問題提煉出來的最好的解決方案。把『最佳實踐』抽取出來，封裝到各自編程語言的程序包中，就是框架的基礎。
- Java語言的程序包：jar包
- JavaScript語言的程序包：外部js文件
對于Java程序來說，框架=jar包+配置文件。對于Vue來說，導入Vue的外部js文件就能夠使用Vue框架了。
2、Vue框架的js文件獲取
- 官網提供的下載地:1：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
說明：這種方式直接打開的是vue.js里面的內容，可以先創建一個vue.js文件，之后把內容復制到這個創建的文件中。
- 官網提供的下載地址2：https://v2.cn.vuejs.org/v2/guide/installation.html
分別點擊下載：
3、本地創建vue.js文件
說明1：使用HBuilderX編寫vue.js
-
第一步：在HBuilderX中創建工程
-
第二步：在工程目錄下創建script目錄用來存放vue.js文件
-
第三步：創建空vue.js文件
-
第四步：將官網提供的vue.js文件的內容復制粘貼到本地vue.js文件中
說明2：使用idea編寫vue.js
- 第一步：在idea中創建java-web工程
- 第二步：在web目錄下創建script目錄用來存放vue.js文件
- 第三步：將官網提供的vue.js文件復制粘貼到本地的script目錄中
4、創建HTML文檔并引入vue.js
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script language="JavaScript" src="script/vue.js"></script> <script type="text/javascript"></script> </body> </html>第三節 基本語法：聲明式渲染
1、概念
1.1、聲明式
『聲明式』是相對于『編程式』而言的。
- 聲明式：告訴框架做什么，具體操作由框架完成
- 編程式：自己編寫代碼完成具體操作
1.2、渲染
上圖含義解釋：
- 藍色方框：HTML標簽
- 紅色圓形：動態、尚未確定的數據
- 藍色圓形：經過程序運算以后，計算得到的具體的，可以直接在頁面上顯示的數據、
- 渲染：程序計算動態數據得到具體數據的過程
2、demo
2.1、定義js對象的2種方式
說明：可以看到js有2種創建對象方式，寫的是js代碼不用引入vue.js文件，這是為了對比下面創建Vue對象的方式。
2.2、vue聲明式渲染
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數/* new Vue({xxx}):創建Vue對象，里面的key加不加引號都可以。每個鍵值對使用逗號隔開，最后一個不用加逗號，里面的參數為{xxx}可以理解為一個對象el: 用于指定Vue對象要關聯的HTML元素。el就是element的縮寫通過id屬性值指定HTML元素時，語法格式是：#id (選擇器)data: 設置了Vue對象中保存的數據*/var vue = new Vue({el:"#div0","data":{msg:"hello!!!"}});}</script> </head> <body> <div id="div0"><!-- 使用{{}}格式，指定要被渲染的數據 --><span>{{msg}}</span> </div> </body> </html>說明：
- 通過el屬性指定選擇器"#app"，來綁定屬性值id="app"的div標簽。
- 通過data設置屬性message和標簽中的{{message}}進行綁定。
3、查看聲明式渲染的響應式效果
運行測試：
修改msg屬性的值：
通過驗證Vue對象的『響應式』效果，我們看到Vue對象和頁面上的HTML標簽確實是始終保持著關聯的關系，同時看到Vue在背后確實是做了大量的工作。
第四節 基本語法：綁定元素屬性
1、基本語法
v-bind:HTML標簽的原始屬性名2、demo
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數/* new Vue({xxx}):創建Vue對象，里面的key加不加引號都可以。里面的參數為{xxx}可以理解為一個對象el: 用于指定Vue對象要關聯的HTML元素。el就是element的縮寫通過id屬性值指定HTML元素時，語法格式是：#id (選擇器)data: 設置了Vue對象中保存的數據*/var vue = new Vue({el:"#div0","data":{msg:"hello!!!aaaaaaaa",uname:"鳩摩智"}});}</script> </head> <body> <div id="div0"><!-- 使用{{}}格式，指定要被渲染的數據 --><span>{{msg}}</span><!-- <input type="text" v-bind:value="uname"/>v-bind:value表示綁定value屬性 , v-bind可以省略，也就是 :value注意：在標簽體內通過{{}}告訴Vue這里需要渲染在HTML標簽的屬性中，通過v-bind:屬性名="表達式"的方式告訴Vue這里要渲染--><input type="text" :value="uname"/> </div> </body> </html>3、小結
本質上，v-bind:屬性名="表達式"和{{}}它們都是用Vue對象來渲染頁面。只不過：
- 文本標簽體：使用{{}}形式
- 屬性：使用v-bind:屬性名="表達式"形式
第五節 基本語法：雙向數據綁定
1、提出問題
而使用了雙向綁定后，就可以實現：頁面上數據被修改后，Vue對象中的數據屬性也跟著被修改。
2、demo
2.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數var vue = new Vue({el:"#div0","data":{msg:"hello!!!aaaaaaaa"}});}</script> </head> <body> <div id="div0"><span>{{msg}}</span><br/><!--v-model指的是雙向綁定，也就是說之前的v-bind是通過msg這個變量的值來控制input輸入框現在 v-model 不僅msg來控制input輸入框，反過來，input輸入框的內容也會改變msg的值<input type="text" v-model:value="msg"/>,:value可以省略--><input type="text" v-model="msg"/> </div> </body> </html>2.2、頁面效果
p標簽內的數據能夠和文本框中的數據實現同步修改：
- input 標簽內的msg綁定了Vue對象中的msg屬性，msg屬性又綁定了span標簽內的{{msg}}值，所以在頁面修改標簽中的值span標簽中的{{msg}}值也跟著變化。
3、去除前后空格
3.1、trim修飾符
實際開發中，要考慮到用戶在輸入數據時，有可能會包含前后空格。而這些前后的空格對我們程序運行來說都是干擾因素，要去掉。在v-model后面加上.trim修飾符即可實現。
Vue會幫助我們在文本框失去焦點時自動去除前后空格。
沒加之前：
加了之后：
第六節 基本語法：條件渲染
根據Vue對象中，數據屬性的值來判斷是否對HTML頁面內容進行渲染。
1、v-if
1.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數var vue = new Vue({el:"#div0","data":{num:2}});}</script> </head> <body> <div id="div0"><input type="text" v-model="num"/><!-- v-if表示里面的條件成立才能夠綁定，即：如果num除以2的余數為0才成立--><div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;"> </div> </div> </body> </html>1.2、運行測試
說明：由于num同時綁定了input標簽的v-model="num"屬性和div標簽的v-if="num%2==0"屬性，所以在文本框輸入奇數、偶數，顯示效果也跟著變化。
2、v-if和v-else
2.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數var vue = new Vue({el:"#div0","data":{num:2}});}</script> </head> <body> <div id="div0"><input type="text" v-model="num"/><!-- 表示如果條件成立綁定v-if中的，如果條件不成立綁定v-else中的--><!-- v-if和v-else之間不可以插入其他節點/標簽 --><div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;"> </div><div v-else="num%2==0" style="width:200px;height:200px;background-color: coral"> </div> </div> </body> </html>2.2、運行測試
3、v-show
3.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數var vue = new Vue({el:"#div0","data":{num:2}});}</script> </head> <body> <div id="div0"><input type="text" v-model="num"/><!-- 表示如果條件成立綁定v-if中的，如果條件不成立綁定v-else中的--><!-- v-if和v-else之間不可以插入其他節點/標簽 --><div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse;"> </div><div v-else="num%2==0" style="width:200px;height:200px;background-color: coral"> </div><!-- v-show --><!-- v-show是通過display屬性來控制這個div是否顯示，標簽還在只不過不滿足時設置了屬性為display:none ，上面使用v-if屬性，如果不滿足連這個div標簽都沒有了--><div v-show="num%2==0" style="width:200px;height:200px;background-color:blueviolet;"> </div></div> </body> </html>3.2、運行測試
第七節 基本語法：列表渲染
1、迭代一個簡單的數組
1.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數var vue = new Vue({el:"#div0","data":{"fruitList": ["apple","banana","orange","grape","dragonfruit"]}});}</script> </head> <body> <div id="div0"><ul><!-- 使用v-for語法遍歷數組 --><!-- v-for的值是語法格式是：引用數組元素的變量名 in Vue對象中的數組屬性名 --><!-- 在文本標簽體中使用{{引用數組元素的變量名}}渲染每一個數組元素 --><li v-for="fruit in fruitList">{{fruit}}</li></ul> </div> </body> </html>1.2、運行測試
2、迭代一個對象數組
2.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數var vue = new Vue({el:"#div0","data":{fruitList:[ //這是一個數組，里面存的是一個個的對象{fname:"蘋果",price:5,fcount:100,remark:"蘋果很好吃"},{fname:"菠蘿",price:3,fcount:120,remark:"菠蘿很好吃"},{fname:"香蕉",price:4,fcount:50,remark:"香蕉很好吃"},{fname:"西瓜",price:6,fcount:100,remark:"西瓜很好吃"}]}});}</script> </head> <body> <div id="div0"><table border="1" width="400" cellpadding="4" cellspacing="0"><tr><th>名稱</th><th>單價</th><th>庫存</th><th>備注</th></tr><!-- v-for表示迭代：循環迭代fruitList數組，把每個值賦值給fruit--><tr align="center" v-for="fruit in fruitList"><td>{{fruit.fname}}</td><td>{{fruit.price}}</td><td>{{fruit.fcount}}</td><td>{{fruit.remark}}</td></tr></table> </div> </body> </html>2.2、運行測試
第八節 基本語法：事件驅動
1、demo：字符串順序反轉
1.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數var vue = new Vue({el:"#div0",data:{msg:"hello world!"},//在methods屬性中用來聲明事件的方法methods:{ myReverse:function(){/* this.msg：獲取到msg* .split(",")：表示按逗號分隔* .split(" ")：表示按空格分隔* .split("")：里面是一個字符串連空格都沒有，表示把每個數據都分隔開* .reverse()：反轉，取到之后每個都反轉* .join("")：連接，反轉之后在連在一起* 最后賦值給 this.msg* */this.msg = this.msg.split("").reverse().join("");}}});}</script> </head> <body> <div id="div0"><span>{{msg}}</span><br/><!-- v-on:click 表示綁定點擊事件，v-on:事件類型="事件響應函數的函數名"注意這個 myReverse不要寫括號()，當點擊這個按鈕時會調用myReverse對應的方法--><!-- v-on可以省略，變成 @click --><!--<input type="button" value="反轉" v-on:click="myReverse"/>--><input type="button" value="反轉" @click="myReverse"/> </div> </body> </html>1.2、運行測試
2、demo：獲取鼠標移動時的坐標信息
2.1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數var vue = new Vue({el:"#div0",data:{"position":"暫時沒有獲取到鼠標的位置信息"},"methods":{"recordPosition":function(event){this.position = event.clientX + " " + event.clientY;}}});}</script> </head> <body> <div id="div0"><input type="button" value="鼠標坐標" v-on:mousemove="recordPosition"/><p id="showPosition">{{position}}</p></div> </body> </html>2.2、運行測試
第九節 基本語法：偵聽屬性
1、頁面代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入vue.js文件--><script language="JavaScript" src="script/vue.js"></script><script language="JavaScript">window.onload=function(){//文檔就緒事件函數var vue = new Vue({el:"#div0",data:{num1:1,num2:2,num3:0},//在watch屬性中聲明對num1和num2屬性進行『偵聽』的函數watch:{//偵聽屬性num1和num2//當num1的值有改動時，那么需要調用后面定義的方法 , newValue指的是num1的新值(頁面文本框輸入的值)//parseInt()解析為int類型，不用的話是字符串類型結果顯示字符串拼接num1:function(newValue){this.num3 = parseInt(newValue) + parseInt(this.num2);},num2:function(newValue){this.num3 = parseInt(this.num1) + parseInt(newValue) ;}}});}</script> </head> <body> <div id="div0"><input type="text" v-model="num1" size="2"/>+<input type="text" v-model="num2" size="2"/>=<span>{{num3}}</span> </div> </body> </html>2、運行測試
第十節 練習
1、功能效果演示
2、任務拆解
- 第一步：顯示表格
- 第二步：顯示四個文本框
- 第三步：創建一個p標簽用來顯示用戶在文本框中實時輸入的內容
- 第四步：點擊添加記錄按鈕實現記錄的添加
3、第一步：顯示表格
3.1、HTML標簽
<table id="appTable"><tr><th>編號</th><th>姓名</th><th>年齡</th><th>專業</th></tr><tr v-for="employee in employeeList"><td>{{employee.empId}}</td><td>{{employee.empName}}</td><td>{{employee.empAge}}</td><td>{{employee.empSubject}}</td></tr> </table>3.2、Vue代碼
var appTable = new Vue({"el": "#appTable","data": {"employeeList": [{"empId": 1,"empName": "tom","empAge": 11,"empSubject": "java"},{"empId": 2,"empName": "jerry","empAge": 22,"empSubject": "php"},{"empId": 3,"empName": "peter","empAge": 33,"empSubject": "python"}]} });4、第二步：顯示四個文本框
4.1、HTML標簽
<!-- 四個文本框、顯示收集到的文本框數據的p標簽、按鈕這三個部分需要共享數據，所以要放在同一個app中 --> <div id="appDiv"><!-- 第一部分：四個文本框 -->編號：<input type="text" v-model="empId" /><br/>姓名：<input type="text" v-model="empName" /><br/>年齡：<input type="text" v-model="empAge" /><br/>專業：<input type="text" v-model="empSubject" /><br/><!-- 第二部分：顯示收集到的文本框數據的p標簽 --><!-- 第三部分：按鈕 --></div>4.2、Vue代碼
var appDiv = new Vue({"el":"#appDiv","data":{// 初始值設置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""} });測試是否正確的方式是：在控制臺嘗試修改Vue對象的數據屬性值：
5、第三步：創建一個p標簽
HTML標簽：
<!-- 四個文本框、顯示收集到的文本框數據的p標簽、按鈕這三個部分需要共享數據，所以要放在同一個app中 --> <div id="appDiv"><!-- 第一部分：四個文本框 -->編號：<input type="text" v-model="empId" placeholder="請輸入編號" /><br/>姓名：<input type="text" v-model="empName" placeholder="請輸入姓名" /><br/>年齡：<input type="text" v-model="empAge" placeholder="請輸入年齡" /><br/>專業：<input type="text" v-model="empSubject" placeholder="請輸入專業" /><br/><!-- 第二部分：顯示收集到的文本框數據的p標簽 --><p>{{empId}} {{empName}} {{empAge}} {{empSubject}}</p><!-- 第三部分：按鈕 --></div>6、第四步：點擊添加記錄按鈕
6.1、第一小步：給按鈕設置事件驅動
[1]HTML標簽
<!-- 四個文本框、顯示收集到的文本框數據的p標簽、按鈕這三個部分需要共享數據，所以要放在同一個app中 --> <div id="appDiv"><!-- 第一部分：四個文本框 -->編號：<input type="text" v-model="empId" placeholder="請輸入編號" /><br/>姓名：<input type="text" v-model="empName" placeholder="請輸入姓名" /><br/>年齡：<input type="text" v-model="empAge" placeholder="請輸入年齡" /><br/>專業：<input type="text" v-model="empSubject" placeholder="請輸入專業" /><br/><!-- 第二部分：顯示收集到的文本框數據的p標簽 --><p>{{empId}} {{empName}} {{empAge}} {{empSubject}}</p><!-- 第三部分：按鈕 --><button type="button" v-on:click="addRecord">添加記錄</button></div>[2]Vue代碼
var appDiv = new Vue({"el":"#appDiv","data":{// 初始值設置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""},"methods":{"addRecord":function(){console.log("我點擊了那個按鈕……");}} });6.2、第二小步：打印一下文本框輸入的數據
var appDiv = new Vue({"el":"#appDiv","data":{// 初始值設置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""},"methods":{"addRecord":function(){console.log("我點擊了那個按鈕……");console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);}} });6.3、第三小步：將收集到的數據添加到表格中
"addRecord":function(){// 確認單擊事件是否綁定成功console.log("我點擊了那個按鈕……");// 確認是否能夠正確收集到文本框數據console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);// 將收集到的文本框數據封裝為一個對象var employee = {"empId":this.empId,"empName":this.empName,"empAge":this.empAge,"empSubject":this.empSubject};// 將上面的對象壓入表格數據的employeeList數組appTable.employeeList.push(employee); }第十一節 Vue對象生命周期
1、概念
在我們各種語言的編程領域中，『生命周期』都是一個非常常見的概念。一個對象從創建、初始化、工作再到釋放、清理和銷毀，會經歷很多環節的演變。比如我們在JavaSE階段學習過線程的生命周期，今天學習Vue對象的生命周期，將來還要學習Servlet、Filter等Web組件的生命周期。
2、Vue對象的生命周期
3、生命周期鉤子函數
Vue允許我們在特定的生命周期環節中通過鉤子函數來加入我們的代碼。
鉤子函數：鉤子函數是在一個事件觸發的時候，在系統級捕獲到了他，然后做一些操作。一段用以處理系統消息的程序。“鉤子”就是在某個階段給你一個做某些處理的機會。
特點：
- 是個函數，在系統消息觸發時被系統調用
- 不是用戶自己觸發的
- 使用時直接編寫函數體
- 鉤子函數的名稱是確定的，當系統消息觸發，自動會調用。
訪問測試：
第一節 Ajax概述
第二節 Axios基本用法
總結
以上是生活随笔為你收集整理的013-Vue：前端知识结构概述、基本语法、声明周期的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Python案例】Python实现垃圾
- 下一篇： 基于SpringBoot+Vue打造实验