Vue有两个版本，一个是Vue完整版，一个是Vue非完整版。
一、Vue完整版
从HTML得到视图
1、引用
- 从CDN引用vue.js或vue.min.js
- import引用vue.js或vue.min.js
2、使用方法
- 视图模板写在HTML或template里
<body>
<div id="app">
{{n}}
</div>
</body>
new Vue({
el: '#app',
template: `<div>{{n}}</div>`,
data:{
n:0
}
})
3、优缺点
- 优点：代码逻辑清晰，好写好用
- 缺点：通过compiler编译器将HTML/template视图模板编译成DOM节点去渲染，代码体积大
二、Vue非完整版
用JS构建视图
1、引用
- 从CDN引用vue.runtime.js或vue.runtime.min.js
2、使用方法
- 只支持在render函数中创建视图模板
new Vue({
el: '#app',
render(h){
return h('div',this.n)
},
data:{
n:0
}
})
3、优缺点
- 优点：无需使用体积过大的compiler编译器，使用webpack提供的vue-loader即可（vue-loader会自己调用compiler，把.vue文件翻译成h构建方法），代码体积小，用户体验感好
- 缺点：SEO不友好
三、使用codesandbox.io写Vue代码
- 进入官网
- 点击 "Create a Sandbox, it's free"
- 选择 "Vue"
