在vue中引入的版本分为：完整版和非完整版
文件名
视图
完整版：一般用template来创建HTML,这时就需要用的compiler（编译器）处理
<template>
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
data() {
return {
n: 0
};
},
methods: {
add() {
this.n += 1;
}
}
};
</script>
非完整版：是用javascript来创建html，这时候我们需要使用render函数，这里就不需要用到compiler（编译器），比完整版少了30%体积，而且它可以通过webpack vue-loader 转换
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
}
}
})
深入理解两种版本的区别
| vue完整版 | vue非完整版 | 评价 | |
|---|---|---|---|
| 特点 | 有compiler | 没有conpiler | compiler占30%体积 |
| 视图 | 写在HTML里或者写在 template 选项 | 写在 render函数里，用h来创建标签 | h是尤雨溪写好传给 render的 |
| cdn引入 | vue.js | vue.runtime.js | 文件名不同，生成环境后缀为.min.js |
| webpack引入 | 需要配置 alias | 默认使用此版本 | 尤雨溪配置的 |
| @vue/cli 引入 | 需要额外配置 | 默认使用此版本 | 尤雨溪、蒋豪群配置的 |
最佳实践：总是使用非完整版，然后配合 vue-loader 和 vue 文件
codesandbox.io 写 Vue 代码
- 进入 codesandbox.io官网（不用登录可以直接创建）
- 点击 create Sandbox 选择 vue
- 然后就已经创建好了，你就可以写你的代码了
- 它是可以实时预览
- 需要下载下来点击Files->Export to Zip 解压就可以了
- 它所有都帮你配置好了，不需要自己在配了
