Vue 两个版本的区别和使用方法

前言:

两个版本对应的文件名
template和render怎么用
如何使用codesandbox.io 写代码

vue的两个版本

其中min和不带min的区别是min不带注释,变量注释更加简洁。一个版本是完整版vue.js，一个是运行版runtime。其中完整版有compiler，代码体积大，运行版相对独立，但是无法将字符串变成节点。具体区别如下图

template和render怎么用

// 在main.js文件下。
new Vue({
  el:'#app',
  template:`
  <div>
  <div>{{n}}</div>
  <p>12</p>
  <a>这是完整版</a>
  </div>`,
  data:{
    n:1234
  }
})
// 完整版是支持template的,运行版runtime不支持。

console.log(window.Vue)

不完整版使用render函数

// main.js文件 m+1演示
// https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A
new Vue({
el:'#app',
render(h) {
  return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
},
  data:{
    n:1234,
    y:'yes'
  },
  methods: {
    add() {
      this.n+=1
    }
  }
})

如何使用codesandbox.io/

打开官网,选择create sandbox 创建一个沙盒，选择一个自己用的模板，进入以后选择export to zip 就可以导入到本地了。可以在线写完代码，压缩到本地非常方便！ tips：不需要登录，不登录可以创建多个沙盒