當前位置：首頁 > 前端技术 > vue >内容正文

vue

使用vue组件搭建网页应用

發布時間：2023/12/4 vue 22 豆豆

生活随笔收集整理的這篇文章主要介紹了使用vue组件搭建网页应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

關于如何創建vue項目請參考如何使用vue組件搭建網頁并打包發布

這里我使用 vue init webpack-simple 創建一個簡單的工程，我們關注的重點是 index.html 文件和 /src 文件夾，index.html 是入口文件，/src 文件夾則存放我們的 vue 組件

index.html的內容如下

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>vue-simple</title></head><body><div id="app"></div><script src="/dist/build.js"></script></body> </html>

<div id="app"></div> 這句表示我們的主組件，對應的是src文件夾下的App.vue，程序運行時將會被App.vue中的模板替換
<script src="/dist/build.js"></script> 這句可以不用管，是發布之后會用到的。
/src 文件夾下還有一個文件 main.js，其主要作用為運行App組件，有興趣的同學可以嘗試替換運行自定義組件

main.js內容如下

import Vue from 'vue' import App from './App.vue'new Vue({el: '#app',render: h => h(App) })

el: '#app' 尋找的時 index.html 中的元素

關于Vue中 render: h => h(App) 的含義

自定義.vue組件

在工程目錄 /src 下創建 component 文件夾，并在 component 文件夾下創建一個 banner.vue 文件，我們先做一個簡單的vue組件測試一下

稍微有點vue基礎知識的都知道vue組件怎么寫，沒有基礎知識的，仿照一下改一改也能自己寫一個了

<template><div class="banner"><img src="../images/banner.jpg" alt="banner"></div> </template><script> export default {name: 'banner' } </script><style> .banner {width: 100%;height: 700px;overflow: hidden; } img {width: 100%;height: 100%;object-fit: cover; } </style>

把vue組件放入App.vue

我把 App.vue 中的內容改成了如下形式

<template><div id="app" class="app"><banner></banner></div> </template><script> import banner from './component/banner.vue'export default {name: 'app',components: { banner } } </script><style lang="scss"> body {margin: 0; } </style>

在模板中寫入組件 <banner></banner>

在腳本中引入 banner 組件文件 import banner from './component/banner.vue'

在腳本中注冊 banner 組件 components: { banner }

輸入npm run dev 運行程序后就能看到效果，程序運行中，更改內容也會實時的在網頁中顯示

使用組件搭建網頁

有了前面兩個基礎后和vue語法基礎后，我們就可以嘗試使用多個vue組件搭建復雜網頁應用了

demo做一個簡單的網頁頭部，包括導航和banner，用到了swiper插件， npm install swiper --save 將swiper添加到依賴庫

主要的文件 / 目錄結構

base.css 是css樣式重置

index.html

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>vue-simple</title><link rel="stylesheet" href="/src/base.css"></head><body><div id="app"></div><script src="/dist/build.js"></script></body> </html>

App.vue

<template><div id="app" class="class"><div class="top"></div><navigation></navigation><banner></banner></div> </template><script> import banner from './component/banner.vue' import navigation from './component/navigation.vue'export default {name: 'app',components: { banner, navigation } } </script><style lang="scss"> body {margin: 0; } .top {width: 100%;height: 2px;background-color: #2d8fff; } </style>

banner.vue

<template><div class="banner swiper-container" :id="id"><div class="swiper-wrapper"><template v-for="item in items"><div :key="item" class="swiper-slide"><img :src="item.src" alt="item.alt"></div></template></div><div class="swiper-pagination"></div></div> </template><script> import Swiper from "swiper" import 'swiper/dist/css/swiper.min.css'export default {name: 'banner',data () {return {id: 'banner',items: [{ src: 'src/images/xiannvxingxi.jpg', alt: ''},{ src: 'src/images/taikonglvxing.jpg', alt: ''}],}},mounted () {new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination'},autoplay: true,loop: true,autoplayDisableOnInteraction: false});} } </script> <style> .banner {width: 100%;height: 500px;overflow: hidden; } img {width: 100%;height: 100%;object-fit: cover; } </style>

navigation.vue

<template><div id="navigation" class="nav"><ul><template v-for="item in items"><li :key="item"><a :href="item.url">{{ item.txt }}</a><secnav v-if="item.secnav" :items="item.secnav" :class="secnav"></secnav></li></template></ul></div> </template><script> import secnav from './secnav.vue'export default {name: 'navigation',components: { secnav },data () {return {items: [{ txt: '主頁', url: '/'},{ txt: '聯系我們', url: '/'},{ txt: '服務內容', url: '/', secnav: [{ txt: '火星旅行', url:'/'},{ txt: '仙女星旅行', url:'/'},{ txt: 'M77旅行', url:'/'},]},{ txt: '售前咨詢', url: '/', secnav: [{ txt: '旅行路線', url:'/'},{ txt: '安全保障', url:'/'},{ txt: '自助查詢', url:'/'},{ txt: '人工客服', url:'/'},]},{ txt: '投訴建議', url: '/' },],}} } </script><style> .nav {width: 100%;max-width: 970px;margin: 0 auto; } .nav>ul {display: flex;list-style: none;margin: 0;justify-content: space-around; } .nav>ul li {flex-grow: 1;padding: 15px 20px;text-align: center;position: relative; } .nav>ul li:hover {background-color: #2289ff;cursor: pointer; } .nav>ul li:hover>a{color: white; } .nav>ul li:hover .secnav {display: inline-block;z-index: 2; } .nav>ul li a {display: inline-block;width: 100%; } </style>

secnav.vue

<template><ul class="secnav"><template v-for="item in items"><li :key="item"><a :href="item.url">{{ item.txt }}</a></li></template></ul> </template><script> export default {name: 'secnav',props: [ 'items' ], } </script><style> .secnav {position: absolute;background-color: #fff;display: none;left: 0;top: 100%;width: 100%; } </style>

效果圖

總結

以上是生活随笔為你收集整理的使用vue组件搭建网页应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Vue中render: h = h(Ap
下一篇： html5倒计时秒杀怎么做,vue 设