一、两个版本对应的文件名
- 完整版vue.js/vue.min.js
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<!-- 引入vue的完整版 -->
</body>
- 运行时版（不完整版）vue.runtime.js/vue.runtime.min.js
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
<!-- 引入vue的运行时版 -->
</body>
- 区别：完整版比不完整版多了编译器，也就多了30%的代码量，所以应该尽可能使用运行时版。
二、template 和 render 怎么用
vue完整版将视图代码写在HTML里或写在template里面。 完整版的compiler会将"html"字符串翻译成dom节点
<template>
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
vue运行时版没有compiler，无法翻译"html"字符串。必须把所有的元素都构造出来。
new Vue({
el: "#app",
render(createElement) {
const h = createElement
return h("div", [this.n,h("button",{on:{click:this.add}},"+1")]);
},
data: {
n: 0,
},
methods:{
add(){
this.n +=1
}
}
});
可以结合webpack的vue-loader，开发项目的时候写"html"字符串，打包的时候用webpack的vue-loader，把"html"字符串翻译为dom节点。
三、如何用 codesandbox.io 写 Vue 代码
codesandbox.io/index2 或 codesandbox.io/s/
点击vue图标，进入 codesandbox.io/s/vue
