iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 13
0
Modern Web

使用Vue.js製作個人blog系列 第 13

【Day 13】頁面:新增-3

markdown顯示功能加入

參考官方的demo內容,把我們自己的頁面增加預覽顯示markdown的功能。


有了基本框架,現在把Markdown功能加入到Blog新增頁面中。
可以參考官方網站的example。這是本次改版才出現的範例,還滿清楚容易了解的!(也省了我很多力氣XDD)

由官方釋出的範例程式碼,卡關了許久,猜測是某個javascript語法出問題。後來發現,原來他們有用兩組套件。後來發現在開發的時候要引入這兩個來源:

<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>

然後把textarea的資料改成:

<textarea :value="content" @input="update"></textarea>

並且新增:

<div v-html="compiledMarkdown"></div>

所以整個divtag會變成

<div id="editor">
    <label>標題</label>
    <input type="text" v-model="title">
    <br>
    <label>內容</label>
    <textarea :value="content" @input="update"></textarea>
    <p>{{ title }}</p>
    <p>{{ content }}</p>
    <button v-on:click="add">存檔</button>
    <div v-html="compiledMarkdown"></div>
</div>

接著修改vue那邊,加上computedupdate功能,所以會變成:

var vm = new Vue({
    el: "#editor",
    data: {
        content: "# test",
        title: "123"
    },
    computed: {
        compiledMarkdown: function () {
            return marked(this.content, { sanitize: true })
        }
    },
    methods: {
        update: _.debounce(function (e) {
            this.content = e.target.value
        }, 300)
    }
})

這樣就可以讓網頁中預覽Markdown囉!!

其中有些語法要講解

  • :value:是v-bind:value的縮寫,其中v-bind可以縮寫成:「:」。同樣的@click則是v-on:click簡化而成。
  • v-html:輸出純HTML的格式。
  • computed:是把計算的東西放入Vue裡面。這邊可以取得editor裡面的參數,進行
  • methods:而這個是放function的地方,我們可以定義各種function在這邊使用。

下一篇,開始做存檔作業


上一篇
【Day 12】頁面:新增-2
下一篇
【Day 14】頁面:新增-4
系列文
使用Vue.js製作個人blog17

尚未有邦友留言

立即登入留言