現在很火的 vue 學習篇 （一）
記錄一下自己的學習過程，以及學習中遇到的問題。
學習什麼東西首先要知道為什麼去學習？學習它主要可以做什麼？
那什麼是vue.js?
vue是一個輕量級框架，與其他重量級的框架不同的是，vue採用自底向上增量開發的設計。使用vue只需要關注檢視層，不過使用起來讓我感覺最不錯的是vue的響應式資料繫結和組合試圖元件。
1.響應式資料繫結例如:
<body> <div id="box"> <input type="text" v-model="msg"/><br/> {{msg}} </div> </body>
通過v-model 指令，我們把msg 資料繫結到了input文字框，當我們修改文字框的值，發現msg 資料隨著input值的改變而改變。
2.組合試圖元件例如：
元件可以擴充套件 HTML 元素，封裝可重用的程式碼。在較高層面上，元件是自定義元素。如果是一個大專案的話，頁面中的DOM節點會有很多，頁面載入就會緩慢，這時vue.js在2.0版本中引入了虛擬DOM(virtual dom)。可以使效能有所提升(前提是頁面存在很多DOM節點的情況)。
2.1可以用 Vue.extend() 建立一個元件構造器：
var MyComponent = Vue.extend({ template : '<div>A custom component!</div>' })
要把這個構造器用作元件，需要用 Vue.component(tag, constructor) 註冊(這個註冊是全域性的)：
//全域性註冊元件，tag 為 my-component
Vue.component('my-component', MyComponent)vue.js的使用？
vue.js的開發環境我使用的是webstrom。vue的環境搭建首先要安裝node，藉助node裡面的npm來安裝需要的依賴等等，網上教程很多而且按照步驟安裝就可以了，就不說了。相信你在安裝的時候肯定遇到了npm install vue-cli -g命令。那這到底是什麼意思呢？
Vue-cli是什麼？
它是一個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檔案中有記錄。
import Vue from 'vue'
import App from './App'
import router from './router' //引入路由設定
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import "babel-polyfill"
//引入echarts
import echarts from 'echarts'3.App.vue
這是一個標準的vue元件，包含三個部分，一個是模板，一個是script，一個是樣式
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
@import "../static/css/main.css";
@import "../static/css/color-dark.css"; /*深色主題*/
/*@import "../static/css/theme-green/color-green.css"; 淺綠色主題*/
</style>
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: { 過濾器函式 }
專案中遇到的問題
1.遇到了初學者一般才會遇到的問題
編寫程式碼時遇到空格就會報錯 ，是因為出現空格不規範的原因，是在建立專案的時候引起的。主要錯誤如下圖所示：
解決辦法：找到目錄build下的webpack.base.conf.js檔案，把其中的rules裡的這一段登出掉：
2.我前後臺互動用的是axios.post()
jQuery.ajax的post提交預設的請求頭的Content-Type: application/x-www-form-urlencoded
而axios.post提交的請求頭是Content-Type: application/json。
解決辦法：所以在使用axios.post請求的時候需要新增以下程式碼：
3.還有就是跨域問題
解決辦法：在服務端加入以下程式碼：
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept");總結：
這是第一次寫部落格，也是第一次接觸vue，博主的認識還淺顯，如果有哪裡寫錯的地方還請大家指正！！！
孔子說：“學而不思則罔，思而不學則殆”。學是前提，思是關鍵，說明學與思是緊密相連的，二者缺一不可，所以寫部落格、作總結不單單是回顧也是在從新思考。所以在這裡感謝經理給我這次的學習機會，和一些學習經驗上的指導與分享。