html中引入Vue.js的cdn實現(xiàn)簡單的文檔單頁

更新時間：2023年08月06日 15:57:12 作者：TANKING

這篇文章主要為大家介紹了html中引入Vue.js的cdn實現(xiàn)簡單的文檔單頁示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

摘要

平時要編寫一篇技術(shù)文檔、開發(fā)文檔、博客，都有很多的選擇。例如Vuepress，showDoc，甚至使用騰訊文檔等這一類的文檔工具，都可以寫。

html引入vue.js

我現(xiàn)在使用html引入vue.js的方式編寫一個單頁文檔網(wǎng)頁。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>單頁文檔</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="vue.js"></script>
  <script src="vue-router.min.js"></script>
  <style>
    *{
      padding: 0;
      margin: 0;
      font-family: font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #fff;
    }
    .header{
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #eee;
      margin: 0 auto;
      background: #fff;
      position: fixed;
      top: 0;
    }
    .container {
      width: 70%;
      margin: 100px auto 0;
      display: flex;
    }
    .sidebar {
      width: 250px;
      flex: 1;
      border-right: 1px solid #eee;
      position: fixed;
      height: 100%;
      overflow-y: auto;
    }
    .menu-item {
      cursor: pointer;
      padding: 12px 20px;
      font-size: 17px;
    }
    .sub-menu-item {
      cursor: pointer;
      padding: 5px 0 5px 40px;
      font-size: 15px;
    }
    .content {
      flex: 2;
      padding: 30px;
      margin-left: 300px;
      background: #F6F8FA;
    }
    .content h1 {
        font-size: 2.5rem;
        font-weight: 500;
        margin: 0 0 12px 0;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 10px;
    }
    .content h2 {
        font-size: 1.5rem;
        font-weight: 500;
        margin: 0 0 12px 0;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 10px;
    }
    .content h3 {
        font-size: 1.17rem;
        font-weight: 500;
        margin: 0 0 12px 0;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 10px;
    }
    .content h4 {
        font-size: 1.33rem;
        font-weight: 500;
        margin: 0 0 12px 0;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 10px;
    }
    .content h5 {
        font-size: 0.83rem;
        font-weight: 500;
        margin: 0 0 12px 0;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 10px;
    }
    .content p{
      font-size: 1rem;
      color: #2C3E50;
      line-height: 27px;
    }
    .content code{
      color: #476582;
      padding: 0.25rem 0.5rem;
      margin: 0;
      font-size: 0.9em;
      background-color: rgba(27,31,35,.05);
      border-radius: 3px;
    }
    /* 滑動效果 */
    .slide-fade-enter-active {
      transition: all 0.3s ease;
    }
    .slide-fade-leave-active {
      transition: all 0.3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to {
      transform: translateX(10px);
      opacity: 0;
    }
    /* 漸變淡入淡出 */
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
    /*導(dǎo)航選中的樣式*/
    .selectedItem {
      color: #42B983;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 頂部頁頭 -->
    <div class="header"></div>
    <div class="container">
      <!-- 導(dǎo)航容器 -->
      <div class="sidebar">
        <ul>
          <li v-for="item in menuItems" :key="item.id">
            <div class="menu-item" @click="handleMenuItemClick(item)" :class="{ 'selectedItem': selectedMenuItemId === item.id }">
              {{ item.name }}
            </div>
            <ul v-if="item.subItems">
              <li class="sub-menu-item" v-for="subItem in item.subItems" :key="subItem.id" @click="changeRoute(subItem.id)" :class="{ 'selectedItem': selectedSubMenuItemId === subItem.id }">
                {{ subItem.name }}
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- 內(nèi)容容器 -->
      <div class="content">
        <!-- 過渡動畫 -->
        <transition name="slide-fade" mode="out-in">
          <router-view :contents="contents" :key="$route.fullPath"></router-view>
        </transition>
      </div>
    </div>
  </div>
  <script>
    // 注冊全局的組件
    Vue.component('content-component', {
      props: ['content'],
      template: '<div v-html="content"></div>'
    });
    // 自定義Vue組件，在路由切換時展示不同內(nèi)容的頁面
    const ContentPage = {
      props: ['contents'],
      template: '<content-component :content="contents[selectedContent]"></content-component>',
      computed: {
        selectedContent() {
          return this.$route.params.contentId;
        }
      }
    };
    // 定義Vue Router的路由配置
    const routes = [
      { path: '/', component: { template: '<div>Welcome to the app</div>' } },
      { path: '/:contentId', component: ContentPage, props: true }
    ];
    // 創(chuàng)建Vue Router實例
    const router = new VueRouter({
      routes
    });
    // 創(chuàng)建Vue實例
    new Vue({
      el: '#app',
      router,
      data: {
        menuItems: [
          { id: 'content-1', name: 'Vue 核心基礎(chǔ)知識梳理', subItems: [
            { id: 'sub-content-1', name: 'Vue 實例（應(yīng)用）相關(guān)' },
            { id: 'sub-content-2', name: 'Vue 樣式相關(guān)' },
            { id: 'sub-content-3', name: 'Vue 常見指令' }
          ] },
          { id: 'content-2', name: 'Vue 高級知識梳理', subItems: [
            { id: 'sub-content-666', name: 'Vue 的設(shè)計模式' },
            { id: 'sub-content-777', name: 'Vue 生命周期函數(shù)' }
          ] }
        ],
        contents: {
          'sub-content-1': '<h1>Vue 實例（應(yīng)用）相關(guān)</h1><p>Vue.createApp() 創(chuàng)建 vue 實例（應(yīng)用），參數(shù)可以決定根組件如何渲染！</p>',
          'sub-content-2': '<h2>Vue 樣式相關(guān)</h2><p>v-bind:class 的簡寫形式，為元素綁定動態(tài)類名。</p>',
          'sub-content-3': '<h1>Vue 常見指令</h1><p>綁定事件</p><p>① “v-on:”可以簡寫成@</p><p>② 可以使用“@[變量名]”，綁定動態(tài)事件。即，具體綁定哪個事件，由“變量名”決定</p><p>③ 事件處理函數(shù)中，可以使用事件對象 event</p><p>④ 事件處理函數(shù)中，如果想傳遞多個參數(shù)，可以使用$event 指代事件對象</p>',
          'sub-content-666': '<h1>mvvm設(shè)計模式</h1><p>m 代表 model，指代數(shù)據(jù)</p><p>v 代表 view，指代視圖</p><p>vm 代表 viewModel，指代視圖數(shù)據(jù)連接層</p>',
          'sub-content-777': '<h1>Vue 生命周期函數(shù)</h1><p>beforeCreate(){}：在實例生成之前，會自動執(zhí)行該函數(shù)</p><p>beforeCreate(){}：在實例生成之前，會自動執(zhí)行該函數(shù)</p><p>created(){}：在實例生成之后，會自動執(zhí)行該函數(shù)</p><p>beforeMount(){}：在組件內(nèi)容被渲染到頁面之前，會自動執(zhí)行該函數(shù)</p><p>mounted(){}：組件內(nèi)容被渲染到頁面后，會自動執(zhí)行該函數(shù)</p><p>beforeUpdate(){}：當 data 中的數(shù)據(jù)發(fā)生變化時會自動執(zhí)行該函數(shù)</p><p>updated(){}：當 data 中的數(shù)據(jù)發(fā)生變化，同時頁面完成更新后，會自動執(zhí)行的函數(shù)</p><p>bbeforeUnmount(){} ：當 <code>Vue</code> 應(yīng)用失效時，會自動執(zhí)行該函數(shù)</p><p>unmounted(){}：當 Vue 應(yīng)用失效后，同時 dom 完全銷毀之后，自動執(zhí)行的函數(shù)</p>'
        },
        selectedMenuItemId: null,
        selectedSubMenuItemId: null,
      },
      methods: {
        changeRoute(contentId) {
          if (this.$route.params.contentId !== contentId) {
            this.$router.push('/' + contentId);
            this.selectedSubMenuItemId = contentId; // 設(shè)置當前選擇的二級導(dǎo)航
            this.selectedMenuItemId = null; // 清空所選的一級導(dǎo)航
          }
        },
        handleMenuItemClick(menuItem) {
          if (menuItem.subItems) {
            menuItem.isExpanded = !menuItem.isExpanded;
            this.selectedMenuItemId = null; // 清空所選的一級導(dǎo)航
          } else {
            this.changeRoute(menuItem.id);
            this.selectedMenuItemId = menuItem.id;  // 設(shè)置當前選擇的一級導(dǎo)航
          }
        },
      }
    });
  </script>
</body>
</html>

同樣的，這個單頁文檔也是一個半成品，你需要引入vue.js的cdn、vue-router.min.js的cdn、以及axios.min.js的cdn，我這里是直接下載到本地了，因為比較快。