近期第一次使用vue快速開發了一款前端專案, 開發效率與便捷性大幅提公升, 體驗了一把vue的藝術之道, 在此總結下目前所接觸到的vue基礎使用知識, 後續會補充遇到的知識點和問題以及解決方案.
簡介:vue 是典型mvvm框架，擁有雙向繫結的能力與完整的元件化方案，利用 virtual dom 提供了函式式的 ui 程式設計方式，可以後端渲染。中文文件vue.js
一. 開發環境搭建:
node.js 中文網
2. 設定**映象站:
npm install -g cnpm --registry=cnpm install npm -gcnpm install --global vue-cli# 使用webpack初始化新專案
vue init webpack my-project
# 進入專案目錄
cd my-project
# 安裝所有依賴庫
cnpm install
# 執行除錯, 此時會自動開啟預設瀏覽器,啟動本地專案
npm run dev
vue2.0時代 推薦的網路請求庫 axios
由於我本人使用的是vue2.0, 下面介紹axios使用中應注意的問題.
(1) 指定請求頭 requestheader
預設情況下,axios post傳參時不指定請求頭requestheader，預設使用的content-type是text/plain;charset=utf-8，, 而我們後台介面通常採用form表單型別接收, 此時會認為引數非法無法獲取, 報302錯誤, 如下圖:
解決方案: 設定content-type,同時使用formdata傳參
import axios from 'axios'
let data = new formdata()
axios.post(`/api/****`, data).then(response => response.data)
target字段改為自己的後台介面ip和埠
後台介面需要設定header
2. 路由vue-router中文文件
如果我們是使用vue-cli腳手架構建的專案, 路由預設配置在/src/router/index.js檔案中, 並已經配置到main.js中
路由的跳轉有3種情況
(1) 固定位址/menu/regist
(2) 動態路徑/user/:userid
// 命名的路由
router.push(})
// 帶查詢引數
router.push(})
vue 2.0 api 變化
如何在 vue 專案裡正確地引用 jquery 和 jquery-ui的外掛程式
vue-cli 生成的模板中有乙個@，是什麼意思？
常用元件庫:(不定期補充)
pc端ui元件 element
移動端ui元件 vux - 移動端vue元件庫
高德地圖外掛程式 vue-amap
移動端滾動外掛程式 better-scroll
福利:本文已同步到我的個人技術**it乾貨-sufaith
vue2 0的基本使用
指令的使用 v model 雙向模型改變 v text 文字渲染，渲染頁面比較多 v show 控制dom的顯示隱藏 v if 控制dom 判斷 v bind 繫結屬性 v for 迴圈，只要用於列表等 v on 事件繫結 v model 主要是在表單裡面使用。比如文字框 下拉框 單選 複選 tex...
vue2 0使用預渲染
檔案目錄如下 執行後如下圖 首頁的網路請求只有乙個，沒有對應的文字和元件，不利於seo 1.router的模式必須是history 2.核心外掛程式 npm install prerender spa plugin d 3.在build webpack.prod.conf.js內部引入渲染器 con...
使用VUE2 0構建webpack專案
1 vue構建webpack專案需要依賴於node 和npm 需要先安裝。輸入node v回車 會出現node版本號 輸入npm v回車 會出現npm版本號 2 安裝vue npm install g vue cli g表示全域性安裝，vue cli是模組 或者使用 映象 npm install r...