淺談vue

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的使用?

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文件中有記錄。

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等資源找不到問題自行百度、很多方法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章