一、区别

图片作者：饥人谷方应杭老师

二、使用方法

接下来使用 bootcdn 分别引入 完整版 和 运行时版，使用不同的方式，做一个“+1” demo。

1. 完整版

视图写在 HTML 中

<div id="app">
    {{n}}
    <button @click="add">+1</button>
</div>

<!-- 完整版 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

<script>
    new Vue({
      el: '#app',
      data: {
        n: 0
      },
      methods: {
        add() {
          this.n += 1
        }
      }
    })
</script>
复制代码

codesandbox 完整代码及效果

视图写在 template 中

<div id="app"></div>

<!-- 完整版 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

<script>
    console.log('window.Vue:', window.Vue)

    new Vue({
      el: '#app',
      // 视图写在 template 中
      template: `
        <div>
          {{n}}
          <button @click="add">+1</button>
        </div>
      `,
      data: {
        n: 0
      },
      methods: {
        add() {
          this.n += 1
        }
      }
    })
</script>
复制代码

codesandbox 完整代码及效果

2. 运行时版

注意，运行时版不支持以上完整版的两种写法，因为运行时版没有 compiler（编译器）。

运行时版要将视图写在 render 中

<div id="app"></div>

<!-- 运行时版 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.min.js"></script>

<script>
    console.log('window.Vue:', window.Vue)

    new Vue({
      el: '#app',
      // 视图写在 render 中
      render(h) {
        return h('div', [this.n, h('button', {on: {click: this.add}}, '+1')])
      },
      data: {
        n: 0
      },
      methods: {
        add() {
          this.n += 1
        }
      }
    })
</script>
复制代码

codesandbox 完整代码及效果