写代码啦
Vue 完整版 和 运行时版的区别和使用
回复数(0) 浏览数(73)
{{topic.upvote_count || 0}} 编辑 回复

今天开始学习 Vue,发现有 Vue 有两个版本,完整版和运行时版的。
完整版叫 vue.js,运行时版(也就是非完整版)叫 vue.runtime.js。那么它们有什么区别呢?

区别

  1. vue.js 有 compiler,vue.runtime.js 没有。
  2. 完整版的视图是写在 HTML 里或者写在 template 里的,运行时版的视图是写在 render 函数里用 h 来创建的。

template 和 render 的用法

  1. template 的用法
    new Vue({ template: '<div>{{ hi }}</div>' })
    这样就可以把 template 里的代码用 html 方式在屏幕中显示
  2. render 的用法
    运行时版的时候,视图是用 render 操作的。
    new Vue({ render (h) { return h('div', this.hi) } })
    这样就是运行时版的用render函数里用h来创建视图

codesandbox.io

当你临时需要用到 Vue 时,可以在一个网站上练手。codesandbox.io,打开这个网址。然后可以不用登陆。

image.png image.png

选择 Vue 然后创建。就会得到类似这样一个demo。

image.png image.png

你可以进行更改,测试。也可以将它导出为本地文件使用。

这就是今天学习的内容,这几天会一直学习 Vue 框架,如果还有想整理的知识,会继续更新总结。

{{topic.upvote_count || 0}}

今天开始学习 Vue,发现有 Vue 有两个版本,完整版和运行时版的。
完整版叫 vue.js,运行时版(也就是非完整版)叫 vue.runtime.js。那么它们有什么区别呢?

区别

  1. vue.js 有 compiler,vue.runtime.js 没有。
  2. 完整版的视图是写在 HTML 里或者写在 template 里的,运行时版的视图是写在 render 函数里用 h 来创建的。

template 和 render 的用法

  1. template 的用法
    new Vue({ template: '<div>{{ hi }}</div>' })
    这样就可以把 template 里的代码用 html 方式在屏幕中显示
  2. render 的用法
    运行时版的时候,视图是用 render 操作的。
    new Vue({ render (h) { return h('div', this.hi) } })
    这样就是运行时版的用render函数里用h来创建视图

codesandbox.io

当你临时需要用到 Vue 时,可以在一个网站上练手。codesandbox.io,打开这个网址。然后可以不用登陆。

image.png image.png

选择 Vue 然后创建。就会得到类似这样一个demo。

image.png image.png

你可以进行更改,测试。也可以将它导出为本地文件使用。

这就是今天学习的内容,这几天会一直学习 Vue 框架,如果还有想整理的知识,会继续更新总结。

73
回复 编辑