两个版本

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

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

template 和 render 怎么用

template----html的方式做渲染

完整版就必须用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');

render----js的方式做渲染

这里也是创建一个加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;
    },
  },
});

如何用 codesandbox.io 写 Vue 代码

第一步：点击Vue图标就可以创建(注意不要登录，如果登录只能够创建有限的demo

第二步：直接在如下的界面进行操作和编辑

第三步：如果想下载就可以点击左上角的file然后点击 Export to ZIP就可以导出写的代码啦。