Vue 完整版
特点：
有 compiler ，视图可以写在 HTML 里面，或者写在 template 选项里.
//有 compiler 编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
- 但是
compiler会占大约 30% 的体积， 因此运行时版本相比完整版体积要小大约 30% 。
Vue 不需要编译器的非完整版.
特点：
没有 compiler ，视图写在 render 函数里，用 h 来创建标签.
// 新建一个 demo.vue 文件
<template>
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data(){
return{
n:0
}
},
methods:{
add(){
this.n+= 1
}
}
}
</script>
<style scoped>
.red{
color: red;
}
</style>
// 然后用 render 里的 h 函数来创建使用标签
import demo from './demo.vue'
new Vue({
el: '#app',
render(h){
return h(demo)
}
})
关于引入
CDN 引入
-
完整版： vue.js
-
非完整版： vue.runtime.js
-
两者的文件名不同，生成环境的后缀为 .min.js
webpack 引入
-
完整版： 需要配置 alias.
-
非完整版： 默认使用此版本.
@vue/cli 引入
-
完整版： 需要额外配置.
-
非完整版： 默认使用此版本.
实践：总是使用非完整版，然后配合 vue-loader 和 vue 文件
- 保证用户体验，用户下载的 js 文件体积更小，但只支持 h 函数.
- 保证开发体验，开发者可以直接在 vue 里面写 HTML标签，而不写 h 函数.
- vue-loader 可以把 vue 文件里的 HTML，转为 h 函数
使用 odesandbox.io 写 vue
直接在百度或者谷歌搜索：codesandbox.io ，进入官网后点击 vue，便可以愉快的写 vue 了， 当然也可以写 React ， Angular 等框架，和 js，HTML5的使用.
建议：不需要登陆，可以无限创作项目，登录了之后便有了限制
还有一点使用 codesandbox.io.是不需要科学上网的，除了开发工具之外另一个线上的 码代码工具.
