關(guān)于單文件組件.vue的使用
vuejs 自定義了一種.vue文件，可以把html, css, js 寫到一個文件中，從而實現(xiàn)了對一個組件的封裝， 一個.vue 文件就是一個單獨的組件。由于.vue文件是自定義的，瀏覽器不認識，所以需要對該文件進行解析。 在webpack構(gòu)建中，需要安裝vue-loader 對.vue文件進行解析。在 sumlime 編輯器中，我們 書寫.vue 文件，可以安裝vue syntax highlight 插件，增加對文件的支持。
環(huán)境搭建完畢，利用vue-router實現(xiàn)了頁面跳轉(zhuǎn)，那么現(xiàn)在要處理的就是頁面的內(nèi)容了。
一個頁面可以看作是由各種各樣的組件組成的，大至一個頁面，小至一個按鈕都可以作為一個組件，頁面的組件化可以大大提高代碼的重用性，免除了很多重復(fù)性的勞動。vue允許把用戶組件寫成單個的文件，尾綴為.vue，然后再以模塊的方式引入,下面是我的例子：
入口文件：
import Vue from 'vue';
import VueRouter from 'vue-router'
import Main from'./components/main.vue'
import Login from'./components/login.vue'
import Content from'./components/content.vue'
Vue.use(VueRouter);
const routes=[
{path:'/login',component:Login},
{path:'/main',component:Main},
{path:'/main/content',component:Content},
{path:'/',redirect:'/login'}
];
const router=new VueRouter({
routes
});
var app=new Vue({
router,
el:'#app',
template:'<router-view></router-view>'
});
這是其中的一個組件content：
<template>
<p class="demo-title">{{msg}}</p>
</template>
<script>
export default{
data:function(){
return{msg:"hello"}
}
}
</script>
<style>
.demo-title{color:red;}
</style>
這里用上了ES6的模塊加載功能：export和import，在組件中使用export，可以把組件定義為一個模塊，import則可以把已定義的組件，這樣就能方便處理模塊間的依賴關(guān)系。
一個vue文件一般來說有三個元素：template（html模板），script，style，我們在script中編寫組件所需要的依賴和交互代碼，并用export將整個組件以模塊的方式定義。在script中，組件的編寫方法與在vue對象中的編寫組件的方法并無二致，所以也可以把template寫進script里面。
一個組件對應(yīng)一個文件，這樣子就可以在組件內(nèi)部處理組件自身的內(nèi)容，css也可以只針對組件生效，十分方便。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue使用CDN引用項目組件，減少項目體積的步驟，幫助大家提高項目加載速度，感興趣的朋友可以了解下2020-10-10
本文詳細講解了Vue的生命周期，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了vue3中展示markdown格式文章的三種形式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
vue中使用keep-alive動態(tài)刪除已緩存組件方式
這篇文章主要介紹了vue中使用keep-alive動態(tài)刪除已緩存組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了Vue中的性能優(yōu)化方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
在vue中，有時候你需要對data中的數(shù)據(jù)進行處理，或者對抓取的數(shù)據(jù)進行處理之后再掛載呈現(xiàn)到標(biāo)簽中，這時候你就需要計算屬性了，當(dāng)然看到這里你可能還是不了解那下面我舉幾個實例并附代碼解釋2023-03-03
Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關(guān)于Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-03-03
element-plus的自動導(dǎo)入和按需導(dǎo)入方式詳解
之前使用 ElementPlus 做項目的時候,由于不會使用按需引入耽誤了不少時間,這篇文章主要給大家介紹了關(guān)于element-plus自動導(dǎo)入和按需導(dǎo)入的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式
這篇文章主要介紹了Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue學(xué)習(xí)之a(chǎn)xios的使用方法實例分析
這篇文章主要介紹了Vue學(xué)習(xí)之a(chǎn)xios的使用方法,結(jié)合實例形式分析了vue.js axios庫的功能及網(wǎng)絡(luò)請求相關(guān)操作技巧,需要的朋友可以參考下2020-01-01