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

一、两个版本的对应的文件名：

• 通过bootCDN引入完整版vue.js。
• 或者非完整版vue.runtime.js

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

1.特点：

• 完整版有compiler（编译器用来将模版字符串编译成为JavaScript渲染函数的代码），这导致完整版体积更大。
• 非完整版没有compiler，所以体积会比完整版小30%。

2.视图：

• 完整版的视图是写在HTML里或template选项的，由于compiler的存在，完整版运行时，用来创建Vue实例，渲染处理虚拟DOM等的代码，基本就是出去编译器的其他一切。
• 非完整版的视图是写在render里的，是用函数来创建标签，非完整版运行时当使用vue-loader或vueify的时候，vue文件内部的模版会在建构时预编成JavaScript，我们在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

template版，引入vue.js

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

render版,引入vue。runtime.js

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代码：

• 第一步：打开codesandbox.io，切记不需要登录！（登录之后只能创建50个项目），然后创建一个新的vue项目即可打开

• 第二步

• 第三步

• 第四步：点击File下的Export to ZIP ，导出到你想要存储的文件夹。