两个版本

完整版(Vue.js)与非完整版（vue.runtime.js）区别

推荐：总是使用非完整版，然后配合vue-loader和vue文件一起使用。

完整版template 和 非完整版render 怎么用？

完整版就必须用template。

下面就是一个创建了一个加1的代码。

new Vue({
  data: {
    n: 0,
  },
  template: `
  <div id="app">
  <p>{{ n }}</p>
  <button @click="add">+1</button>
  </div>
  `,
  methods: {
    add() {
      this.n += 1;
    },
  },
}).$mount('#app');

这里也是创建一个加1的代码

非完整版就的用render写法。里面的h 就是 const h = createElement就是创建一个标签

new Vue({
  el: '#app',
  data: {
    n: 0,
  },

  // 就用js创建一段HTML
  render(h) {
    return h('div', [
      this.n,
      h(
        'button',
        {
          on: {
            click: this.add,
          },
        },
        '+1',
      ),
    ]);
  },
  methods: {
    add() {
      this.n += 1;
    },
  },
});