vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > html引入Vue.js cdn文档单页

html中引入Vue.js的cdn实现简单的文档单页

作者:TANKING

这篇文章主要为大家介绍了html中引入Vue.js的cdn实现简单的文档单页示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

摘要

平时要编写一篇技术文档、开发文档、博客,都有很多的选择。例如Vuepress,showDoc,甚至使用腾讯文档等这一类的文档工具,都可以写。

html引入vue.js

我现在使用html引入vue.js的方式编写一个单页文档网页。

<!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;
    }
    /*导航选中的样式*/
    .selectedItem {
      color: #42B983;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 顶部页头 -->
    <div class="header"></div>
    <div class="container">
      <!-- 导航容器 -->
      <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>
      <!-- 内容容器 -->
      <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组件,在路由切换时展示不同内容的页面
    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 }
    ];
    // 创建Vue Router实例
    const router = new VueRouter({
      routes
    });
    // 创建Vue实例
    new Vue({
      el: '#app',
      router,
      data: {
        menuItems: [
          { id: 'content-1', name: 'Vue 核心基础知识梳理', subItems: [
            { id: 'sub-content-1', name: 'Vue 实例(应用)相关' },
            { id: 'sub-content-2', name: 'Vue 样式相关' },
            { id: 'sub-content-3', name: 'Vue 常见指令' }
          ] },
          { id: 'content-2', name: 'Vue 高级知识梳理', subItems: [
            { id: 'sub-content-666', name: 'Vue 的设计模式' },
            { id: 'sub-content-777', name: 'Vue 生命周期函数' }
          ] }
        ],
        contents: {
          'sub-content-1': '<h1>Vue 实例(应用)相关</h1><p>Vue.createApp() 创建 vue 实例(应用),参数可以决定根组件如何渲染!</p>',
          'sub-content-2': '<h2>Vue 样式相关</h2><p>v-bind:class 的简写形式,为元素绑定动态类名。</p>',
          'sub-content-3': '<h1>Vue 常见指令</h1><p>绑定事件</p><p>① “v-on:”可以简写成@</p><p>② 可以使用“@[变量名]”,绑定动态事件。即,具体绑定哪个事件,由“变量名”决定</p><p>③ 事件处理函数中,可以使用事件对象 event</p><p>④ 事件处理函数中,如果想传递多个参数,可以使用$event 指代事件对象</p>',
          'sub-content-666': '<h1>mvvm设计模式</h1><p>m 代表 model,指代数据</p><p>v 代表 view,指代视图</p><p>vm 代表 viewModel,指代视图数据连接层</p>',
          'sub-content-777': '<h1>Vue 生命周期函数</h1><p>beforeCreate(){}:在实例生成之前,会自动执行该函数</p><p>beforeCreate(){}:在实例生成之前,会自动执行该函数</p><p>created(){}:在实例生成之后,会自动执行该函数</p><p>beforeMount(){}:在组件内容被渲染到页面之前,会自动执行该函数</p><p>mounted(){}:组件内容被渲染到页面后,会自动执行该函数</p><p>beforeUpdate(){}:当 data 中的数据发生变化时会自动执行该函数</p><p>updated(){}:当 data 中的数据发生变化,同时页面完成更新后,会自动执行的函数</p><p>bbeforeUnmount(){} :当 <code>Vue</code> 应用失效时,会自动执行该函数</p><p>unmounted(){}:当 Vue 应用失效后,同时 dom 完全销毁之后,自动执行的函数</p>'
        },
        selectedMenuItemId: null,
        selectedSubMenuItemId: null,
      },
      methods: {
        changeRoute(contentId) {
          if (this.$route.params.contentId !== contentId) {
            this.$router.push('/' + contentId);
            this.selectedSubMenuItemId = contentId; // 设置当前选择的二级导航
            this.selectedMenuItemId = null; // 清空所选的一级导航
          }
        },
        handleMenuItemClick(menuItem) {
          if (menuItem.subItems) {
            menuItem.isExpanded = !menuItem.isExpanded;
            this.selectedMenuItemId = null; // 清空所选的一级导航
          } else {
            this.changeRoute(menuItem.id);
            this.selectedMenuItemId = menuItem.id;  // 设置当前选择的一级导航
          }
        },
      }
    });
  </script>
</body>
</html>

同样的,这个单页文档也是一个半成品,你需要引入vue.js的cdn、vue-router.min.js的cdn、以及axios.min.js的cdn,我这里是直接下载到本地了,因为比较快。

获取数据并输出json来渲染文档

通过Json来配置左侧的导航和右侧的内容

这里还没有做请求接口获取数据,后期可以增加一个接口请求,获取数据并输出json来渲染文档。

以上代码是本地版,如需包含编辑器,数据库后端等的可以咨询我。

demo http://demo.likeyunba.com/vue-doc-spa/#/

同样的,这就是一个Vue应用,只不过没有通过工程化构建工具去做,而是引入cdn来使用Vue,也有自定义组件、路由管理、transition过渡动画等相关的配置。

以上就是html中引入Vue.js的cdn实现简单的文档单页的详细内容,更多关于html引入Vue.js cdn文档单页的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文