vue el-tree 默认选中_Vue完整版与runtime版本的区别

完整版

  • 是同时包含编译器和运行时的版本,CDN引入所对应的文件名为vue.js或vue.min.js(生产环境)。

93ab4257c7ca47caffbe07bbac928fc7.png


该版本有编译器,占用代码体积,所以比runtime版大40%的体积。
使用该版本,可直接将内容写在HTML中查看视图效果,或用template 渲染到 HTML,用webpack引入,需要配置alias,@vue/cli 引入也需要额外配置。

1new Vue({
2  template: '<div>{{ hi }}</div>'
3})

runtime版本

  • 是只包含运行时的版本,没有编译器,CDN引入所对应的文件名为vue.runtime.js或vue.runtime.min.js。

e77cec7c29c30bd947b7c58f34edf8e5.png


因该版本无编译器,故占用代码体积小,但无法直接实现页面渲染,需要利用 render 里的 h 函数来创建 HTML 节点,vue.js的webpack引入和@vue/cli 引入都默认使用此版本。

1new Vue({
2  render (h) {
3    return h('div', this.hi)
4  }
5})

在实际开发中,由于h函数的参数比较复杂,可以使用vue-loader把vue文件里的HTML转为h函数。
如将vue.js错引用为vue.runtime.js,则无法将HTML编译为视图;如将vue.runtime.js错引用为vue.js,代码体积会变大,具体大家可以使用http://Codesandbox.io实践一下。

如何用 http://codesandbox.io 写 Vue 代码

http://codesandbox.io是一个在线编辑器,能够快速创建项目。

b2bf34d12982fe03929540493c0215a4.png

注意:不要登录,否则只能创建50个项目

点击中间按钮,创建项目。

a00e0bc2cd44e7b8d1b0c92c0d711c62.png

选中vue开始编辑即可。

f0627c4a11823bbee62ea10ff11b2b45.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值