今天终于进入vue的学习了，我们来说说vue两个版本的区别和使用方法吧。
两个版本对应的文件名
两个版本分别是完整版和运行时版(非完整版)
完整版 / 非完整版
- 有compiler(编译器) / 没有compiler
compiler占40%体积 - 视图写在HTML里或者template选项里 / 写在render函数里，用h来创建标签 h是写好了传给render的，h可以改成任意的名字
- cdn引入：vue.js / vue.runtime.js 文件名不同，生产环境后缀为.min.js
- webpack引入：需要配置alias / 默认使用非完整版
- @vue/cli引入：需要额外配置 / 默认使用非完整版
最佳实践：总是使用非完整版，然后配合vue-loader和vue文件，此举思路：
- 可以保证用户体验，用户下载的JS文件体积更小，但是只支持h函数
- 保证开发体验，开发者可以在vue文件里写HTML标签，不写h函数
- 脏活用loader做，vue-loader会把vue文件里的HTML转为h函数，这样就可以不写h函数得到h函数
template 和 render 怎么用
vue一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。
- 完整版vue一般使用template来创建HTML,template是一个替换挂载的元素模板，使用html的方式做渲染
<template>
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
- vue中的render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中
new Vue({
el: "#app",
render(h) {
return h(Demo);
},
});
如何用 codesandbox.io 写 Vue 代码
首先先进入网页，右上角create sandbox创建一个vue沙盒。
要想导出文件可以登录之后左上角file->export to ZIP
左下角External resources 一栏则可以自定义引入外部的静态资源
基础功能大概是这样，右上角蓝色按钮embed->share还可以和别人共享自己的代码，这是一个很好的在线代码编辑器
