完整版: 同时包含编译器和运行时的版本。
runtime版:没有编译器(compiler)
从vue实例说起
问:如何使用vue实例?
使用vue实例有3种方法。
方法1:从html得到视图
该方法就是文档说的完整版vue，通过bootCDN引用vue.js或者vue.min.js即可做到。
由于我们创建的vue项目默认使用runtime版，没有编译器，直接把数据写在html里，并不会把数据渲染出来。
index.html的代码如下:
改写main.js的代码如下:
渲染的结果: n并没有被渲染出来，而是报了以下的错误:
解决的方法是:在index.html里引入完整版的vue:
数据渲染成功。
方法2:用js构建视图
此方法实际是runtime版本,通过bootCDN引入vue.runtime.js。
index.html文件代码:
main.js代码:
该方法主要是通过render函数里的h来创建标签。
方法3:使用vue-loader
该方法可以把.vue文件翻译成h的构建方法。 在components文件夹下创建Demo.vue,内容如下:
该组件称为单文件组件
main.js内容如下:
渲染的结果:可以进行+1操作
总结
| vue完整版 | vue非完整版 | |
|---|---|---|
| 特点 | 有compiler(compiler占40%体积) | 没有compiler |
| 视图 | 写在html里 或者写在template选项里 | 写在render函数里 用h来创建标签 |
| cdn引入 | vue.js | vue.runtime.js |
| webpack引入 | 需要配置alias | 默认使用此版本 |
| @vue/cli引入 | 需要额外配置 | 默认使用此版本 |
