作為後端程式員，瞭解和掌握一些前端知識也是必不可少的，本章就和大家分享Vue的一些基礎知識，希望能夠對Vue小白有所幫助。話不多說，下麵我們直接進入主題。 一、Vue簡介 Vue簡介：1、JavaScript框架；2、簡化Dom操作；3、響應式的數據驅動（頁面是由數據來生成的，當數據改變以後頁面會同 ...
作為後端程式員，瞭解和掌握一些前端知識也是必不可少的，本章就和大家分享Vue的一些基礎知識，希望能夠對Vue小白有所幫助。話不多說，下麵我們直接進入主題。
一、Vue簡介
Vue簡介：1、JavaScript框架；2、簡化Dom操作；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>Vue簡介</title> <script src="lib/vue.js"></script> </head> <body> <!-- Vue實例所控制的這個元素區域，就是我們 MVVM 中的 V（View視圖） --> <div id="app"> <!-- 插值表達式 --> {{ msg }} </div> <script> //Vue簡介：1、JavaScript框架；2、簡化Dom操作；3、響應式的數據驅動（頁面是由數據來生成的，當數據改變以後頁面會同步的更新） //我們 new 出來的這個 vm 對象，就是我們 MVVM 中的 VM調度者 var vm = new Vue({ //el掛載點： //1、Vue實例的作用範圍是什麼呢？答：Vue會管理el選項命中的元素及其內部的後代元素。 //2、是否可以使用其他的選擇器？答：可以使用其他的選擇器，但是建議使用ID選擇器。 //3、是否可以設置在其他的Dom元素上呢？答：可以使用其他的雙標簽，但不能使用 html 或 body 標簽。 el: '#app', //掛載點，支持所有的選擇器，推薦使用ID選擇器，不能掛載在 html 或 body 標簽上，且不能掛載在單標簽上 //這裡的 data 就是 MVVM 中的 M（Model數據對象），專門用來保存每個頁面的數據 data: { msg: 'Hello Vue!' } }) </script> </body> </html>
二、Vue指令
<!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>Vue指令</title> <script src="/lib/vue.js"></script> <style> .active { border: 1px solid red; } </style> </head> <body> <div id="app"> <!-- v-text指令的作用是：設置標簽的文本值（textContent） --> <!-- 預設寫法會替換全部內容，使用插值表達式 {{ }} 可以替換指定的內容 --> <!-- 內部支持寫表達式 --> <div desc="v-text指令"> <h2 v-text="msg + ' 你好Vue！ ' + language.chinese">這裡的內容會被v-text指令替換掉</h2> <h2>{{ msg + ' 你好Vue！ ' + language.chinese }}</h2> </div> <!-- v-html指令的作用是：設置元素的innerHTML --> <!-- v-html指令內容中有html機構會被解析為標簽，而v-text指令無論內容是什麼只會解析為文本。 --> <div desc="v-html指令"> <h2 v-html="url"></h2> </div> <!-- v-on指令的作用是：為元素綁定事件 --> <!-- 事件名不需要寫on，指令可以簡寫為@，綁定的方法定義在methods屬性中，方法內部通過this關鍵字可以訪問定義在data中的數據 --> <div desc="v-on指令"> <input type="button" value="v-on指令" v-on:click="doTest"> <input type="button" value="v-on簡寫" @click="doTest"> <input type="button" value="雙擊事件" @dblclick="doTest"> <!-- 傳遞自定義參數 --> <input type="button" value="v-on方法帶2個參數" @click="doTest2('隔壁老王', 666)"> <!-- 事件修飾符：事件的後面跟上 .修飾符 可以對事件進行限制，.enter 可以限制觸發的按鍵為回車 --> <!-- 事件修飾符有多種，更多事件修飾符可參考官網：https://v2.cn.vuejs.org/v2/api/#v-on --> <input type="text" @keyup.enter="doTest"> <h2 @click="changeFood">{{ food }}</h2> </div> <!-- v-show指令的作用是：根據真假切換元素的顯示狀態 --> <!-- 原理是修改元素的display，實現顯示或隱藏 --> <!-- 指令後面的內容最終都會解析為布爾值，值為true元素顯示，值為false元素隱藏 --> <!-- 數據改變之後，對應元素的顯示狀態會同步更新 --> <div desc="v-show指令"> <input type="button" value="v-show指令切換顯示狀態" @click="changeIsShow"> <input type="button" value="累加年齡" @click="addAge"> <div> <img v-show="isShow" src="/imgs/monkey.jpg" alt=""> <img v-show="age>=18" src="/imgs/monkey.jpg" alt=""> </div> </div> <!-- v-if指令的作用是：根據表達式的真假切換元素的顯示狀態 --> <!-- 本質是通過操縱dom元素來切換顯示狀態 --> <!-- 表達式的值為true，元素存在於dom樹中，值為false則從dom樹中移除 --> <!-- 頻繁的切換使用v-show指令，反之使用v-if指令，前者的切換消耗小 --> <div desc="v-if指令"> <input type="button" value="v-if指令切換顯示狀態" @click="toggleIsShow"> <p v-if="isShowInfo">浪子天涯</p> <p v-show="isShowInfo">浪子天涯 - v-show修飾</p> <h2 v-if="temperature>=30">熱死了</h2> </div> <!-- v-bind指令的作用是：為元素綁定屬性 --> <!-- 完整寫法是 v-bind:屬性名 --> <!-- 簡寫的話可以直接省略v-bind，只保留 :屬性名 --> <!-- 需要動態的增刪class建議使用對象的方式 --> <div desc="v-bind指令"> <img v-bind:src="imgSrc" alt=""> <img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggleActive" alt=""> <img :src="imgSrc" :title="imgTitle" :class="{active: isActive}" @click="toggleActive" alt=""> </div> <!-- v-for指令的作用是：根據數據生成列表結構 --> <!-- 數組經常和v-for結合使用 --> <!-- 語法是 (item,index) in 數據 --> <!-- item 和 index 可以結合其他指令一起使用 --> <!-- 數組長度的更新會同步到頁面上，是響應式的 --> <div desc="v-for指令"> <input type="button" value="添加數據" @click="add"> <input type="button" value="移除數據" @click="removeLeft"> <ul> <li v-for="(item,index) in arr"> {{ index + 1 }} 校區：{{ item }} </li> </ul> <h2 v-for="(item,index) in vegetables" :title="item.name"> {{ item.name }} </h2> </div> <!-- v-model指令的作用是：便捷的設置和獲取表單元素的值 --> <!-- 綁定的數據會和表單元素的值相關聯（雙向數據綁定） --> <div desc="v-model指令"> <input type="button" value="修改msg" @click="setMsg"> <input type="text" v-model="msg" @keyup.enter="getMsg"> <h2> {{ msg }} </h2> </div> </div> <script> var vm = new Vue({ el: '#app', //掛載 //數據 data: { msg: 'Hello Vue!', language: { chinese: '漢語' }, url: "<a href='https://www.baidu.com'>百度</a>", //百度超鏈接 food: "番茄炒雞蛋", isShow: false, //是否顯示 age: 17, //年齡, isShowInfo: false, //是否顯示信息 temperature: 20, //溫度 imgSrc: "/imgs/monkey.jpg", //圖片地址 imgTitle: "浪子天涯", //標題 isActive: false, vegetables: [ //蔬菜 { name: "白菜" }, { name: "蘿蔔" } ], arr: ["北京", "上海", "廣州", "深圳"], //城市 }, //方法 methods: { //方法測試 doTest: function () { var _this = this; //方法中通過this關鍵字獲取data中的數據 alert(_this.language.chinese); }, //帶2個參數的方法測試 doTest2: function (p1, p2) { console.log(p1); console.log(p2); }, //改變食物 changeFood: function () { var _this = this; //方法中通過this關鍵字獲取data中的數據 _this.food += "真好吃！"; }, //切換顯示狀態 changeIsShow: function () { this.isShow = !this.isShow; }, //累加年齡 addAge: function () { this.age++; }, //切換顯示狀態 toggleIsShow: function () { this.isShowInfo = !this.isShowInfo; }, //切換樣式 toggleActive: function () { this.isActive = !this.isActive; }, //追加 add: function () { this.vegetables.push({ name: "花菜" }); }, //移除數組左邊的第一個 removeLeft: function () { this.vegetables.shift(); }, //獲取msg getMsg: function () { alert(this.msg); }, //設置msg setMsg: function () { this.msg = "程式員"; } } }) </script> </body> </html>
三、axios基本使用
<!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>axios基本使用</title> <script src="/lib/vue.js"></script> <script src="/lib/axios.js"></script> </head> <body> <div id="app"> <input type="button" value="獲取信息" @click="getMsg"> <p> {{ msg }} </p> </div> <script> //get請求 .then後面跟著是成功的回調函數和失敗的回調函數 //axios.get(地址?key=value&key2=value2).then(function(response){},function(err){}); //post請求 .then後面跟著是成功的回調函數和失敗的回調函數 //axios.post(地址,參數對象).then(function(response){},function(err){}); //axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){}); /* axios官網地址：http://axios-js.com/zh-cn/docs/ 案例如下： 1、執行 GET 請求 axios.get('/user?ID=12345') .then(function (response) {
