如何实现提交笔记-Markedown

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">markedown编辑器</h3>
                        <input type="text" v-model = 'title' placeholder="请输入笔记标题">
                        &nbsp;&nbsp;&nbsp;
                        <button class='btn btn-success' @click = 'addNote'>提交</button>
                    </div>
                    <div class="panel-body">
                       <div class="marked">
                        <!-- cols="70" rows="25"分别是列和行,控制编辑器的宽度和高度 -->
                         <textarea cols="70" rows="25" v-model = 'msg'></textarea>
                       </div>
                       <div class="show" v-html = 'currentMsg'>
                         <!-- {{msg}} -->
                         <!-- {{currentMsg}} -->
                       </div>
                    </div>
                    
                    
                </div>
            </div>
            <!-- 如何实现提交笔记？（屯一个空数组，将数据传至数组中） -->
                    <!-- 1.data中屯一个空数组，以便将数据传至 -->
                    <!-- 2.v-for遍历数组；设置title及content，即数组是字典即对象 -->
                    <!-- 3.button提交按钮,要实现点击按钮提交数据，因此要添加@click事件addNote-->
                    <!-- 4.标题、内容填写完之后要提交；首先标题：填写完之后要点提交(保存)，
                      即要对input标签使用v-model并在data中设置title空字符串，在函数addNote中
                      console.log(this.title)打印显示标题即表示可以拿到title；
                      内容：获取内容部分即textarea内容，我们要获取currentMsg内容，
                      因为我们要拿到###后边输出的内容，在函数addNote中
                      console.log(this.currentMsg)打印显示标签,但是我们只需要内容，
                      此时item.content是一个标签，对div标签添加v-html对item.content进行解析，
                      然后在渲染标签时只输出内容；-->
                      <!-- 5.创建obj对象，使用this.lists.push(obj); 实现将数据提交至数组中-->
                      <!-- 6.实现点击提交内容之后将内容清空：this.title = ''; this.msg = ''; -->
                      <!-- lists是后端请求数据库得到的，即在添加数据就是用ajax请求添加 -->
                    <div class="lists">
                      <ul>
                        <li v-for = '(item,index) in lists'>
                          <h3>{{item.title}}</h3>
                          <div v-html = 'item.content'></div>
                       </li>
                        
                      </ul>
                    </div>
        </div>
    </div>
</template>
<script>
//Markedown实现//
// 步骤：（左边编辑，右边渲染）
// 1.div或bootstrap布局，创建markedown组件，
// 2.渲染组件：首先在数组routes中写入markedown及src（即在导航栏加上markedown）
// 3.添加路由：引入markedown组件（import），抛出（export）中写入markedown相关path、name等
// 4.npm install marked下载
// 5.引入Marked
// 6.textarea渲染值的指令是v-model(表单控件),设置渲染值为msg,并设置为空,接下来show中(右边)需要将msg监听起来,使用{{msg}},即双向数据绑定
// 7.现在已实现右边编辑，左边呈现功能；但是###还没有实现，需要使用markedown模块编译
// 8.computed监听,currentMsg函数,默认get方法；textarea输入内容，Marked(this.msg)监听到并编译解析，
此时return Marked(this.msg)返回的currentMsg是标签
// 注：# 123！！！#与内容之间一定要有空格
// 9.marked解析并直接呈现出h1标签，此时我们需要将标签插到html中,此时用{{}}实现不了，需要用v-html即可

import Marked from 'marked'/*(后边的名字必须与package.json中的marked一致,前边的名字与组件名一致就可)*/
export default {
    name: 'marked',
    data(){
      return {
        msg:'',
        lists:[],
        title:''
      }
    },
    methods:{
        addNote(){
          console.log(this.title);
          console.log(this.currentMsg);
          var obj = {
            title:this.title,
            content:this.currentMsg
          }
          this.lists.push(obj);
          this.title = '';
          this.msg = '';

        }
    },
    // get方法
    computed:{
      currentMsg(){
        return Marked(this.msg)
      }
    }
}
</script>
<style scoped="">
/*两个盒子布局*/
  .marked {
    float: left;
    width: 50%;
    height: 500px;
  }
  .show {
    float: right;
    width: 50%;
    height: 500px;
  }


</style>