作為后端程式員，了解和掌握一些前端知識也是必不可少的，本章就和大家分享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) { console.log(response); }) .catch(function (error) { console.log(error); }); 2、執行 POST 請求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 3、執行多個并發請求 function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 兩個請求現在都執行完成 })); */ var vm = new Vue({ //掛載 el: '#app', //資料 data: { msg: 'Hello Vue!' }, //方法 methods: { //獲取資訊 getMsg: function () { var _this = this; axios.get('https://autumnfish.cn/api/joke').then(function (response) { //成功的回呼 //axios回呼函式中的this已經改變，無法訪問到data中的資料 //把this保存起來，回呼函式中直接使用保存的this即可，也就是此處的_this _this.msg = response.data; }, function (err) { //失敗的回呼 //TODO }); }, /* 執行多個并發請求示例開始 */ //添加配件價格資訊 addPartsPrice: function (drs) { var _this = this; var arrPids = []; drs.forEach(function (item, index) { if (!arrPids.some(pid => { return pid == item.pid; })) { arrPids.push(item.pid); } }); if (arrPids.length <= 0) { return; } var pageSize = 10; //分頁大小 var pageResults = []; //分組結果 for (var i = 0; i < arrPids.length; i += pageSize) { //slice(start,end) 獲取索引值從start到end的資料，其中包含start，但不包含end pageResults.push(arrPids.slice(i, i + pageSize)) // 每10條分成一組 } var arrGetListPartsPriceBy007Func = []; //存放獲取原廠配件串列銷售價（含稅）資料的函式 pageResults.forEach(function (arr, index) { var pids = ""; arr.forEach(function (pid) { pids += pid + ","; }); arrGetListPartsPriceBy007Func.push(_this.getListPartsPriceBy007(pids)); }); //分多批次獲取資料，防止后端回應時間超時 var pAll = Promise.all(arrGetListPartsPriceBy007Func).then(results => { //results為一個陣列，存放的是arrGetListPartsPriceBy007Func中每個函式的回傳值 //console.log(results); var dt = []; //用于存放所有請求的回傳值，此處每個介面的回傳值都是json陣列 results.forEach(function (arr) { dt = dt.concat(arr); //合并陣列 }); //console.log(dt); if (dt && dt.length > 0) { drs.forEach(function (dr, index) { var filterResult = dt.filter(function (item, index2) { return item.pid == dr.pid; }); if (filterResult.length > 0) { //this.$set()用于向回應式物件中添加一個屬性，并確保這個新屬性同樣是回應式的，且觸發視圖更新， //它必須用于向回應式物件上添加新屬性，因為Vue無法探測普通的新增屬性， _this.$set(dr, "eot_price", filterResult[0].eot_price); //進價(未含稅) _this.$set(dr, "cost_price", filterResult[0].cost_price); //進價(含稅) _this.$set(dr, "sale_price", filterResult[0].sale_price); //銷售價(含稅) } }); } }).catch(error => { //Promise中只要有一個reject了，那么pAll的狀態就是reject //console.log(error); }); }, //獲取原廠配件串列銷售價（含稅）資料 //pids：配件編碼，多個以英文逗號分割 getListPartsPriceBy007: function (pids) { var _this = this; //其中呼叫 resolve 代表一切正常，reject 是出現例外時所呼叫的 //resolve() 中可以放置一個引數用于向下一個 then 傳遞一個值 //reject() 引數中一般會傳遞一個例外給之后的 catch 函式用于處理例外 //resolve 和 reject 并不能夠使起始函式停止運行，別忘了 return， return new Promise(function (resolve, reject) { var apiData = []; //介面回傳的資料 var params = new URLSearchParams(); params.append("action", "GetListPartsPriceBy007"); params.append("brandCode", _this.globalBrandCode); params.append("pids", pids); axios.post('/Ashx/Epc/ThirdInterfaceDataHandler.ashx', params) .then(function (result) { if (result.data.State != 1) { //獲取失敗 console.log("獲取原廠配件串列銷售價（含稅）資料失敗：" + result.data.Message); resolve(apiData); return; } //_c.getKeyValue 為自己封裝的一個函式，可根據各自業務做相應的調整 apiData = JSON.parse(_c.getKeyValue('data', result.data.Items)); resolve(apiData); //此處也可將介面回傳來的值存到全域變數中 }) .catch(function (error) { //reject(error); //攔截 console.log(error); resolve(apiData); }); }); }, /* 執行多個并發請求示例結束 */ }, }) </script> </body> </html>
四、js中常用的json陣列操作方法
js中最常用的幾個陣列操作方法 filter、map、forEach、every、some、sort、this.$set() 實際案例如下：
<!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>js中常用的json陣列操作方法</title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="測驗" @click="doTest"> </div> <script> var vm = new Vue({ el: '#app', //掛載 data: { msg: 'Hello Vue!', persons: [ { name: "張三", age: 18, id: 5, gender: "男" }, { name: "李四", age: 20, id: 2, gender: "男" }, { name: "王五", age: 16, id: 2, gender: "男" }, { name: "小美", age: 16, id: 9, gender: "女" }, ] }, methods: { //測驗 //參考博文：https://blog.csdn.net/weixin_42708208/article/details/103506187 //filter、map、forEach、every、some、sort、this.$set() 使用 doTest: function () { var _this = this; //方法中通過this關鍵字獲取data中的資料 //具體案例如下： //1、回傳所有年齡大于等于18歲的男生的陣列（使用方法：filter） var mans = _this.persons.filter((item, index) => { return item.gender == "男" && item.age >= 18 }); console.log("年齡大于等于18歲的男生：", mans); //2、只保留姓名的陣列（使用方法：map） var personNameList = _this.persons.map((item, index) => { return item.name; }); console.log("只保留姓名的陣列：", personNameList); //3、只保留姓名和id的陣列（使用方法：forEach） var personNameIdList = []; _this.persons.forEach((item, index) => { personNameIdList.push({ name: item.name, id: item.id }); }); console.log("只保留姓名和id的陣列：", personNameIdList); //4、判斷所有人是不是都是男生（使用方法：every） var isMan = _this.persons.every((item, index) => { return item.gender == "男"; }); console.log("判斷所有人是不是都是男生：", isMan); //false //5、判斷有沒有男生（使用方法：some） var hasMan = _this.persons.some((item, index) => { return item.gender == "男"; }); console.log("判斷有沒有男生：", hasMan); //true //6、依據id進行升序排序，操作的是原陣列（使用方法：sort） _this.persons.sort(function (a, b) { return a.id - b.id; }); console.log("依據id進行升序排序：", _this.persons); //7、給年齡大于等于18的人添加欄位type:'成年人' _this.persons.forEach(function (item) { if (item.age >= 18) { //this.$set()用于向回應式物件中添加一個屬性，并確保這個新屬性同樣是回應式的，且觸發視圖更新， //它必須用于向回應式物件上添加新屬性，因為Vue無法探測普通的新增屬性， _this.$set(item, "type", "成年人"); } }); console.log("給年齡大于等于18的人添加欄位type:'成年人'：", _this.persons); }, }, }) </script> </body> </html>
Demo原始碼：
鏈接：https://pan.baidu.com/s/1plm0nc8BylZVj05wJ7y4Yg
提取碼：hpoy
此文由博主精心撰寫轉載請保留此原文鏈接：https://www.cnblogs.com/xyh9039/p/16950971.html
著作權宣告：如有雷同純屬巧合，如有侵權請及時聯系本人修改，謝謝！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539179.html
標籤：其他
上一篇：整理 js 日期物件的詳細功能，使用 js 日期物件獲取具體日期、昨天、今天、明天、每月天數、時間戳等，以及常用的日期時間處理方法