Vue是目前發展最快的Javascript框架之一。Vue被描述為是用於構建互動式介面的“直觀、快速、可組合”的MVVM，它已經成為開發者最喜歡的互動式Web開發的JavaScript框架。在2014年開始在Github上已經有97K的關注了。

與基於舊的模型-檢視-控制器架構的Angular不同，Vue遵循模型-檢視-檢視-模型系統。

Vue的另一個好處是它是單個檔案元件。這意味著你可以在單個 .vue 檔案中編寫 模板， 指令碼 和 樣式 。

<template>
    <p>{{greeting}}</p>
<template>

<script> module.exports = {
        data:function(){
            return {
                greeting:'hello'
            }
        }
    } </script>

<style> p{
        font-size:2em;
        text-align:center;
    } </style> 
 

在這篇文章中，我會講述構建高階Vue應用程式時需要用到的一些實踐經驗

應用設定

在這裡，你可以選擇不同的方式來建立Vue應用程式。如果你是一個新手，你可以檢視 JS Fiddle Hello World 示例來體驗Vue。

在這篇文章中，我會用Vue CLI建立一個Vue專案。首先，在系統中開啟終端並編寫以下命令安裝Vue CLI：

$ npm install --global @vue/cli

你現在可以建立一個Vue專案了！讓我們試試：

$ vue create vue-app
$ cd vue-app

這樣我們就建立了一個叫vue-app的Vue專案。你也可以叫其他名字。

用vue-class-component建立Vue元件

看下頂部的程式碼，你可以看到 data 函式返回的是物件，如果你想做事件處理，需要編寫 method 物件。

vue-class-component 允許開發者直接將資料屬性和事件處理作為類的屬性來減少開發工作量。

用編輯器開啟專案目錄（I :heart: VS Code）。在 src 資料夾中，會看到有 App.vue 和 main.js 。

有 React 開發經驗的人可以把 main.js

 看成是React的 index.js 。當執行 yarn serve或 yarn build 時，這個檔案就會執行。

重新寫下你的main.js:

import 'tailwindcss/dist/tailwind.css';
import Vue from 'vue';
import App from './App';

new Vue({
    el:'#app',
    render:h=><App/>
})

首先獲取 public/index.html 檔案中id為”app”的div元素，然後啟動 APP 元件。

然後在 App.vue 檔案中建立此App元件。開啟 App.vue 檔案，把程式碼替換成：

<template>
    <h1 @click="onClick">
    {{message}}
    </h1>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';

export default Component({})(
    class App extends Vue {
        message = 'Batman';

        onClick(){
            this.message = 'Bruce Wayne';
        }
    }
)

</script>

這裡，我首先建立了一個簡單的 template ，裡面有一個 div 。 script 中引入 Vue 和 vue-class-component 中的 Component .你還需要在專案中安裝此軟體包。

$ yarn add vue-class-component

接下來，我用 Component 函式包裝 App 。此函式有一個可傳入物件選項。

如果你使用的是Vs Code，你將看到你 App 上有錯誤。這是因為預設的Vs Code不支援對修飾器的實驗。要解決這個問題，需要建立一個叫 jsconfig.json 檔案。這個檔案中告訴Vue編輯器允許使用修飾器實驗。

{
    "compileOptions":{
        "exprimentalDecorators":true
    }
}

重啟編輯器，這個錯誤就消失了！

現在回答這個問題，“為什麼我用 vue-class-component 而不用Vue的傳統元件？”

在傳統元件中，你需要編寫一個返回物件的 data 函式。要改變元件中的任何東西，就要編寫像 onClick 之類的 方法 。

const TraditionalComp = {
    data(){
        return {message:"Batman"}
    },
    methods:{
        onClick(){
            this.message = "Bruce Wayne"
        }
    }
}

但是在 vue-class-component ,你可以直接寫 onClick 方法，然後連結到模板檔案。只要在模板 h1 標籤內編寫 @click="onClick" 就可以了。

用 yarn serve 命令執行Vue應用程式，效果如下：

用vue-property-decorator來定義Props

你還可以用 vue-property-decorator 直接在類上定義屬性。通過 @Prop() 裝飾器就可以實現,這種prop宣告方法可以讓類看起來簡潔。

首先，在專案中安裝vue-property-decorator包：

$ yarn add vue-property-decorator   

這個包的另一個好處是它還包含了 vue-class-component 。因此，你可以從 vue-property-decorator 包中引入 Component 。

在 App.vue 檔案中，重新梳理程式碼，如下：

<template>
    <h1 @click="onClick">
        {{message}}
    </h1>
</template>

<script>
import Vue from 'vue';
import {Component,Prop} from 'vue-property-decorator';

export default Component({})(
    class App extends Vue{
        @Prop({default:'Batman'})
        message;

        onClick(){
            this.message = 'Bruce Wayne';
        }
    }
)
</script>

在這裡，我首先從’vue-property-decoratoe’包中引入 Component 和 Prop 包。然後在App中，我使用 @Prop 修飾器來設定 message 的預設值。

這樣！ message 就可以通過prop傳遞資料了，同是也有一個預設值。

使用Vue Slots定義內容在元件中的位置

Vue的 slots 可以定義內容在元件中的位置。現在這可能聽起來有點混亂，通過一些程式碼看下 slots 到底做了什麼

回到main.js檔案中，在render中重寫程式碼像這樣：

render:h=>(
    <App>
        <h1>Superman</h1>
    </App>
)

如果在瀏覽器中檢視該應用程式，你可以看到沒有任何更改。這是因為你沒有 App.vue中 template 內指定文字的位置，這是 slots 要做的

在 App.vue 的 template 中，寫兩個 slots 包裝原來的 h1 標籤。

<template>
    <div>
        <slot name="header"></slot>
        <h1 @click="onClick"> {{message}}
        </h1>
        <slot name="footer"></slot>
    </div>
</template> 

這時候仍然看不懂內容。那是因為編譯器現在不知道將新文字放到哪個slot。我希望文字位於底部slot中。我給這個插槽一個 name 命名為 footer 。

再來看main.js檔案，將slot=”footer”的屬性新增到新文字中，然後，就能看到內容了。

但是，這樣的 渲染 方式顯得不靈活。讓我們看下如何用 slot 優化他

使用Slots建立佈局

你也可以用 slots 來自定義佈局，可用於指定每個應用程式和元件的位置。

在 src/components 資料夾中建立一個名為 Layout.vue 的新檔案。在此檔案中編寫一個 template ，如下所示：

<template>
    <div>
        <slot name="header"></slot>
        <slot name="body"></slot>
        <slot name="footer"></slot>
    </div>
</template>

接下來，進入 App.vue 檔案並刪除 template 內的內容，然後在 script 標籤內，引入 Layout.vue ：

import Layout from './components/Layout';

你還需要告訴 Component 裝飾器您正在使用 Layout 作為元件。

export default Component({
    components:{Layout}
});

你現在可以在 template 中 Layout 元件，還需要去新增一些文字。

<template>
  <Layout>
    <h1 slot="header">How To Build Vue Apps Like A Pro :sunglasses:</h1>
    <h2 slot="body"> by Rajat S</h2>
    <h3 slot="footer">Technical Content Writer</h3>
  </Layout>
</template>

要確保新增的 slot 有相對應的名字，否則將看不到渲染

用Vue Slot來傳遞Props

通過將元件與 slots 相結合，你可以通過 slot-scope 來傳遞元件的資料。通過props將資料從父元件傳到子元件，而不是耦合在一起。

再看 App.vue 檔案和 template 標籤內，將 Layout 寫在 Settings 內。

<template>
    <Settings>
        <Layout slot-scope="{header}">
            <h1 slot="header">{{header}}</h1>
            <h2 slot="body"> by Rajat S</h2>
            <h3 slot="footer">Technical Content Writer</h3>
        </Layout>
    </Settings>
</template> 

在 script 標籤中引入 Setting ，

import Settings from './components/Settings.vue'

告訴 Component 裝飾器你正在使用 Settings 元件。

export default Component({
    components:{Layout,Settings},
});

現在，你需要建立 Settings 元件。去 src/componets 建立一個 Settings.vue 的檔案。像這樣寫：

<template>
    <div>
        <slot :header="header"></slot>
    </div>
</template>

<script> import Vue from 'vue';
    import Component from 'vue-class-component';
    export default Component({})(
        class Settings extends Vue{
            header='How To Build Vue Apps Like A Pro :sunglasses:';
        }
    ) </script>

在 template 標籤內， slot 在 div 裡，在 slot 裡面，我綁定了 :header=“header”

script 標籤內，首先從 vue-class-component 包引入 Vue 包和 Component 裝飾器。

然後，在 Component 裝飾器中建立一個 Header 類。類裡面包含需要傳給header的資料。

傳遞引數給功能模板

功能模板允許你建立只有 template 標籤的元件，並且暴露 props 給模板。

在 src/components 資料夾中，建立一個 Header.vue 的新檔案：

<template functional>
    <h1 slot="header">{{props.header}}</h1>
</template> 

這裡的 functional 一詞表示該檔案只有一個的 template 。對於 Body.vue 和 Footer.vue 檔案重複使用。

在 App.vue 檔案並重寫 template 。

<template>
  <Settings>
    <Layout slot-scope="{header, body, footer}">
      <Header slot="header" :header="header"></Header>
      <Body slot="body" :body="body"></Body>
      <Footer slot="footer" :footer="footer"></Footer>
    </Layout>
  </Settings>
</template> 

在 script 中引入Header,Body,Footer檔案。

import {header,Body,Footer} from './component';

告訴 Component 裝飾器你正在使用這個元件。

export default Component({
    components:{
        Settings,
        Layout,
        Header,
        Body,
        Footer,
    }
})

但這個程式碼仍然不生效，因為剛寫的import語句不對。要解決這個問題，需要再 src/component 中建立一個名為 index.js 的新檔案。

export {default as Header} from ‘./Header.vue’;
export {default as Body} from ‘./Body.vue’;
export {default as Footer} from ‘./Footer.vue’;

這樣，你就可以在Vue建立功能模板，並可以用props從父元件傳參到子元件，同時省去了大量的程式碼

Vue元件使用Bit

Bit是一個用於多個應用程式或專案中共享元件的平臺，同時實時更新。當使用Vue.js元件時，Bit 是在開發不同的專案協作更新時一種非常棒的合作開發元件。

(Bit) [https://bitsrc.io/]

結論

Vue是在全球範圍內被廣泛應用的Web開發軟體技術，Vue實際上是一個Javascript框架，其中包含用於構建使用者介面的各種工具。

Vue成功的背後一個主要因素是它易於學習，並且使用它可以讓構建精彩的應用程式更加容易。

我希望這篇文章能夠幫助你更好的理解Vue以及如何使用它來構建更好的應用程式。

 

 

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：943129070，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。