Vue中前端與后端如何實(shí)現(xiàn)交互
更新時(shí)間：2022年09月07日 10:09:26 作者：混子前端
這篇文章主要介紹了Vue中前端與后端如何實(shí)現(xiàn)交互，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Promise的基本使用
基本使用
new一個(gè)promise，為其傳入一個(gè)函數(shù)作為參數(shù)，這個(gè)函數(shù)中傳入兩個(gè)參數(shù)，分別用來(lái)執(zhí)行異步任務(wù)成功和失敗的回調(diào)函數(shù)。
function query(){
?? ?var p=new Promise(function(resolve,reject){
?? ??? ?setTimeout(function(){
?? ??? ?var flag=true;
?? ??? ?if(flag){
?? ??? ??? ?resolve('對(duì)了');
?? ??? ?}
?? ??? ?else{
?? ??? ??? ?reject('錯(cuò)了');
?? ??? ?}
?? ??? ?},1000)
?? ?});
?? ?return p;
}
query().then(function(data){ ? //第一個(gè)函數(shù)接收成功的值
?? ?console.log(data);
},function(data){ ? ? ? ? ? ? //第二個(gè)函數(shù)接收失敗的值
?? ?console.log(data);
});
輸出結(jié)果：‘對(duì)了'多個(gè)請(qǐng)求，鏈?zhǔn)骄幊?/h3>
當(dāng)我們發(fā)送多個(gè)請(qǐng)求時(shí)，傳統(tǒng)的ajax會(huì)出現(xiàn)多層嵌套的回調(diào)地獄，Promise為我們提供了鏈?zhǔn)骄幊獭?/p>
function queryData(url) {
? ? ? var p = new Promise(function(resolve, reject){
? ? ? ? var xhr = new XMLHttpRequest();
? ? ? ? xhr.onreadystatechange = function(){
? ? ? ? ? if(xhr.readyState != 4) return;
? ? ? ? ? if(xhr.readyState == 4 && xhr.status == 200) {
? ? ? ? ? ? // 處理正常的情況
? ? ? ? ? ? resolve(xhr.responseText);
? ? ? ? ? }else{
? ? ? ? ? ? // 處理異常情況
? ? ? ? ? ? reject('服務(wù)器錯(cuò)誤');
? ? ? ? ? }
? ? ? ? };
? ? ? ? xhr.open('get', url);
? ? ? ? xhr.send(null);
? ? ? });
? ? ? return p;
? ? }
? ? // 發(fā)送多個(gè)ajax請(qǐng)求并且保證執(zhí)行順序
? ? queryData('http://localhost:3000/data')
? ? ? .then(function(data){
? ? ? ? console.log(data)
? ? ? ?//想要鏈?zhǔn)骄幊滔氯?，必須return
? ? ? ? return queryData('http://localhost:3000/data1');
? ? ? })
? ? ? .then(function(data){
? ? ? ? console.log(data);
? ? ? ? return queryData('http://localhost:3000/data2');
? ? ? })
? ? ? .then(function(data){
? ? ? ? console.log(data)
? ? ? });Promise的API—實(shí)例方法
.then()： 傳入兩個(gè)參數(shù)時(shí)，只執(zhí)行成功的。傳入一個(gè)參數(shù)時(shí)，那個(gè)參數(shù)執(zhí)行的是成功的回調(diào)。- 得到成功的結(jié)果
.catch()：傳入兩個(gè)參數(shù)時(shí)，只執(zhí)行錯(cuò)誤的。傳入一個(gè)參數(shù)時(shí)，那個(gè)參數(shù)執(zhí)行的是失敗的回調(diào)。- 得到異常的結(jié)果
.finally()不是正式標(biāo)準(zhǔn)- 無(wú)論成功與否都會(huì)執(zhí)行
<script type="text/javascript">
? ? /*
? ? ? Promise常用API-實(shí)例方法
? ? */
? ? // console.dir(Promise);
? ? function foo() {
? ? ? return new Promise(function(resolve, reject){
? ? ? ? setTimeout(function(){
? ? ? ? ? // resolve(123);
? ? ? ? ? reject('error');
? ? ? ? }, 100);
? ? ? })
? ? }
? ? foo()
? ? ? ?.then(function(data){
? ? ? ? ?console.log(data)
? ? ? ?})
? ? ? ?.catch(function(data){
? ? ? ? console.log(data)
? ? ? ?})
? ? ? ?.finally(function(){
? ? ? ? ?console.log('finished')
? ? ? ?});
? ? // --------------------------
? ? // 兩種寫法是等效的
? ? foo()
? ? ? .then(function(data){
? ? ? ? # 得到異步任務(wù)正確的結(jié)果
? ? ? ? console.log(data)
? ? ? },function(data){
? ? ? ? # 獲取異常信息
? ? ? ? console.log(data)
? ? ? })
? ? ? # 成功與否都會(huì)執(zhí)行（不是正式標(biāo)準(zhǔn)）?
? ? ? .finally(function(){
? ? ? ? console.log('finished')
? ? ? });
? </script>Promise的API—對(duì)象方法（直接通過Promise函數(shù)名稱調(diào)用的方法）
（1）Promise.all()并發(fā)處理多個(gè)異步任務(wù)，所有任務(wù)都執(zhí)行完成才能得到結(jié)果。
Promise.all方法接受一個(gè)數(shù)組作參數(shù)，數(shù)組中的對(duì)象（p1、p2、p3）均為promise實(shí)例（如果不是一個(gè)promise，該項(xiàng)會(huì)被用Promise.resolve轉(zhuǎn)換為一個(gè)promise)。它的狀態(tài)由這三個(gè)promise實(shí)例決定
（2）Promise.race()并發(fā)處理多個(gè)異步任務(wù)，只要有一個(gè)任務(wù)完成就能得到結(jié)果。
Promise.race方法同樣接受一個(gè)數(shù)組作參數(shù)。當(dāng)p1, p2, p3中有一個(gè)實(shí)例的狀態(tài)發(fā)生改變（變?yōu)閒ulfilled或rejected），p的狀態(tài)就跟著改變。并把第一個(gè)改變狀態(tài)的promise的返回值，傳給p的回調(diào)函數(shù)
? <script type="text/javascript">
? ? /*
? ? ? Promise常用API-對(duì)象方法
? ? */
? ? // console.dir(Promise)
? ? function queryData(url) {
? ? ? return new Promise(function(resolve, reject){
? ? ? ? var xhr = new XMLHttpRequest();
? ? ? ? xhr.onreadystatechange = function(){
? ? ? ? ? if(xhr.readyState != 4) return;
? ? ? ? ? if(xhr.readyState == 4 && xhr.status == 200) {
? ? ? ? ? ? // 處理正常的情況
? ? ? ? ? ? resolve(xhr.responseText);
? ? ? ? ? }else{
? ? ? ? ? ? // 處理異常情況
? ? ? ? ? ? reject('服務(wù)器錯(cuò)誤');
? ? ? ? ? }
? ? ? ? };
? ? ? ? xhr.open('get', url);
? ? ? ? xhr.send(null);
? ? ? });
? ? }
? ? var p1 = queryData('http://localhost:3000/a1');
? ? var p2 = queryData('http://localhost:3000/a2');
? ? var p3 = queryData('http://localhost:3000/a3');
? ? ?Promise.all([p1,p2,p3]).then(function(result){
? ? ? ?//請(qǐng)求時(shí)間和發(fā)送順序有關(guān)，先發(fā)送先返回。
? ? ? ?// ? all 中的參數(shù) ?[p1,p2,p3] ? 和 返回的結(jié)果一 一對(duì)應(yīng)["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
? ? ? ?console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
? ? ?})
? ? Promise.race([p1,p2,p3]).then(function(result){
? ? ? // 由于p1執(zhí)行較快，Promise的then()將獲得結(jié)果'P1'。p2,p3仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。
? ? ? console.log(result) // "HELLO TOM"
? ? })
? </script>接口調(diào)用-fetch用法
基本使用
- 更加簡(jiǎn)單的數(shù)據(jù)獲取方式，高性能更強(qiáng)大、更靈活，可以看做是xhr的升級(jí)版
- 給Promise實(shí)現(xiàn)
- Fetch API是新的ajax解決方案 Fetch會(huì)返回Promise
- fetch不是ajax的進(jìn)一步封裝，而是原生js，沒有使用XMLHttpRequest對(duì)象。
fetch(url, options).then(）
?<script type="text/javascript">
? ?/*
? ? ?Fetch API 基本用法
? ? ??? ?fetch(url).then()
? ? ?? ?第一個(gè)參數(shù)請(qǐng)求的路徑 ? Fetch會(huì)返回Promise ? 所以我們可以使用then 拿到請(qǐng)求成功的結(jié)果?
? ?*/
? ?fetch('http://localhost:3000/fdata').then(function(data){
? ? ?// text()方法屬于fetchAPI的一部分，它返回一個(gè)Promise實(shí)例對(duì)象，用于獲取后臺(tái)返回的數(shù)據(jù)
? ? ?return data.text(); ? //text()是fetch的一個(gè)api，返回的是一個(gè)Promise的對(duì)象
? ?}).then(function(data){
? ? ?// ? 在這個(gè)then里面我們能拿到最終的數(shù)據(jù) ?
? ? ?console.log(data);
? ?})
?</script>常用配置選項(xiàng)
- fetch(url, options).then(）
- HTTP協(xié)議，它給我們提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
- 默認(rèn)的是 GET 請(qǐng)求
- 需要在 options 對(duì)象中 指定對(duì)應(yīng)的 method method:請(qǐng)求使用的方法
- post 和 普通 請(qǐng)求的時(shí)候 需要在options 中 設(shè)置 請(qǐng)求頭 headers 和 body
GET請(qǐng)求
傳統(tǒng)url請(qǐng)求傳參—通過“？”傳遞參數(shù)
前端代碼
fetch('http://localhost:3000/books?id=123', {
? ? ? ? ? ? ?? ?# get 請(qǐng)求可以省略不寫 默認(rèn)的是GET?
? ? ? ? ? ? ? ? method: 'get'
? ? ? ? ? ? })
? ? ? ? ? ? .then(function(data) {
? ? ? ? ? ? ?? ?# 它返回一個(gè)Promise實(shí)例對(duì)象，用于獲取后臺(tái)返回的數(shù)據(jù)
? ? ? ? ? ? ? ? return data.text();
? ? ? ? ? ? }).then(function(data) {
? ? ? ? ? ? ?? ?# 在這個(gè)then里面我們能拿到最終的數(shù)據(jù) ?
? ? ? ? ? ? ? ? console.log(data)
? ? ? ? ? ? });后端代碼
app.get('/books'(req.res)=>{
?? ?res.send("傳統(tǒng)url傳遞參數(shù)"+req.query.id);
})restful形式url傳遞參數(shù)—通過“/”傳遞參數(shù)
前端代碼
fetch('http://localhost:3000/books/456', {
? ? ? ? ? ? ?? ?# get 請(qǐng)求可以省略不寫 默認(rèn)的是GET?
? ? ? ? ? ? ? ? method: 'get'
? ? ? ? ? ? })
? ? ? ? ? ? .then(function(data) {
? ? ? ? ? ? ? ? return data.text();
? ? ? ? ? ? }).then(function(data) {
? ? ? ? ? ? ? ? console.log(data)
? ? ? ? ? ? });后端代碼
app.get('/book/:id',(req.res)=>{
?? ?res.send("restful形式傳遞參數(shù)"+req.params.id);
})DELETE請(qǐng)求
與GET方式相似，只需把method屬性改為“delete”
POST請(qǐng)求方式的參數(shù)傳遞
post傳遞參數(shù)時(shí)，option對(duì)象中除了method屬性，需要額外增加headers和body屬性
前端代碼
body為查詢字符串格式
var url='http://127.0.0.1:3000/product/books/';
? ? ? fetch(url,{
? ? ? ? method:'post',
? ? ? ? headers:{
? ? ? ? ? 'Content-Type':'application/x-www-form-urlencoded'
? ? ? ? },
? ? ? ? body:'uname=高進(jìn)宇&pwd=11223344'
? ? ? }).then(data=>{
? ? ? ? return data.text();
? ? ? }).then(data=>{
? ? ? ? console.log(data);
? ? ? })后端代碼
app.post('/books', (req, res) => {
? ? res.send('axios post 傳遞參數(shù)' + req.body.uname + '---' + req.body.pwd)
? })body為JSON格式
fetch('http://localhost:3000/books', {
? ? ? ? ? ? ? ? method: 'post',
? ? ? ? ? ? ? ? body: JSON.stringify({
? ? ? ? ? ? ? ? ? ? uname: '張三',
? ? ? ? ? ? ? ? ? ? pwd: '456'
? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? headers: {
? ? ? ? ? ? ? ? ? ? 'Content-Type': 'application/json'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? .then(function(data) {
? ? ? ? ? ? ? ? return data.text();
? ? ? ? ? ? }).then(function(data) {
? ? ? ? ? ? ? ? console.log(data)
? ? ? ? ? ? });后端代碼
app.post('/books', (req, res) => {
? ? res.send('axios post 傳遞參數(shù)' + req.body.uname + '---' + req.body.pwd)
? })PUT請(qǐng)求方式的參數(shù)傳遞
fetch響應(yīng)結(jié)果
用fetch來(lái)獲取數(shù)據(jù)，如果響應(yīng)正常返回，我們首先看到的是一個(gè)response對(duì)象，其中包括返回的一堆原始字節(jié)，這些字節(jié)需要在收到后，需要我們通過調(diào)用方法將其轉(zhuǎn)換為相應(yīng)格式的數(shù)據(jù)，比如JSON，BLOB或者TEXT等等
text():將返回體處理成字符串形式json()：返回結(jié)果和JSON.parse(response.Text)一樣
? ? /*
? ? ? Fetch響應(yīng)結(jié)果的數(shù)據(jù)格式
? ? */
? ? fetch('http://localhost:3000/json').then(function(data){
? ? ? // return data.json(); ? // ?將獲取到的數(shù)據(jù)使用 json 轉(zhuǎn)換對(duì)象
? ? ? return data.text(); // ?// ?將獲取到的數(shù)據(jù) 轉(zhuǎn)換成字符串?
? ? }).then(function(data){
? ? ? // console.log(data.uname)
? ? ? // console.log(typeof data)
? ? ? var obj = JSON.parse(data);
? ? ? console.log(obj.uname,obj.age,obj.gender)
? ? })接口調(diào)用–axios用法
認(rèn)識(shí)
- 基于promise用于瀏覽器和node.js的http客戶端
- 支持瀏覽器和node.js
- 支持promise
- 能攔截請(qǐng)求和響應(yīng)
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 能轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
axios的基礎(chǔ)用法
axios的常用API
get()post()delete()put()
axios 全局配置
配置公共的請(qǐng)求頭
axios.defaults.baseURL = 'https://api.example.com';
配置 超時(shí)時(shí)間
axios.defaults.timeout = 2500;
配置公共的請(qǐng)求頭
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
GET請(qǐng)求
發(fā)送get請(qǐng)求
axios.get('http://localhost:3000/adata').then(function(ret){?
? ? ? # ?拿到 ret 是一個(gè)對(duì)象 ? ? ?所有的對(duì)象都存在 ret 的data 屬性里面
? ? ? // 注意data屬性是固定的用法，用于獲取后臺(tái)的實(shí)際數(shù)據(jù)
? ? ? console.log(ret.data)
? ? ? console.log(ret)
? ? })get 請(qǐng)求傳遞參數(shù)
通過傳統(tǒng)的url 以 ? 的形式傳遞參數(shù)
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
? ? ? console.log(ret.data)
? ? })restful 形式傳遞參數(shù)
axios.get('http://localhost:3000/axios/123').then(function(ret){
? ? ? console.log(ret.data)
? ? })通過params 形式傳遞參數(shù)
前端代碼
axios.get('http://localhost:3000/axios', {
? ? ? params: {
? ? ? ? id: 789
? ? ? }
? ? }).then(function(ret){
? ? ? console.log(ret.data)
? ? })后端代碼
router.get('/axios', (req, res) => {
? ? res.send('axios get 傳遞參數(shù)' + req.query.id)
})DELETE請(qǐng)求傳參
傳參形式和GET請(qǐng)求一樣
POST請(qǐng)求
通過選項(xiàng)傳遞參數(shù)(默認(rèn)傳遞的是json格式的數(shù)據(jù)）
前端代碼
axios.post('http://localhost:3000/axios', {
? ? ? uname: 'lisi',
? ? ? pwd: 123
? ? }).then(function(ret){
? ? ? console.log(ret.data)
? ? })后端代碼
router.post('/axios', (req, res) => {
? ? res.send('axios post 傳遞參數(shù)' + req.body.uname + '---' + req.body.pwd)
? })通過 URLSearchParams傳遞參數(shù)（application/x-www-form-urlencoded）
var params = new URLSearchParams();
? ? params.append('uname', 'zhangsan');
? ? params.append('pwd', '111');
? ? axios.post('http://localhost:3000/axios', params).then(function(ret){
? ? ? console.log(ret.data)
? ? })PUT請(qǐng)求
與post請(qǐng)求一樣。
axios的響應(yīng)結(jié)果
data:實(shí)際響應(yīng)回來(lái)的數(shù)據(jù)。headers：響應(yīng)頭信息。status：響應(yīng)狀態(tài)碼。statusText：響應(yīng)狀態(tài)信息。
axios攔截器
請(qǐng)求攔截器
請(qǐng)求攔截器的作用是在請(qǐng)求發(fā)送前進(jìn)行一些操作
例如在每個(gè)請(qǐng)求體里加上token，統(tǒng)一做了處理如果以后要改也非常容易
axios.interceptors.request.use(function(config) {
? ? ? console.log(config.url)
? ? ? # 1.1 ?任何請(qǐng)求都會(huì)經(jīng)過這一步 ? 在發(fā)送請(qǐng)求之前做些什么 ??
? ? ? config.headers.mytoken = 'nihao';
? ? ? # 1.2 ?這里一定要return ? 否則配置不成功 ?
? ? ? return config;
? ? }, function(err){
? ? ? ?#1.3 對(duì)請(qǐng)求錯(cuò)誤做點(diǎn)什么 ? ?
? ? ? console.log(err)
? ? })響應(yīng)攔截器
響應(yīng)攔截器的作用是在接收到響應(yīng)后進(jìn)行一些操作
例如在服務(wù)器返回登錄狀態(tài)失效，需要重新登錄的時(shí)候，跳轉(zhuǎn)到登錄頁(yè)
?axios.interceptors.response.use(function(res) {
? ? ? #2.1 ?在接收響應(yīng)做些什么 ?
? ? ? var data = res.data;
? ? ? return data;
? ? }, function(err){
? ? ? #2.2 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么 ?
? ? ? console.log(err)
? ? })經(jīng)過以上響應(yīng)攔截器處理以后。下面拿到的res就是需要的數(shù)據(jù)，不需要再進(jìn)行res.data的操作。
axios.post('http://localhost:3000/axios', {
? ? ? uname: 'lisi',
? ? ? pwd: 123
? ? }).then(function(res){
? ? ? console.log(res)
? ? })async 和 await
async作為一個(gè)關(guān)鍵字放到函數(shù)前面
任何一個(gè)async函數(shù)都會(huì)隱式返回一個(gè)promise
await關(guān)鍵字只能在使用async定義的函數(shù)中使用
- await后面可以直接跟一個(gè) Promise實(shí)例對(duì)象
- await函數(shù)不能單獨(dú)使用
async/await 讓異步代碼看起來(lái)、表現(xiàn)起來(lái)更像同步代碼
async/await是ES7引入的新語(yǔ)法，可以更加方便的進(jìn)行異步操作。
async關(guān)鍵字用于函數(shù)上（async函數(shù)的返回值是Promise對(duì)象）。
await關(guān)鍵字用于async函數(shù)當(dāng)中（await可以直接得到異步的結(jié)果）。
async 基礎(chǔ)用法
? ? //async作為一個(gè)關(guān)鍵字放到函數(shù)前面
?? ?async function queryData() {
? ? ? //await關(guān)鍵字只能在使用async定義的函數(shù)中使用 ? ? ?await后面可以直接跟一個(gè) Promise實(shí)例對(duì)象
? ? ? var ret = await new Promise(function(resolve, reject){
? ? ? ? setTimeout(function(){
? ? ? ? ? resolve('nihao')
? ? ? ? },1000);
? ? ? })
? ? ? // console.log(ret.data)
? ? ? return ret;
? ? }
?? ?//任何一個(gè)async函數(shù)都會(huì)隱式返回一個(gè)promise ? 我們可以使用then 進(jìn)行鏈?zhǔn)骄幊?
? ? queryData().then(function(data){
? ? ? console.log(data)
? ? })async 函數(shù)處理多個(gè)異步函數(shù)
axios.defaults.baseURL = 'http://localhost:3000';
? ? async function queryData() {
? ? ? // ?添加await之后 當(dāng)前的await 返回結(jié)果之后才會(huì)執(zhí)行后面的代碼 ??
? ? ? var info = await axios.get('async1');
? ? ? // ?讓異步代碼看起來(lái)、表現(xiàn)起來(lái)更像同步代碼
? ? ? var ret = await axios.get('async2?info=' + info.data);
? ? ? return ret.data;
? ? }
? ? queryData().then(function(data){
? ? ? console.log(data)
? ? })以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
這篇文章主要為大家詳細(xì)介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03 
Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2018-03-03 
淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法
下面小編就為大家?guī)?lái)一篇淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-09-09 
Nuxt 嵌套路由nuxt-child組件用法(父子頁(yè)面組件的傳值)
這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁(yè)面組件的傳值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2020-11-11 
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù),localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧
2023-12-12 
vue+quasar使用遞歸實(shí)現(xiàn)動(dòng)態(tài)多級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了vue+quasar使用遞歸實(shí)現(xiàn)動(dòng)態(tài)多級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07 
vue環(huán)形進(jìn)度條組件實(shí)例應(yīng)用
在本文中我們給大家分享了關(guān)于vue環(huán)形進(jìn)度條組件的使用方法以及實(shí)例代碼，需要的朋友們跟著測(cè)試下吧。
2018-10-10 
Vue使用mixins實(shí)現(xiàn)壓縮圖片代碼
本篇文章主要介紹了Vue使用mixins實(shí)現(xiàn)壓縮圖片代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-03-03 
這篇文章主要介紹了解決vue打包后vendor.js文件過大問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07