快捷導(dǎo)航

前端開發(fā)之html，css，JavaScript和vue關(guān)系詳解

更新時(shí)間：2026年03月08日 11:05:00 作者：結(jié)網(wǎng)的兔子

作為一名前端開發(fā)者,掌握 HTML、CSS、JavaScript 和Vue.js 是必不可少的技能,下面這篇文章主要介紹了前端開發(fā)之html,css,JavaScript和vue關(guān)系的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

HTML、CSS、JavaScript 是什么？（三大基石）

HTML - 房子的結(jié)構(gòu)骨架

是什么：超文本標(biāo)記語言，由一系列標(biāo)簽組成。

作用：定義網(wǎng)頁的內(nèi)容和結(jié)構(gòu)。就像蓋房子時(shí)的承重墻、房間布局。

<div id="app">
  <h1>標(biāo)題</h1>
  <p>一段文字</p>
  <button>點(diǎn)我</button>
</div>

CSS - 房子的裝修裝飾

是什么：層疊樣式表。

作用：控制網(wǎng)頁的外觀和布局。就像給房子刷墻、鋪地板、擺家具。

h1 {
  color: red;           /* 把標(biāo)題變成紅色 */
  font-size: 24px;      /* 把字體變大 */
}

button {
  background: blue;     /* 按鈕背景變藍(lán) */
  border-radius: 5px;   /* 按鈕變圓角 */
}

JavaScript - 房子的水電網(wǎng)絡(luò)

是什么：一門腳本編程語言。

作用：賦予網(wǎng)頁交互和行為。就像房子的電路、水管、智能家居系統(tǒng)。

let count = 0;
const button = document.querySelector('button');
button.addEventListener('click', () => {
  count++;
  console.log(`按鈕被點(diǎn)擊了 ${count} 次`);
  // 可以動(dòng)態(tài)修改HTML內(nèi)容或CSS樣式
});

簡單比喻：

HTML 是人的骨骼 - 決定了長什么樣
CSS 是人的皮肉/衣服 - 決定了好看不好看
JavaScript 是人的大腦和神經(jīng) - 決定了能不能動(dòng)、怎么反應(yīng)

Vue 是什么？它在這三者之上扮演什么角色？

Vue - 智能的施工隊(duì)長/自動(dòng)化管理系統(tǒng)

是什么：一套基于 JavaScript 構(gòu)建的漸進(jìn)式框架。

作用：讓你更高效、更有條理地指揮 HTML、CSS、JavaScript 協(xié)同工作。

它主要做了三件事：

聲明式渲染：告訴 Vue “這里要顯示什么”，它會(huì)自動(dòng)操作DOM

<!-- 不用Vue：手動(dòng)找元素、改內(nèi)容 -->
<div id="message"></div>
<script>
  document.getElementById('message').innerText = 'Hello';
</script>

<!-- 用Vue：告訴Vue這里要顯示什么 -->
<div id="app">
  <p>{{ message }}</p>  <!-- 聲明：這個(gè)位置顯示message -->
</div>
<script>
  const app = Vue.createApp({
    data() {
      return { message: 'Hello' }  // 數(shù)據(jù)變了，視圖自動(dòng)變
    }
  }).mount('#app');
</script>

組件化開發(fā)：把HTML、CSS、JS打包成可復(fù)用的積木

<!-- Button.vue - 一個(gè)完整的按鈕組件 -->
<template>
  <button class="my-btn" @click="handleClick">
    {{ text }}  <!-- 顯示動(dòng)態(tài)文字 -->
  </button>
</template>

<script>
export default {
  props: ['text'],  // 從外部接收數(shù)據(jù)
  methods: {
    handleClick() {
      alert('按鈕被點(diǎn)了！');
    }
  }
}
</script>

<style scoped>
.my-btn {
  background: blue;  /* 樣式也打包在一起 */
  color: white;
}
</style>

響應(yīng)式系統(tǒng)：數(shù)據(jù)變了，所有用到這個(gè)數(shù)據(jù)的地方自動(dòng)更新

Vue、JavaScript、CSS和HTML通過兩種截然不同的方式協(xié)作，形成網(wǎng)頁的多個(gè)頁面：一種是體驗(yàn)流暢但結(jié)構(gòu)相對復(fù)雜的單頁應(yīng)用（SPA），另一種是結(jié)構(gòu)直觀、對搜索引擎更友好的多頁應(yīng)用（MPA）。你可以把它們想象成一本精裝書和一個(gè)文件柜。

下面我們來詳細(xì)看看它們各自是如何協(xié)作的，以及各自的優(yōu)缺點(diǎn)。

方式一：單頁應(yīng)用（SPA）- 像一本精裝書

這是Vue.js最主流的打開方式。整個(gè)應(yīng)用就像一個(gè)只有一張“紙”（一個(gè)HTML文件）的精裝書，但通過目錄（Vue Router）來動(dòng)態(tài)展示不同的內(nèi)容章節(jié)。

一個(gè)“殼”文件 (HTML)
Vue項(xiàng)目在最初，只會(huì)有一個(gè)index.html文件。它基本上就是一個(gè)空殼子，最重要的部分是一個(gè)<div id="app"></div>這樣的掛載點(diǎn)，以及一個(gè)鏈接到主要JavaScript文件的<script>標(biāo)簽。

?? <div id="app"></div> 里一般包含什么？

這是一個(gè)掛載點(diǎn)，是Vue接管頁面的入口。在初始的HTML文件里，它通常是空的：

<!DOCTYPE html>
<html>
<head>
  <title>我的Vue應(yīng)用</title>
  <!-- 這里可能有一些全局CSS鏈接 -->
</head>
<body>
  <!-- 這是一個(gè)空的掛載點(diǎn) -->
  <div id="app"></div>
  
  <!-- 這里會(huì)引入JavaScript文件 -->
  <script src="/js/app.js"></script>
</body>
</html>

在運(yùn)行時(shí)，Vue會(huì)把整個(gè)應(yīng)用的根組件渲染到這個(gè)div里。這個(gè)根組件會(huì)包含：

網(wǎng)站的公共布局（頭部導(dǎo)航、側(cè)邊欄、底部版權(quán)）
路由出口 <router-view>（顯示當(dāng)前頁面的內(nèi)容）
全局的UI組件（彈窗、加載提示等）

所以最終渲染后，它可能變成：

<div id="app">
  <div class="layout">
    <header>網(wǎng)站導(dǎo)航欄...</header>
    <main>
      <!-- 當(dāng)前頁面的具體內(nèi)容 -->
      <h1>首頁</h1>
      <p>歡迎來到我的網(wǎng)站</p>
    </main>
    <footer>版權(quán)信息...</footer>
  </div>
</div>

?? 主要JavaScript文件里面包含什么？

這個(gè)文件是Vue應(yīng)用的發(fā)動(dòng)機(jī)和總控室（通常是 main.js 或 app.js）：

// 1. 引入必要的依賴
import { createApp } from 'vue'           // Vue核心
import App from './App.vue'               // 根組件
import router from './router'              // 路由配置
import store from './store'                // 狀態(tài)管理（如果是Vuex/Pinia）
import './styles/global.css'               // 全局樣式

// 2. 創(chuàng)建Vue應(yīng)用實(shí)例
const app = createApp(App)

// 3. 安裝插件
app.use(router)      // 啟用路由功能
app.use(store)       // 啟用狀態(tài)管理

// 4. 全局配置
app.config.errorHandler = (err) => {
  console.error('全局錯(cuò)誤捕獲:', err)
}

// 5. 注冊全局組件
import MyButton from './components/MyButton.vue'
app.component('MyButton', MyButton)  // 這樣任何地方都能用<MyButton />

// 6. 掛載到DOM
app.mount('#app')   // 找到<div id="app">，把整個(gè)應(yīng)用放進(jìn)去

總結(jié)一下這個(gè)文件的作用：

?? 啟動(dòng)應(yīng)用：創(chuàng)建Vue實(shí)例
?? 裝配零件：把根組件、路由、狀態(tài)管理等組裝起來
?? 全局設(shè)置：配置錯(cuò)誤處理、注冊全局組件
?? 找到掛載點(diǎn)：把組裝好的應(yīng)用放到HTML頁面上

無數(shù)個(gè)“積木” (Vue組件)
你用Vue的單文件組件（.vue文件）來搭建頁面。每個(gè)組件內(nèi)部，都用自己的 HTML模板 定義結(jié)構(gòu)、JavaScript 代碼定義行為和 CSS 樣式來定義外觀。這就好比你把不同章節(jié)的內(nèi)容做成了一個(gè)個(gè)獨(dú)立的積木塊。
一個(gè)智能的“翻書人” (Vue Router)
Vue Router是Vue官方的路由管理器。它會(huì)監(jiān)聽瀏覽器URL的變化，并根據(jù)你提前配置好的路由規(guī)則（比如 / 對應(yīng)首頁，/about 對應(yīng)關(guān)于頁面），動(dòng)態(tài)地銷毀當(dāng)前顯示的組件，并創(chuàng)建和渲染新的組件。這一切都在同一個(gè)頁面內(nèi)完成，不會(huì)觸發(fā)瀏覽器的刷新。
```
// router/index.js 路由配置示例
const routes = [
  { path: '/', component: Home },      // 訪問 '/' 時(shí)，展示 Home 組件
  { path: '/about', component: About } // 訪問 '/about' 時(shí)，展示 About 組件
]
```
一個(gè)總裝車間 (JavaScript)
最后，main.js這個(gè)入口文件會(huì)負(fù)責(zé)創(chuàng)建Vue應(yīng)用實(shí)例，安裝上Vue Router，然后把這個(gè)“精裝書”的“封面”（整個(gè)Vue應(yīng)用）掛載到index.html的<div id="app">上。

整個(gè)過程就像這樣：
用戶首次訪問 -> 加載index.html和龐大的app.js -> Vue Router根據(jù)當(dāng)前URL，找到對應(yīng)的“積木”（組件） -> 把這個(gè)組件渲染到頁面的指定區(qū)域。用戶點(diǎn)擊鏈接時(shí)，Vue Router再次重復(fù)最后兩步，實(shí)現(xiàn)頁面內(nèi)容的“無刷新”替換。

方式二：多頁應(yīng)用（MPA）- 像一個(gè)文件柜

在這種模式下，Vue.js更多的是用來增強(qiáng)每個(gè)獨(dú)立頁面的交互性。整個(gè)項(xiàng)目像是一個(gè)文件柜，每個(gè)頁面都是一個(gè)獨(dú)立的文件夾或文件。

多個(gè)獨(dú)立的HTML文件
你的項(xiàng)目里會(huì)有多個(gè).html文件，例如index.html（首頁）、about.html（關(guān)于我們）等。每個(gè)文件都是一個(gè)完整的、獨(dú)立的頁面。

每個(gè)頁面獨(dú)立的Vue實(shí)例
在每個(gè)HTML文件中，你都可以通過<script>標(biāo)簽引入Vue，并創(chuàng)建一個(gè)新的Vue實(shí)例來控制該頁面上的某個(gè)區(qū)域。

<!-- about.html -->
<body>
  <div id="aboutPage">
    <h1>{{ message }}</h1>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue
    const app = createApp({
      data() {
        return { message: '歡迎來到關(guān)于我們頁面！' }
      }
    })
    app.mount('#aboutPage')
  </script>
</body>

構(gòu)建工具的配合
為了更高效地開發(fā)和打包，通常會(huì)使用Webpack或Vite這樣的構(gòu)建工具。你需要配置多個(gè)“入口”文件，構(gòu)建工具會(huì)為每個(gè)頁面生成一個(gè)獨(dú)立的、包含該頁面所需JavaScript和CSS的文件包。

// vue.config.js 多頁面配置示例
module.exports = {
  pages: {
    index: { // 為首頁配置入口
      entry: 'src/pages/index/main.js',
      template: 'public/index.html',
      filename: 'index.html',
    },
    about: { // 為關(guān)于頁配置入口
      entry: 'src/pages/about/main.js',
      template: 'public/about.html',
      filename: 'about.html',
    }
  }
}

整個(gè)過程就像這樣：
用戶訪問/about路徑 -> 瀏覽器向服務(wù)器請求about.html文件 -> 服務(wù)器返回完整的about.html，瀏覽器加載并渲染。如果about.html里創(chuàng)建了Vue實(shí)例，那這個(gè)實(shí)例就會(huì)接管頁面上#aboutPage區(qū)域內(nèi)的交互。

兩種方式，該如何選擇？

理解了它們的工作原理，選擇起來就清晰多了：

特性	單頁應(yīng)用 (SPA)	多頁應(yīng)用 (MPA)
工作方式	一個(gè)HTML文件 + 路由動(dòng)態(tài)切換組件	多個(gè)獨(dú)立HTML文件，整頁刷新跳轉(zhuǎn)
用戶體驗(yàn)	非常流暢，接近原生應(yīng)用	頁面切換有明顯刷新感
首屏加載	較慢，需加載完整框架和代碼后才渲染	很快，直接返回HTML即可展現(xiàn)
SEO友好度	差，搜索引擎難以抓取動(dòng)態(tài)內(nèi)容	好，每個(gè)頁面都是獨(dú)立完整的HTML
適用場景	后臺(tái)管理系統(tǒng)、交互復(fù)雜的Web App（如在線文檔）	公司官網(wǎng)、新聞門戶、博客等內(nèi)容展示型網(wǎng)站

總結(jié)

到此這篇關(guān)于前端開發(fā)之html，css，JavaScript和vue關(guān)系的文章就介紹到這了,更多相關(guān)html，css，JS和vue關(guān)系內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: