昨日内容回顾
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修饰符
一、编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location, onComplete?, onAbort?)
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
| 声明式 | 编程式 |
|---|---|
<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：
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 属性。
在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。
**注意：**如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
| 声明式 | 编程式 |
|---|---|
<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>
访问网页，效果如下：
二、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-projectsrc outer
查看index.js，在routes里面有一行，它表示组件HelloWorld
component: HelloWorld
查看上面的一行
import HelloWorld from '@/components/HelloWorld'
@表示src目录
@/components/HelloWorld 表示srccomponentsHelloWorld.vue
.vue后缀，可以不用写。
组件统一在目录中components
进入目录my-projectsrccomponents，查看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-projectsrc outer，修改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-projectsrccomponents，新建文件Note.vue
<template>
<div>
<h1>这是我的笔记页面!</h1>
</div>
</template>
<script>
export default {
name: "Note"
}
</script>
<style>
</style>
进入目录my-projectsrc，查看文件main.js，它是app 入口文件
查看这一行
router, 这个是简写，实际的完整代码是 router:router
因为键和值，都是router，所以可以简写为router
它实际对应的就是my-projectsrc outer目录，这个目录下有一个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 outerindex.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%; 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%; 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_scriptVuemy-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_scriptVuemy-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%; 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_scriptVuemy-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%; 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 '{} {} {}'.format(self.name,self.age,max(self.score)) ``` ```javascript var name = "abc"; console.log(name); ```
效果如下：
