SPA：單頁應用(Single Page App),具體好處,百度搜索

我們可以想象一個場景，有兩個頁面,每個頁面的頭部都有一張 Logo 圖片.如果每次都寫成原始 HTML 的話,代碼就會重復.

// 頁面1的代碼如下:<div class='logo'><img src='url'> </div>// 頁面2的代碼如下:<div class='logo'><img src='url'></div>

因此，我們可以把這段代碼抽取出來成為一個新的組件(component)

// 創建一個新的組件 (存放在/src/components/Logo.vue) <template><div class='logo'><img src='url'></div> </template>

在頁面中引用組件

<template><div><my-logo></my-logo> <!-- 對應MyLogo -->...</div> </template><script> import MyLogo from '@/components/Logo'export default {...components: {MyLogo} } </script> 雖然上面代碼中定義的組件名字為MyLogo，但是在<template/ > 中使用時需要寫為 <my-logo ></ my-logo>

參考 《Vue.js快速入門》 P106

總結

以上是生活随笔為你收集整理的vue --- SPA模式的组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。