python 全棧開發，Day92(編程式的導航,vue頁面佈局,marked包的使用)
昨日內容回顧
1. 組件間的傳值 1. bus --> 空Vue對象 經過向bus對象拋出自定義事件的方式在組件間傳遞信息 2. 注意事項： 1. bus.$on()應該在組件mounted（掛載在頁面上）的時候就執行 2. this對象 2. Vue實例的生命週期鉤子函數（8個） 1. beforeCreate data屬性光聲明沒有賦值的時候 2. created data屬性完成了賦值 3. beforeMount 頁面上的{{name}}尚未被渲染成真正的數據 4. mounted 頁面上的{{name}}被渲染成真正的數據 5. beforeUpdate 數據（data屬性）更新以前會執行的函數 6. updated 數據（data屬性）更新完會執行的函數 7. beforeDestroy 實例被銷燬以前會執行的函數 8. destroyed 實例被銷燬後會執行的函數 3. VueRouter 在前端作路由的 1. 基本使用 1. 先寫路由 2. 生成路由實例 3. 將路由實例掛載到Vue對象上 4. <router-link></router-link> <router-view></router-view> <==> <router-view/> 2. 路由的模糊匹配 1. path: '/user/:name' ---> $route.params.name 2. /user/alex?age=9000 ---> $route.query.age 3. 子路由 children 4. 編程式導航 用JS代碼去控制頁面跳轉 this.$router.push(...) 4. Vue-CLI 一個腳手架工具，幫助咱們快速的搭建Vue項目 1. 查看本機安裝的vueCLI的版本 vue -V ---> 2.9.6 2. 使用Vue CLI建立Vue項目 vue init webpack mysite 5. 組件中捕獲原生事件 .native修飾符
1、編程式的導航
除了使用 <router-link> 建立 a 標籤來定義導航連接，咱們還能夠藉助 router 的實例方法，經過編寫代碼來實現。javascript
router.push(location, onComplete?, onAbort?)
注意：在 Vue 實例內部，你能夠經過 $router 訪問路由實例。所以你能夠調用 this.$router.push。php
想要導航到不一樣的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，因此，當用戶點擊瀏覽器後退按鈕時，則回到以前的 URL。css
當你點擊 <router-link> 時，這個方法會在內部調用，因此說，點擊 <router-link :to="..."> 等同於調用 router.push(...)。html
| 聲明式 | 編程式 |
|---|---|
<router-link :to="..."> |
router.push(...) |
該方法的參數能夠是一個字符串路徑，或者一個描述地址的對象。例如：前端
// 字符串 router.push('home') // 對象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 帶查詢參數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
注意：若是提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種狀況。取而代之的是下面例子的作法，你須要提供路由的 name 或手寫完整的帶有參數的 path：vue
const userId = 123 router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 這裏的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user
一樣的規則也適用於 router-link 組件的 to 屬性。java
在 2.2.0+，可選的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回調做爲第二個和第三個參數。這些回調將會在導航成功完成 (在全部的異步鉤子被解析以後) 或終止 (導航到相同的路由、或在當前導航完成以前導航到另外一個不一樣的路由) 的時候進行相應的調用。python
**注意：**若是目的地和當前路由相同，只有參數發生了改變 (好比從一個用戶資料到另外一個 /users/1 -> /users/2)，你須要使用 beforeRouteUpdate 來響應這個變化 (好比抓取用戶信息)。webpack
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，惟一的不一樣就是，它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄。git
| 聲明式 | 編程式 |
|---|---|
<router-link :to="..." replace> |
router.replace(...) |
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:red; } </style> </head> <body> <div id="app"> <!--編程時導航--> <button @click="goHome">去首頁</button> <button @click="goList">去列表</button> <router-view></router-view> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> let home={ template:'<div>home</div>' }; let list={ template:'<div>list</div>' } const routes=[ {path:'/home',component:home}, {path:'/list',component:list} ] let router=new VueRouter({ routes:routes, linkActiveClass:'active' }); //默認加載第一個路徑 router.push("/home"); let vm=new Vue({ el:"#app", methods:{ //編程式導航 goHome(){ //頁面跳轉，push是增長到歷史管理 this.$router.history.push('/home') //go表示前進後退 //this.$router.history.go(-1) }, goList(){ this.$router.history.push('/list') //將當前歷史管理替換成list //this.$router.history.replace('/list') } }, // 會在實例中提供兩個屬性this.$route(屬性)，this.$router(方法); router:router, }) </script> </html>
訪問網頁，效果以下：
2、vue頁面佈局
咱們要完成這個效果
使用如下命令，建立一個vue項目，具體執行過程，請參考上一篇文章
$ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install bootstrap@3.3.7 -D $ npm run dev
去除默認頁面
進入目錄my-project\src\router
查看index.js，在routes裏面有一行，它表示組件HelloWorld
component: HelloWorld
查看上面的一行
import HelloWorld from '@/components/HelloWorld'
@表示src目錄
@/components/HelloWorld 表示src\components\HelloWorld.vue
.vue後綴，能夠不用寫。
組件統一在目錄中components
進入目錄my-project\src\components，查看HelloWorld.vue
在<template></template> 之間的代碼，就是默認首頁，圖片下面的一堆a標籤。
修改<template></template> 之間的代碼。HelloWorld.vue部分代碼以下：
<template> <div class="hello"> <h1>這是首頁！！！</h1> </div> </template>
返回上一級，打開App.vue文件，查看<template></template> 之間的代碼
下面一行，表示一個圖片。assets目錄，能夠放一些資源，好比圖片之類的
<img src="./assets/logo.png">
再看下面一行
<router-view/>
它的完整代碼是<router-view><router-view/>。<router-view/>是一個簡寫，它會自動閉合！
初學者，建議使用完整寫法！
刪除這2行代碼，增長一個bootstrap的導航條
修改App.vue裏面<template></template> 之間的代碼，增長一個nav標籤
修改App.vue裏面<script></script> 之間的代碼，導入bootstrap
修改App.vue裏面<style><style> 之間的代碼，去掉全部樣式
App.vue完整代碼以下：
<template> <div id="app"> <!--導航條--> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">個人首頁</a></li> <li><a href="#">個人筆記</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登陸</a></li> <li class="dropdown"> <li><a href="#">註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> </template> <script> //導入bootstrap import 'bootstrap/dist/css/bootstrap.min.css' export default { name: 'App' } </script> <style> </style>
訪問網頁，效果以下：
增長個人筆記
首先增長路由，路由統一在router目錄
進入目錄my-project\src\router，修改index.js，增長路由/note
爲了方便路由擴展，定義常量routeArray，它是一個路由數組
修改默認的導入路由方式
頭部使用import導入Note.vue
index.js完整代碼以下：
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Note from '@/components/Note.vue' //導入個人筆記組件 Vue.use(Router) // 生成路由數組 var routeArray = [ { path: '/', name: '個人首頁', component: HelloWorld }, { path: '/note', name: '個人筆記', component: Note } ] // 生成路由實例 var routerObj = new Router({ mode: 'history', routes: routeArray }) //導入默認路由實例 export default routerObj
注意：component:Note 這裏面的Note，對應就是Note.vue文件
進入目錄my-project\src\components，新建文件Note.vue
<template>
<div>
<h1>這是個人筆記頁面!</h1>
</div>
</template>
<script>
export default {
name: "Note"
}
</script>
<style>
</style>
進入目錄my-project\src，查看文件main.js，它是app 入口文件
查看這一行
router, 這個是簡寫，實際的完整代碼是 router:router
由於鍵和值，都是router，因此能夠簡寫爲router
它實際對應的就是my-project\src\router目錄，這個目錄下有一個index.js，它會自動去加載它！
頁面切換效果
在App.vue中的<template></template> 之間的代碼，是網頁導航部分。這裏面的個人首頁和個人筆記的a標籤的herf屬性是#，須要修改一下
因爲咱們使用的是Vue Router，它將組件 (components) 映射到路由 (routes)，而後告訴 Vue Router 在哪裏渲染它們。
因此a標籤，必須替換爲router-link。必須指定，App.vue完整代碼以下：
<template> <div id="app"> <!--導航條--> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <router-link to="/">個人首頁</router-link> </li> <li> <router-link to="/note">個人筆記</router-link> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登陸</a></li> <li class="dropdown"> <li><a href="#">註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--路由出口--> <router-view></router-view> </div> </template> <script> //導入bootstrap import 'bootstrap/dist/css/bootstrap.min.css' export default { name: 'App' } </script> <style> </style>
注意：要指定路由出口，不然頁面沒法渲染！
那麼Vue Router如何渲染網頁導航的呢？
main.js，它是app入口文件，在Vue對象中，指定router就是src/router目錄，默認會加載裏面的index.js
index.js裏面定義了2個path，/和/note，分別對應組件HelloWorld.vue和Note.vue
這2個組件，定義了<template></template>標籤，標籤之間的代碼，就是頁面渲染的部分
訪問頁面，效果以下：
爲何首頁的url，後面沒有內容呢？而個人筆記，url後面有一個note
由於首頁的path，就是 / ，它和直接IP+端口訪問，效果是同樣的！
查看src\router\index.js文件
// 生成路由實例 var routerObj = new Router({ mode: 'history', routes: routeArray })
從咱們學習vue的前5天，生成路由實例時，從未指定mode參數。它默認爲hash，訪問頁面會發現，url後面，會帶一個#號，發覺沒有？
指定mode爲history，就不會有#號了！
vue項目流程
到這裏，先來梳理一下，Vue項目的流程。在開發過程當中，通常咱們只修改src目錄下的文件。
路由流程以下：
解釋：
1. main.js是app入口文件，它裏面定義的router，實際就是router目錄
2. router目錄下有一個index.js文件，它會默認加載。就好像使用Apache或者Nginx，指定默認首頁爲index.html同樣
3. index.js定義了路由數組，指定一些組件。組件統一存放在components目錄，後綴爲.vue的文件，就是一個組件！
再來看一下
頁面渲染流程：
解釋：
1. 在main.js中，定義了組件爲{ App }，它實際對應的就是App.vue
2. 在App.vue中，定義了<template></template>標籤，它是存放html代碼的。
通常使用vue，會先綁定一個<div id="app">，這個是約定俗成的！通俗的來說，就是劃分了一塊田。
那麼以後的全部操做，都是基於這個div來操做的！
必須指定路由出口，也就是<router-view></router-view>，(</router-view>是簡寫)，它才能被瀏覽器渲染！
3. HelloWorld.vue是默認就有的組件，它裏面也定義了<template></template>，可是並無</router-view>標籤(路由出口)
爲何呢？由於在組件App.vue，它裏面已經定義了路由出口，咱們全部的操做都是基於這個div來操做的！
不信？有圖有真相！
使用瀏覽器工具，查看html代碼
看到一條藍線沒有，它表示一對標籤。看到h1標籤沒有？它是HelloWorld.vue組件纔有的標籤！
h1標籤是在<div id="app"></div>裏面的！
說到這裏，我想你們應該明白了使用webpack模板建立vue項目的整個流程了吧！
for循環導航菜單
查看index.js，routeArray變量是一個數組。它對應的是App.vue中的2個a標籤，這2個a標籤寫死了，咱們能夠改爲for循環，來遍歷數組。方便之後的擴展！
那麼如何獲取當前全部路由呢？
修改App.vue，增長一個計算屬性
<template> <div id="app"> <!--導航條--> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <router-link to="/">個人首頁</router-link> </li> <li> <router-link to="/note">個人筆記</router-link> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登陸</a></li> <li class="dropdown"> <li><a href="#">註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--顯示全部路由--> {{allRoutes}} <!--路由出口--> <router-view></router-view> </div> </template> <script> //導入bootstrap import 'bootstrap/dist/css/bootstrap.min.css' export default { name: 'App', data:function(){ return {} }, //計算屬性 computed:{ allRoutes:function(){ // 從Vue實例裏面取出全部的路由 console.log(this.$router.options.routes) // return this.$router.options.routes } } } </script> <style> </style>
刷新頁面，查看console，出現了2個路由
使用v-for循環allRoutes
修改App.vue，完整代碼以下：
<template> <div id="app"> <!--導航條--> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <!--<li class="active">--> <!--<router-link to="/">個人首頁</router-link>--> <!--</li>--> <!--<li>--> <!--<router-link to="/note">個人筆記</router-link>--> <!--</li>--> <!-- <router-link v-for="(route, index) in allRoutes" : allRoutes是一個計算屬性 v-bind:to="route.path" : 取每一項路由的path v-bind:key=index : for循環vue推薦綁定key，key用來標示for循環的每一項 tag='li' : 告訴router-link渲染的時候 渲染成li標籤 activeClass='active' : 噹噹前的router-link被選中的時候 添加的 class樣式 exact : 指定路由爲嚴格匹配模式，而不是默認的以。。。開頭 > <a>{{route.name}}</a> : 取每個路由的name </router-link> --> <router-link v-for="(route, index) in allRoutes" v-bind:to="route.path" v-bind:key=index tag='li' activeClass='active' exact > <a>{{route.name}}</a> </router-link> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登陸</a></li> <li class="dropdown"> <li><a href="#">註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--路由出口--> <router-view></router-view> </div> </template> <script> //導入bootstrap import 'bootstrap/dist/css/bootstrap.min.css' export default { name: 'App', data:function(){ return {} }, //計算屬性 computed:{ allRoutes:function(){ // 從Vue實例裏面取出全部的路由 // console.log(this.$router.options.routes) return this.$router.options.routes } } } </script> <style> </style>
刷新網頁，效果同上！
個人筆記面板
點擊個人筆記，下面的內容，是一個面板
使用柵格系統，左側筆記列表爲3格，右邊筆記編輯區爲9格
訪問 http://127.0.0.1:8080/note
效果以下：
左側列表組件
左側的列表組，是一個組件
在components文件夾下，新建NoteList.vue文件
將Note.vue中的列表組的html代碼剪切過來
NoteList.vue完整代碼以下：
<template> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </template> <script> export default { name: "NoteList" } </script> <style scoped> </style>
修改Note.vue，導入NoteList組件，Note.vue完整代碼以下：
<template>
<div>
<div class="container">
<div class="row">
<!-- 面板 -->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">個人筆記</h3>
</div>
<div class="panel-body">
<div class="col-md-3">
<!-- 左邊筆記列表 開始 -->
<NoteList></NoteList>
<!-- 左邊筆記列表 結束 -->
</div>
<div class="col-md-9">
<!-- 右邊筆記編輯區 開始 -->
<div class="note-edit">
</div>
<!-- 右邊筆記編輯區 結束 -->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
//導入NoteList
import NoteList from '@/components/NoteList.vue'
export default {
name: "Note",
// 加載這個組建的時候 先要去找 NoteList
components: {
NoteList,
}
}
</script>
<style>
.note-edit {
height: 600px;
border: 1px solid grey;
}
</style>
刷新網頁，效果同上！
分離左側列表
每個li標籤都是組件，在components文件夾下，新建NoteItem.vue文件
<template> <div class="list-group-item"> </div> </template> <script> export default { name: "NoteItem" } </script> <style scoped> </style>
修改NoteList.vue，導入NoteItem.vue。NoteList.vue完整代碼以下：
<template>
<div>
<div class="list-group">
<NoteItem
v-for="(note, index) in NoteList"
v-bind:name='note'
v-bind:key="index"
></NoteItem>
</div>
</div>
</template>
<script>
import NoteItem from '@/components/NoteItem.vue'
export default {
name: 'NoteList',
components: {
NoteItem
},
data:function(){
return {
//聲明數組
NoteList: [
'吃飯',
'睡覺',
'打豆豆'
]
}
}
}
</script>
<style>
</style>
刷新網頁，效果以下：
父子傳值
從上圖能夠看到，左邊的列表組是空的，須要父子傳值。
父就是NoteList，子就是NoteItem
修改NoteList.vue，增長一個數組，使用for循環遍歷
<template>
<div>
<div class="list-group">
<!-- 在子組件聲明 我須要被傳入的參數
v-for="(note, index) in NoteList" : NoteList是一個數組,note是數組每個元素
v-bind:name=note : 子組件聲明,被傳入的參數爲name,值爲note，也就是數組的元素
v-bind:key=index : for循環vue推薦綁定key，key用來標示for循環的每一項
-->
<NoteItem
v-for="(note, index) in NoteList"
v-bind:name='note'
v-bind:key="index"
></NoteItem>
</div>
</div>
</template>
<script>
//導入NoteItem組件
import NoteItem from '@/components/NoteItem.vue'
export default {
name: 'NoteList',
components: {
NoteItem
},
data:function(){
return {
//聲明數組
NoteList: [
'吃飯',
'睡覺',
'打豆豆'
]
}
}
}
</script>
<style>
</style>
修改NoteItem.vue
<template> <!--渲染name變量--> <div class="list-group-item">{{name}}</div> </template> <script> export default { name: 'NoteItem', props: ['name'] // 在子組件聲明 我須要被傳入的參數 } </script> <style> </style>
刷新頁面，效果以下：
查看html代碼，和分離以前的代碼，是一致的！
右側筆記編輯區
右邊區域，根據柵格系統，平均劃分，就能夠了。左邊6格，右邊6格
右邊區域也是一個組件，在components目錄下，建立NoteEdit.vue
<template> <div class="row"> <!-- 左邊的 textarea 區域開始 --> <div class="col-md-6 height600"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">標題</span> <input type="text" class="form-control" placeholder="請輸入標題" aria-describedby="basic-addon1"> </div> <!-- textarea --> <textarea class="my-textarea"></textarea> </div> <!-- 左邊的 textarea 區域結束 --> <!-- 右邊的 展現區 區域開始 --> <div class="col-md-6 height600"> <div> <button class="btn btn-success">添加</button> </div> <div class="right-box my-textarea"> </div> </div> <!-- 右變的 展現 區域結束 --> </div> </template> <script> // import marked from 'marked' export default { name: 'NoteEdit', } </script> <style> .my-textarea { margin-top: 15px; height: 80%; width: 100% } .height600 { height: 600px; } .right-box { border: 1px solid grey } </style>
編輯Note.vue，導入NoteEdit.vue組件，Note.vue完整代碼以下：
<template>
<div>
<div class="container">
<div class="row">
<!-- 面板 -->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">個人筆記</h3>
</div>
<div class="panel-body">
<div class="col-md-3">
<!-- 左邊筆記列表 開始 -->
<NoteList></NoteList>
<!-- 左邊筆記列表 結束 -->
</div>
<div class="col-md-9">
<!-- 右邊筆記編輯區 開始 -->
<div class="note-edit">
<NoteEdit></NoteEdit>
</div>
<!-- 右邊筆記編輯區 結束 -->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
//導入NoteList
import NoteList from '@/components/NoteList.vue'
import NoteEdit from '@/components/NoteEdit.vue'
export default {
name: "Note",
// 加載這個組建的時候 先要去找 NoteList
components: {
NoteList,
NoteEdit
}
}
</script>
<style>
.note-edit {
height: 600px;
/*border: 1px solid grey;*/
}
</style>
刷新網頁，效果以下：
雙向數據綁定
左邊的textarea輸入框的值一旦發現改變，要將數據實時展現在右邊的div中
使用v-model就能夠實現
修改NoteEdit.vue
<template> <div class="row"> <!-- 左邊的 textarea 區域開始 --> <div class="col-md-6 height600"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">標題</span> <input type="text" class="form-control" placeholder="請輸入標題" aria-describedby="basic-addon1"> </div> <!-- textarea --> <textarea class="my-textarea" v-model="content" > </textarea> </div> <!-- 左邊的 textarea 區域結束 --> <!-- 右邊的 展現區 區域開始 --> <div class="col-md-6 height600"> <div> <button class="btn btn-success">添加</button> </div> <div class="right-box my-textarea"> {{content}} </div> </div> <!-- 右變的 展現 區域結束 --> </div> </template> <script> // import marked from 'marked' export default { name: 'NoteEdit', data:function () { return { content:'' } } } </script> <style> .my-textarea { margin-top: 15px; height: 80%; width: 100% } .height600 { height: 600px; } .right-box { border: 1px solid grey } </style>
刷新網頁，效果以下：
Markdown
Markdown 是一個 Web 上使用的文本到HTML的轉換工具，能夠經過簡單、易讀易寫的文本格式生成結構化的HTML文檔。目前 github、Stackoverflow 等網站均支持這種格式。
中文文檔連接：
在線編輯器：
https://www.zybuluo.com/mdeditor
訪問這個網站，
http://tool.oschina.net/markdown
它能將markdown語法，實時轉換爲Html
# 表示h1標籤
```javascript``` 表示javascript代碼
[]() 表示超連接
好比：
marked
marked是npm模塊中，專門用來解析markdown語法的
先中止vue項目，安裝marked
-D表示當前項目安裝
E:\python_script\Vue\my-project>npm install marked -D
出現如下提示，表示安裝成功
+ marked@0.4.0 added 1 package from 1 contributor and audited 8826 packages in 21.209s found 1 moderate severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details
啓動vue項目
E:\python_script\Vue\my-project>npm run dev
修改NoteEdit.vue，導入插件marked
<template> <div class="row"> <!-- 左邊的 textarea 區域開始 --> <div class="col-md-6 height600"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">標題</span> <input type="text" class="form-control" placeholder="請輸入標題" aria-describedby="basic-addon1"> </div> <!-- textarea --> <textarea class="my-textarea" v-model="content" > </textarea> </div> <!-- 左邊的 textarea 區域結束 --> <!-- 右邊的 展現區 區域開始 --> <div class="col-md-6 height600"> <div> <button class="btn btn-success">添加</button> </div> <!--展現原始html使用v-html--> <div class="right-box my-textarea" v-html="markedDownContent" > </div> </div> <!-- 右變的 展現 區域結束 --> </div> </template> <script> //導入marked模塊，用來處理makedown語法 import marked from 'marked' export default { name: 'NoteEdit', data:function () { return { content:'' } }, //增長計算屬性 computed:{ markedDownContent:function(){ return marked(this.content) } } } </script> <style> .my-textarea { margin-top: 15px; height: 80%; width: 100% } .height600 { height: 600px; } .right-box { border: 1px solid grey } </style>
刷新網頁，輸入幾段makedown語法
#個人家在東北 ## 掃得寺內 ```python print("python是世界上最好的語言") ``` - [] 呵呵噠 - [x] 萌萌噠 
效果以下：
markdown是程序員的必備神器，因此有時間的話，多瞭解一下markdown的語法！
由於不少程序員都在用它
highlight.js
highlight.js是一款輕量級的Web代碼語法高亮庫
使用highlight.js高亮你的代碼,不管是java，js仍是php等等語言，都會自動的對關鍵字進行高亮
安裝highlight.js
E:\python_script\Vue\my-project>npm install highlight.js -D
出現如下提示，表示安裝成功
+ highlight.js@9.12.0 added 1 package from 245 contributors and audited 8828 packages in 44.305s found 1 moderate severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details
使用highlight.js
修改main.js，增長一段代碼
//Web代碼語法高亮庫 import hljs from 'highlight.js' import 'highlight.js/styles/monokai.css' //樣式文件 Vue.directive('highlight',function (el) { let blocks = el.querySelectorAll('pre code'); blocks.forEach((block)=>{ hljs.highlightBlock(block) }) })
注意：
Vue.directive要在實例初始化以前，否則會報錯
main.js完整代碼以下：
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false //Web代碼語法高亮庫 import hljs from 'highlight.js' import 'highlight.js/styles/monokai.css' //樣式文件 Vue.directive('highlight',function (el) { let blocks = el.querySelectorAll('pre code'); blocks.forEach((block)=>{ hljs.highlightBlock(block) }) }) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
修改NoteEdit.vue，增長v-highlight便可
<div class="right-box my-textarea" v-html="markedDownContent" v-highlight>
NoteEdit.vue完整代碼以下
<template> <div class="row"> <!-- 左邊的 textarea 區域開始 --> <div class="col-md-6 height600"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">標題</span> <input type="text" class="form-control" placeholder="請輸入標題" aria-describedby="basic-addon1"> </div> <!-- textarea --> <textarea class="my-textarea" v-model="content" > </textarea> </div> <!-- 左邊的 textarea 區域結束 --> <!-- 右邊的 展現區 區域開始 --> <div class="col-md-6 height600"> <div> <button class="btn btn-success">添加</button> </div> <!--展現原始html使用v-html--> <div class="right-box my-textarea" v-html="markedDownContent" v-highlight > </div> </div> <!-- 右變的 展現 區域結束 --> </div> </template> <script> //導入marked模塊，用來處理makedown語法 import marked from 'marked' export default { name: 'NoteEdit', data:function () { return { content:'' } }, //增長計算屬性 computed:{ markedDownContent:function(){ return marked(this.content) } } } </script> <style> .my-textarea { margin-top: 15px; height: 80%; width: 100% } .height600 { height: 600px; } .right-box { border: 1px solid grey } </style>
刷新網頁，增長一段python和javascript代碼
```python class Student(object): def __init__(self, name, age, score): self.name = name self.age = age self.score = score def get_name(self): # 獲取學生的姓名 return self.name def get_age(self): # 獲取學生的年齡 return self.age def get_course(self): # 返回3門科目中最高的分數 return '{}\n{}\n{}'.format(self.name,self.age,max(self.score)) ``` ```javascript var name = "abc"; console.log(name); ```
效果以下：
- 1. python全棧開發day92-day96 Vue總結
- 2. bootstrap導航欄的頁面佈局
- 3. 頁面佈局之--Font Awesome+導航
- 4. vue-router的編程式導航
- 5. 使用jQuery開發iOS風格的頁面導航菜單
- 6. vue 導航切換頁面
- 7. Python全棧開發之併發編程
- 8. Python用戶界面編程PyQt5的四種的佈局方式
- 9. android 開發 簡單的頁面佈局
- 10. 編程式的導航
- 更多相關文章...
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • 常用的分佈式事務解決方案
- • PHP開發工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。