html中引入Vue.js的cdn實(shí)現(xiàn)簡(jiǎn)單的文檔單頁
更新時(shí)間：2023年08月06日 15:57:12 作者：TANKING
這篇文章主要為大家介紹了html中引入Vue.js的cdn實(shí)現(xiàn)簡(jiǎn)單的文檔單頁示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
摘要
平時(shí)要編寫一篇技術(shù)文檔、開發(fā)文檔、博客，都有很多的選擇。例如Vuepress，showDoc，甚至使用騰訊文檔等這一類的文檔工具，都可以寫。
html引入vue.js
我現(xiàn)在使用html引入vue.js的方式編寫一個(gè)單頁文檔網(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;
}
/* 滑動(dòng)效果 */
.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">
<!-- 過渡動(dòng)畫 -->
<transition name="slide-fade" mode="out-in">
<router-view :contents="contents" :key="$route.fullPath"></router-view>
</transition>
</div>
</div>
</div>
<script>
// 注冊(cè)全局的組件
Vue.component('content-component', {
props: ['content'],
template: '<div v-html="content"></div>'
});
// 自定義Vue組件，在路由切換時(shí)展示不同內(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實(shí)例
const router = new VueRouter({
routes
});
// 創(chuàng)建Vue實(shí)例
new Vue({
el: '#app',
router,
data: {
menuItems: [
{ id: 'content-1', name: 'Vue 核心基礎(chǔ)知識(shí)梳理', subItems: [
{ id: 'sub-content-1', name: 'Vue 實(shí)例（應(yīng)用）相關(guān)' },
{ id: 'sub-content-2', name: 'Vue 樣式相關(guān)' },
{ id: 'sub-content-3', name: 'Vue 常見指令' }
] },
{ id: 'content-2', name: 'Vue 高級(jí)知識(shí)梳理', subItems: [
{ id: 'sub-content-666', name: 'Vue 的設(shè)計(jì)模式' },
{ id: 'sub-content-777', name: 'Vue 生命周期函數(shù)' }
] }
],
contents: {
'sub-content-1': '<h1>Vue 實(shí)例（應(yīng)用）相關(guān)</h1><p>Vue.createApp() 創(chuàng)建 vue 實(shí)例（應(yīng)用），參數(shù)可以決定根組件如何渲染！</p>',
'sub-content-2': '<h2>Vue 樣式相關(guān)</h2><p>v-bind:class 的簡(jiǎn)寫形式，為元素綁定動(dòng)態(tài)類名。</p>',
'sub-content-3': '<h1>Vue 常見指令</h1><p>綁定事件</p><p>① “v-on:”可以簡(jiǎn)寫成@</p><p>② 可以使用“@[變量名]”，綁定動(dòng)態(tài)事件。即，具體綁定哪個(gè)事件，由“變量名”決定</p><p>③ 事件處理函數(shù)中，可以使用事件對(duì)象 event</p><p>④ 事件處理函數(shù)中，如果想傳遞多個(gè)參數(shù)，可以使用$event 指代事件對(duì)象</p>',
'sub-content-666': '<h1>mvvm設(shè)計(jì)模式</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(){}：在實(shí)例生成之前，會(huì)自動(dòng)執(zhí)行該函數(shù)</p><p>beforeCreate(){}：在實(shí)例生成之前，會(huì)自動(dòng)執(zhí)行該函數(shù)</p><p>created(){}：在實(shí)例生成之后，會(huì)自動(dòng)執(zhí)行該函數(shù)</p><p>beforeMount(){}：在組件內(nèi)容被渲染到頁面之前，會(huì)自動(dòng)執(zhí)行該函數(shù)</p><p>mounted(){}：組件內(nèi)容被渲染到頁面后，會(huì)自動(dòng)執(zhí)行該函數(shù)</p><p>beforeUpdate(){}：當(dāng) data 中的數(shù)據(jù)發(fā)生變化時(shí)會(huì)自動(dòng)執(zhí)行該函數(shù)</p><p>updated(){}：當(dāng) data 中的數(shù)據(jù)發(fā)生變化，同時(shí)頁面完成更新后，會(huì)自動(dòng)執(zhí)行的函數(shù)</p><p>bbeforeUnmount(){} ：當(dāng) <code>Vue</code> 應(yīng)用失效時(shí)，會(huì)自動(dòng)執(zhí)行該函數(shù)</p><p>unmounted(){}：當(dāng) Vue 應(yīng)用失效后，同時(shí) dom 完全銷毀之后，自動(dòng)執(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āng)前選擇的二級(jí)導(dǎo)航
this.selectedMenuItemId = null; // 清空所選的一級(jí)導(dǎo)航
}
},
handleMenuItemClick(menuItem) {
if (menuItem.subItems) {
menuItem.isExpanded = !menuItem.isExpanded;
this.selectedMenuItemId = null; // 清空所選的一級(jí)導(dǎo)航
} else {
this.changeRoute(menuItem.id);
this.selectedMenuItemId = menuItem.id; // 設(shè)置當(dāng)前選擇的一級(jí)導(dǎo)航
}
},
}
});
</script>
</body>
</html>同樣的，這個(gè)單頁文檔也是一個(gè)半成品，你需要引入vue.js的cdn、vue-router.min.js的cdn、以及axios.min.js的cdn，我這里是直接下載到本地了，因?yàn)楸容^快。
獲取數(shù)據(jù)并輸出json來渲染文檔
通過Json來配置左側(cè)的導(dǎo)航和右側(cè)的內(nèi)容
這里還沒有做請(qǐng)求接口獲取數(shù)據(jù)，后期可以增加一個(gè)接口請(qǐng)求，獲取數(shù)據(jù)并輸出json來渲染文檔。
以上代碼是本地版，如需包含編輯器，數(shù)據(jù)庫后端等的可以咨詢我。
demo http://demo.likeyunba.com/vue-doc-spa/#/
同樣的，這就是一個(gè)Vue應(yīng)用，只不過沒有通過工程化構(gòu)建工具去做，而是引入cdn來使用Vue，也有自定義組件、路由管理、transition過渡動(dòng)畫等相關(guān)的配置。
以上就是html中引入Vue.js的cdn實(shí)現(xiàn)簡(jiǎn)單的文檔單頁的詳細(xì)內(nèi)容，更多關(guān)于html引入Vue.js cdn文檔單頁的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue.js實(shí)現(xiàn)下載時(shí)暫?；謴?fù)下載
本文主要介紹了Vue.js實(shí)現(xiàn)下載時(shí)暫停恢復(fù)下載,通過使用XMLHttpRequest對(duì)象來控制下載過程,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
本文主要介紹了element table多層嵌套顯示的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vues實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示，uniapp代碼提示，代碼自動(dòng)格式化問題，對(duì)vscode 開發(fā)uniapp的相關(guān)知識(shí)感興趣的朋友一起看看吧2021-08-08
vue中使用極驗(yàn)驗(yàn)證碼的方法（附demo）
這篇文章主要介紹了vue中使用極驗(yàn)驗(yàn)證碼的方法（附demo）本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue二選一tab欄切換新做法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了Vue?Cli中的環(huán)境變量和模式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了如何利用vue3實(shí)現(xiàn)6位的密碼輸入框效果,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實(shí)現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04