最近在某個項目中用到了Vue.js,從上手做開發(fā)到項目發(fā)布，一步步踩了不少坑。本文試圖總結過去一個多月使用Vue.js中的一些經驗，也算是一點心得體會吧，拿出來與大家分享，歡迎多多交流。

十載的通渭網站建設經驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網站的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同，自動調整通渭建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯從事“通渭網站設計”,“通渭網站推廣”以來，每個客戶項目都認真落實執(zhí)行。

Vue.js簡介

Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a tool that leverages the use of MVVM architecture.

這是來自Vue.js官網的解釋，這里我們不打算再照本宣科的把概念翻譯一邊了，僅就作者使用Vue.js的心得體會來做出解釋。熟悉ReactJS或者Angular的讀者可能對此并不陌生。

Vue.js與ReactJS、AngularJS這些框架一樣都持有相同的開發(fā)理念，通過擴展原生的HTML等結構化標簽來作為其模版語言，此外進一步通過語法上的擴展提供了諸如雙向數據綁定、交互數據模型等概念，從而使開發(fā)者從繁雜的DOM操作中解脫出來，將更多的精力用于關注業(yè)務本身的內容。

此外，與React類似的是，均提出了包括虛擬DOM和組件化開發(fā)的理念，從而提高了代碼的可維護性和性能。Vue.js試圖用一種極簡的方式來實現以上這些框架帶來的優(yōu)勢，因此，相比于React和Angular來說，Vue.js更加輕量、簡介和優(yōu)美。

下面，在進一步探究Vue.js之前，我們先看一下Vue.js的幾個核心概念。

組件化

組件化開發(fā)是最近兩三年比較火的概念。通過使用Vue.js來創(chuàng)建的組件，就像構建萬丈高樓的磚塊一樣，擁有良好的封裝性和復用性。每一個組件都擁有其獨立的樣式和數據域，并且完全與其它組件完全隔離。簡單的講，任何前端的界面都可以通過合理的規(guī)劃，劃分成擁有不同職責的組件。 關于組件化開發(fā)的概念我們不再進一步展開，感興趣的同學可以進一步閱讀這篇文章前端工程-基礎篇。

Vue.js的插件化

正如你所知，Vue.js的核心部分僅保留了包括數據綁定及組件化開發(fā)相關的內容。因此才保證了其極簡的機制。此外，對于附加的功能也提供了高效靈活的插件化機制。對于大家耳熟能詳的插件包括vue-router、vee-validator、vue-touch等。此外，也提供了允許開發(fā)者自己封裝組件的機制。從而使你能更有效地抽象某些功能，為團隊開發(fā)所用。例如，你可以將有關數據計算的邏輯抽象為獨立的插件，提供給團隊的人使用等。

state和vuex

如果你的項目非常簡介，沒有復雜的邏輯，那么你完全沒必要引入vuex。vuex是用來在應用各個組建之間管理和共享應用state的模塊，如果你使用過React那么你應該對Flux不陌生，vuex起到的作用與此類似。

vue-cli

Vue.js也提供了非常高效的命令行工具，通過使用幾個簡單的命令就能快速構建基于Vue.js的組件和應用，極大的減少了開發(fā)者的工作量，將開發(fā)者從繁雜的重復性的勞動中解放出來。關于vue-cli，我們不再展開，讀者可以閱讀vue-cli進一步了解vue-cli的功能。

常用指令

Vue.js提供了包括v-for、v-if、v-show、v-bind、v-model、v-on、v-html等內部指令，這里不再細說每一個指令的用法，讀者可以自行參考文檔。

需要說明的是v-if和v-show的不同，v-show是通過更改DOM元素的display屬性來實現隱藏與否的，而與v-show不同的是，v-if是通過完全移除DOM元素來實現隱藏與否的。因此，如果你的隱藏內容的確需要反復，那么使用v-show，這樣性能更好。

v-bind與v-model不同的是，v-model是雙向數據綁定，而v-bind是單向綁定的。

v-for使用的時候，最好提供一個key給vue.js。

數據傳遞

父組件通過props傳遞數據到子組件 ，子組件通過events來傳遞數據改變到父組件。對于簡單的數據修改，可以通過這種方式實現。但是對于復雜的數據邏輯，建議通過vuex來管理。例如：父組件傳遞title到子組件：

// 父組件中<...>
    <child :title="title"></child>
</...>// 子組件export default {    <...>
        props: ['title'], // 然后就可以通過this.title來使用了
    <...>}

子組件傳遞修改到父組件,通過事件

// 父組件中<...>
    <child @changeTitle="changeTitle"></child>
</...>
<...>export default {
    methods: {
        changeTitle(text) {            this.title = text;
        }
    }
}</...>// 子組件<template>
    <... :click="onChangeTitle"></...>
</template>export default {
    methods: {
        onChangeTitle (text) {            this.$emit('changeTitle', this.id, text)
        }
    }
}

對于全局性的state，可以通過vuex來封裝。例如用戶登錄信息，全局都用到的常量信息等。對于vuex的內容比較多，大家可以看這里。vuex api。

生命周期方法

Vue.js提供了一套完整的組件的生命周期鉤子方法，你可以在組件的生命周期的各個階段做該做的事情。其完整的生命周期的方法圖示如下：

vue-resource

前端開發(fā)不可避免的就是前后端交互，這里非常推薦vue-resource。建議將涉及到前后端交互的所有API放在一個獨立的api.js文件當中，方便管理。然后在需要接口的地方導入對應的方法即可。下面是一個示例：

import Vue from 'vue'import VueResource from 'vue-resource'Vue.use(VueResource)const API = {    "getYAndMGrade": "http://localhost:3000/demo/getYAndMGrade", 
    "createMonthPlan": "http://localhost:3000/demo/createMonthPlan"};const post = (url,params)=>{    return Vue.http.post(url,{        params: params
    }).then(function (res) {        return res.data;
    });
};// 接口1export const getYAndMGrade = (user) => {    return post(API.getYAndMGrade, {user:user});
};// 接口2export const createMonthPlan = (user, month)=> {    return post(API.createMonthPlan, {user: user, month: month});
};

vue-router

vue-router是基于vue.js用來解決前端路由的方案。vue-router提供了包括動態(tài)路由等功能。這里也給出一個示例：

export default [
  {
      name: 'about',
      path: '/about/',
      component: require('./pages/about.vue')
  },
  {
      name: 'blog',
      path: '/blog/:blogId',
      component: require('./pages/blog.vue')
  }
]

示例中的blog可以知，我們可以傳遞id參數并且在組件中過去id。此外，我們可以傳遞多個參數，如’/blog/:blogID/:postId’等。這里建議不要超過2個，因為傳遞的越來越多，就不再方便管理了。

組件刷新

作者在使用vue.js的過程中反復遇到過一個問題，就是組件刷新的問題。例如，作者的項目當中有用到菜單，打開不同的菜單對應不同的路由和組件。而如果在當前組件中，再次點擊打開當前組件的菜單，則組件并不會刷新。

這就導致一個頭疼的問題，因為用戶點擊菜單本身就是想刷新當前頁面，而組件的數據并沒有刷新，因此就看不到最新的數據。解決思路就是，在組件路由里增加了一個時間參數，然后在組件當中增加了對這個時間參數的watch。具體是實現如下：

<...>
    <router-link :paht="'/list' + '?_=' + new Date().valueOf()"></router-link>  // 增加當前時間戳_參數</...>然后在組件當中watch這個時間參數就可以了：<...>
    export default {
        ...
        watch: {            "this.$router._": function() {                // refresh data here            }
        }
        ...
    }</...>

網站名稱：Vue.js總結
瀏覽地址：http://www.rwnh.cn/article44/ippohe.html

成都網站建設公司_創(chuàng)新互聯，為您提供做網站、品牌網站建設、建站公司、微信公眾號、關鍵詞優(yōu)化、軟件開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯