SABER--08 Using Vue in Markdown

Interpolation 插值

Markdown代码首先被HTML编译，然后编译给Vue渲染功能，例如：

Hello **Saber**!

编译为：

function render() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c('p', [
    _vm._v('Hello '),
    _c('strong', [_vm._v('Saber')]),
    _vm._v('!')
  ])
}

这就意味着你可以使用Vue风格的插值方式再Markdown中：

This result of 1 + 1 is: {{ 1 + 1 }}

它会被编译为：
This result of 1 + 1 is: 2
如果你想在Markdown页面的一部分禁用vue样式的插值，你可以把它包装在代码栏、内联代码或使用 v-pre 属性中，如下所示：

```js
const foo = `{{ safe, this won't be interpolated! }}`

And {{ bar }} is safe too! {{ yeah }}

它被渲染为：

```javascript
const foo = `{{ safe, this won't be interpolated! }}`

And {{ bar }} is safe too! {{ yeah }}

<script> block

<script> 标签在Markdown页面中不是一个通常的HTML的 <script> 元素， 它视为Vue SFC <script> blcok。

**This is an example:**

<button @click="count++">{{ count }}</button>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

渲染为：
与常规的Vue单文件组件一样，Markdown页面最多只能有一个脚本块。

<style> block

<style> 标签在Markdown页面不是HTML的 <style> 元素，他们是Vue SFC <style> blocks。