Vue全家桶--09 生命週期和 Ajax 服務端通訊
Vue全家桶--09 生命週期和 Ajax 服務端通訊
9.1 Vue例項生命週期
生命週期鉤子函式
每個 Vue 例項在被建立時都要經過一系列的初始化過程
生命週期分為三大階段：初始化顯示、更新顯示、銷燬Vue例項
初始化階段的鉤子函式：
beforeCreate() 例項建立前：資料和模板均未獲取到
created() 例項建立後: 最早可訪問到 data 資料，但模板未獲取到
beforeMount() 資料掛載前：模板已獲取到，但是資料未掛載到模板上。
mounted() 資料掛載後： 資料已掛載到模板中
更新階段的鉤子函式：
beforeUpdate() 模板更新前：data 改變後，更新資料模板前呼叫
updated() 模板更新後：將 data 渲染到資料模板中
銷燬階段的鉤子函式：
beforeDestroy() 例項銷燬前
destroyed() 例項銷燬後
生命週期圖示
DEMO
<body> <div id="app"> <h1>{{ msg }}</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> varvm = new Vue({ //el: '#app', data: { msg: 'heloo' }, beforeCreate() { console.log('beforeCreate()', this.$el, this.$data) }, created() { // 已初始化 data 資料，但資料未掛載到模板中 console.log('created()', this.$el, this.$data) }, beforeMount() { // 模板已獲取到，但是資料未掛載到模板上 console.log('beforeMount()', this.$el, this.$data) }, mounted() { // 編譯完成 ，資料已掛載到模板中 console.log('mounted()', this.$el, this.$data) }, beforeUpdate() { // 當 data 改變後，去更新模板中的資料前呼叫 // 注意：瀏覽器問題，需使用 this.$el.innerHTML 獲取更新前的 Dom 模板資料 console.log('beforeUpdate()', this.$el.innerHTML, this.$data) }, updated() { // data 被 Vue 渲染之後的 Dom 資料模板 console.log('updated()', this.$el.innerHTML, this.$data) }, beforeDestroy() { console.log('beforeDestroy'); }, destroyed() { console.log('destroyed'); } }).$mount('#app'); // 例項中未使用 el 選項，可使用$mount()手動掛載 Dom // vm.$destroy() 銷燬 Vue 例項 </script> </body>
9.2 liveServer服務端外掛
1. 在 VS Code 中安裝 liveServer 服務端外掛，用於 Ajax 介面呼叫
2. 啟動伺服器：
方式1：任意開啟一個 html 頁面，在最下面可看到 GoLive 點選啟動，預設埠5500
方式2：在 html 頁面單擊右鍵 ，點選如下，訪問頁面
注意：如果之前啟動過伺服器，則使用 方式2 啟動html頁面，不能使用 方式1 會端口占用
3. 更改 liveServer 預設埠號：
按 Ctrl + , 開啟 Settings ，如下操作，開啟 settings.json,
再json檔案中新增 "liveServer.settings.port": 8080,
9.3 Vue中常用的ajax庫
目前 Vue 官方沒有內建任何 ajax 請求方法
1 vue-resource
在 vue1.x 版本中， 被廣泛使用的非官方 Vue 外掛 vue-resource
2 axios
在 vue 2+ 版本中，官方推薦使用非常棒的第三方 ajax 請求庫
使用：結合生命鉤子獲取資料，渲染資料 created()
9.4 vue-resource的使用
參考手冊：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
npm安裝命令：npm install vue-resource
<body> <div id="app"> <ul> <li v-for="(item,index) in msg" :key="index">{{item.name}}</li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vue-resource/dist/vue-resource.js"></script> <script> new Vue({ el: '#app', data: { msg: [] }, created() { this.$http.get('http://127.0.0.1:5500/vue-07-lifecycle&ajax/db.json').then((response) => { // 如果要使用Vue例項的this，此處需要使用箭頭函式 // success callback console.log(response.data) // 響應資料 this.msg = response.data }, (response) => { // error callback console.log(response.statusText) //錯誤資訊 }) } }); </script> </body>
9.5 axios的使用
參考手冊：https://github.com/axios/axios/blob/master/README.md
npm安裝命令：npm install axios
<body> <div id="app"> <ul> <li v-for="(item,index) in msg" :key="index">{{item.name}},{{item.age}}</li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/axios/dist/axios.js"></script> <script> new Vue({ el: '#app', data: { msg: [] }, created() { axios.get('http://127.0.0.1:5500/vue-07-lifecycle&ajax/db.json').then(response => { console.log(response.data) // 得到返回結果資料 this.msg = response.data }).catch(error => { console.log(error.message) }) } }); </script> </body>
9.6 元件化axios通訊
將上一章的Bootstrap案例，新增axios非同步訪問
安裝npm :npm install axios
引入axios.js
<script src="../node_modules/axios/dist/axios.js"></script>
emp.json
[ {"id": 1, "name": "張三1", "salary": 9899}, {"id": 2, "name": "張三2", "salary": 9999}, {"id": 3, "name": "張三3", "salary": 9099}, {"id": 4, "name": "張三4", "salary": 9199} ]
重構 AppHome.js
; (function () { const template = ` <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <!--右邊上半區域--> <!--<h1 class="page-header">Dashboard</h1>--> <!--定義插槽--> <slot name="dashboard"></slot> <dash-board :hobbies='hobbies' @del-Hobby="deleteHobby"></dash-board> <!--右邊下半區域--> <h2 class="sub-header">Section title</h2> <home-list :empList='empList' :delItem="delItem"></home-list> </div>`; window.AppHome = { template, components: { DashBoard, HomeList }, data() { return { hobbies: ['看書', '檯球', '睡覺', '擼程式碼'],//dashboard顯示資料 empList: [] }; }, created() { axios.get('http://127.0.0.1:5500/vue-07-lifecycle&ajax/04-bootstrap-ajax/emp.json').then(response => { console.log(response.data) // 得到返回結果資料 this.empList = response.data }).catch(error => { console.log(error.message) }) }, methods: { // 刪除指定下標的資料 // 因為刪除 emp 會對 empList 做更新操作， // 而 empList 是初始化在當前這個元件裡，所以刪除的函式要定義在這個元件中 delItem(index) { this.empList.splice(index, 1); }, deleteHobby(index) { this.hobbies.splice(index, 1); } } } })()You are never too old to set another goal or to dream a new dream!!!