我正在寫我的Vue組件的方式是否正確？

這是我目前正在編寫我的Vue組件的方式。例如。我正在寫我的Vue組件的方式是否正確？

<template> 
    <NavBar></NavBar> 
    <div class="Footer"> 
     <div class="left"> 
     <p>I'm a cool footer on the Left!</p> 
     </div> 
     <div class="middle"> 
     </div> 
     <div class="right"> 
     <p>I'm a cool footer on the Right!</p> 
     </div> 
    </div> 
    </template> 

    <script> 
    import NavBar from './NavBar.vue'; 
    export default { 
    name: 'Footer', 
    components: { 
     NavBar 
    } 
    data() { 
     return { 
     } 
    }, 
    methods: { 
    } 
    }

我的問題是我應該寫這樣的組件嗎？如果是這樣，有什麼區別？

Vue.component('my-component', { 
    template: '<div>A custom component!</div>' 
    }) 

    new Vue({ 
    el: '#example' 
    })

來源

2017-08-22 kcuhcx2

的官方指南這裏解釋的區別：https://vuejs.org/v2/guide/single-file-components.html

短的解釋是，<template>...語法用於單文件的部件（例如my-component.vue），而vue.component...語法用於沿着new Vue({...聲明。從導向

全報價：

在許多Vue的項目，全球組件將使用Vue.component，其次是new Vue({ el: '#container' })目標在每一個頁面的主體的容器元素來定義。這對於中小型項目非常適用，JavaScript只用於增強某些視圖。然而，在更復雜的項目，或者當你的前端完全是由JavaScript驅動的，這些缺點顯而易見：

全局定義強制唯一的名稱爲每個組件
字符串模板缺少語法高亮並且需要難看的斜槓用於多行HTML
沒有CSS支持意味着在同時HTML和JavaScript是模塊化成組件，CSS顯眼地離開了
沒有構建步驟限制我們HTML和ES5的JavaScript，像哈巴狗（原玉）和巴貝爾而非預處理器

所有這些都通過擴展.vue擴展的單文件組件解決，使用Webpack或Browserify等構建工具成爲可能。

來源

2017-08-22 21:22:39 mrogers

我會盡可能讓你的開發變得容易，並且可以很容易地理解應用程序結構。 – mrogers

我正在寫我的Vue組件的方式是否正確？

回答

相關問題