vue是一個輕量級框架,與其他重量級的框架不同的是,vue採用自底向上增量開發的設計。使用vue只需要關注視圖層,不過使用起來讓我感覺最不錯的是vue的響應式數據綁定和組合試圖組件。
1.響應式數據綁定例如:
通過v-model指令,我們把msg數據綁定到了input文本框,當我們修改文本框的值,發現msg數據隨着input值的改變而改變。
2.組合試圖組件例如:
組件可以擴展 HTML元素,封裝可重用的代碼。在較高層面上,組件是自定義元素。如果是一個大項目的話,頁面中的DOM節點會有很多,頁面加載就會緩慢,這時vue.js在2.0版本中引入了虛擬DOM(virtual dom)。可以使性能有所提升(前提是頁面存在很多DOM節點的情況)。
2.1可以用 Vue.extend() 創建一個組件構造器:
要把這個構造器用作組件,需要用 Vue.component(tag, constructor) 註冊(這個註冊是全局的):
//全局註冊組件,tag 爲 my-component
Vue.component('my-component', MyComponent)
vue.js的開發環境我使用的是webstrom。vue的環境搭建首先要安裝node,藉助node裏面的npm來安裝需要的依賴等等,網上教程很多而且按照步驟安裝就可以了,就不說了。相信你在安裝的時候肯定遇到了npm
install vue-cli -g命令。那這到底是什麼意思呢?
它是一個vue.js的腳手架工具。就是一個自動幫你生成好項目目錄,配置好Webpack,以及各種依賴包的工具。 -g是全局安裝,這就表示打開命令行之後可以直接通過vue命令調用它。
build 目錄是一些webpack的文件,配置一些參數,一般不動。
config 是vue項目的基本配置文件
node_modules 是項目中安裝的依賴模塊
src 源碼文件夾,基本上文件都應該放在這裏
------assets 資源文件夾,裏面放一些靜態資源
-------components 這裏放的都是各個組件文件
--------App.vue App.vue組件
---------main.js入口文件
static 生成好的文件都會放在這個目錄下(css、js等)
test 測試文件夾,測試都寫在這裏
.babelrc babelrc編譯參數,vue開發需要babel編譯
.editorconfig 編輯器配置文件
.gitignore 用來過濾一些版本控制的文件,比如node_modules 文件夾
index.html 主頁
package.json 項目文件,記載着一些命令和依賴還有簡要的項目描述信息
README.md 項目說明(介紹自己這個項目的)
其中要重點說一下一下幾個文件:
1.package.json文件。
dependencies:項目發佈時的依賴
devDependencies:項目開發時的依賴
scripts:編譯項目的一些命令
2.main.js
這裏是入口文件,可以引入一些插件或靜態資源,當然引入之前要先安裝了該插件,在package.json文件中有記錄。
importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'//引入路由設置
importaxiosfrom'axios'
importElementUIfrom'element-ui'
import'element-ui/lib/theme-chalk/index.css'
import"babel-polyfill"
//引入echarts
importechartsfrom'echarts'
3.App.vue
這是一個標準的vue組件,包含三個部分,一個是模板,一個是script,一個是樣式
importHellofrom'./components/Hello'
exportdefault{
name:'app',
components: {
Hello
}
}
@import"../static/css/main.css";
@import"../static/css/color-dark.css";/*深色主題*/
/*@import "../static/css/theme-green/color-green.css"; 淺綠色主題*/
4.webpack.base.conf.js
在build文件夾下的webpack.base.conf.js設置main.js爲入口文件
vue.js實例中的參數
el: 'id' //el就是 vue 程序的解析入口
data: { 數據 } //data就是ViewModel
methods: { 函數 } //函數中的this指向該應用中data的數據
computed: { 聲明一個計算屬性函數 }
filters: { 過濾器函數 }
項目中遇到的問題
現空格不規範的原因,
eslint 的原因 vscode編輯器。文件-設置-首選項。配置一下空格數。{}對齊方式等等
解決辦法:找到目錄build下的webpack.base.conf.js文件,把其中的rules裏的這一段註銷掉:
2.我前後臺交互用的是axios.post()(這個是比較坑的。。。)
使用qs(npm install qs)它用來格式化數據,自行百度。
jQuery.ajax的post提交默認的請求頭的Content-Type: application/x-www-form-urlencoded
而axios.post提交的請求頭是Content-Type: application/json。
解決辦法:所以在使用axios.post請求的時候需要添加以下代碼:
3.還有就是跨域問題
在
解決辦法:在服務端加入以下代碼:
設置一下config文件夾下的index.js的代理設置。看我的其他博客,打包後 文件js img等資源找不到問題自行百度、很多方法