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

一、

vue给了我们两个版本，我们通常称为完整版和非完整版，现在说一下这两个版本都有什么区别

1. 特点方面
   完整版有compiler(编译器)
   非完整版没有compiler
   问题来了，既然完整版是有编译器的，那么它就一定会含有一定的体积（毕竟它也是代码写的啦），而这个compiler竟然占有了40%的体积，所以通常为了用户体验，很多人还是更乐意使用非完整版，客户终究是上帝。O(∩_∩)O哈哈~
2. 视图方面
   完整版视图写在HTML里，或者写在template选项中
   非完整版写在render函数里，用h来创建标签，（h是尤雨溪大帅哥写好传给render的）
3. cdn引入（可以查看链接）
   完整版的是以vue.js结尾的
   非完整版是以vue.runtime.js结尾的
   上面的两个文件都是含有注释的，方面阅读等等，两个文件分别含有min.js版本，这个里面是没有注释等一些东西的，占用空间最最少，平时使用的话使这两个即可
4. webpack引入
   完整版需要引入alias
   默认使用的是非完整版
5. @vue/cli引入
   完整版需要额外配置
   默认使用非完整版
   从这个里面就可以看出大佬们喜欢那一版了

二、

1. template（完整）版的使用方法：

new window.Vue({
  el: "#app",
  template: `
    <div @click="add">{{n}} <button>+1</button></div>
  `,
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }

render（非完整）版的使用方式：

new window.Vue({
  el: "#app",
  render(h){
    return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
  },
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

三、如何用 codesandbox.io 写 Vue 代码

1. 打开链接http://codesandbox.io ，这个不需要登录就可以直接使用，非常方便哦
2. 点击这个里面的vue
   
3. 在这个页面中就可以开始写你的vue代码啦
4. 写完之后也可以导出，点击File下的Export to ZIP 就可以啦！！！