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修饰符

View Code

一、编程式的导航

除了使用 <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' }})

View Code

注意：如果提供了 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

View Code

同样的规则也适用于 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>

View Code

访问网页，效果如下：

二、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>

View Code

返回上一级，打开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>

View Code

访问网页，效果如下：

增加我的笔记

首先增加路由，路由统一在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

View Code

注意：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>

View Code

进入目录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>

View Code

注意：要指定路由出口，否则页面无法渲染！

那么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>

View Code

刷新页面，查看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>

View Code

刷新网页，效果同上！

我的笔记面板

点击我的笔记，下面的内容，是一个面板

使用栅格系统，左侧笔记列表为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>

View Code

修改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>

View Code

刷新网页，效果同上！

分离左侧列表

每一个li标签都是组件，在components文件夹下，新建NoteItem.vue文件

<template>
  <div class="list-group-item">
  </div>
</template>

<script>
    export default {
        name: "NoteItem"
    }
</script>

<style scoped>

</style>

View Code

修改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>

View Code

刷新网页，效果如下：

父子传值

从上图可以看到，左边的列表组是空的，需要父子传值。

父就是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>

View Code

修改NoteItem.vue

<template>
  <!--渲染name变量-->
  <div class="list-group-item">{{name}}</div>
</template>

<script>
  export default {
    name: 'NoteItem',
    props: ['name']  // 在子组件声明 我需要被传入的参数
  }
</script>

<style>

</style>

View Code

刷新页面，效果如下：

查看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>

View Code

编辑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>

View Code

刷新网页，效果如下：

双向数据绑定

左边的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>

View Code

刷新网页，效果如下：

Markdown

Markdown 是一个 Web 上使用的文本到HTML的转换工具，可以通过简单、易读易写的文本格式生成结构化的HTML文档。目前 github、Stackoverflow 等网站均支持这种格式。

中文文档链接：

http://www.markdown.cn/

在线编辑器：

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>

View Code

刷新网页，输入几段makedown语法

#我的家在东北

## 扫得寺内

```python
print("python是世界上最好的语言")
```

- [] 呵呵哒
- [x] 萌萌哒

![很萌的卡通小猫](http://www.gaoxiaogif.com/d/file/4dddbd73cb24eaef339623e28784155f.gif)

效果如下：

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/>'
})

View Code

修改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>

View Code

刷新网页，增加一段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);
```

View Code

效果如下：

posted @ 2018-07-27 20:05 肖祥阅读(894) 评论(0) 编辑收藏举报

刷新页面返回顶部

肖祥

python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)

昨日内容回顾

一、编程式的导航

router.push(location, onComplete?, onAbort?)

router.replace(location, onComplete?, onAbort?)

二、vue页面布局

去除默认页面

增加我的笔记

页面切换效果

vue项目流程

for循环导航菜单

使用v-for循环allRoutes

我的笔记面板

左侧列表组件

分离左侧列表

父子传值

右侧笔记编辑区

双向数据绑定

Markdown

marked

highlight.js

安装highlight.js

使用highlight.js

公告

`router.push(location, onComplete?, onAbort?)`

`router.replace(location, onComplete?, onAbort?)`