写代码啦
Vue 两个版本的区别和使用方法
回复数(0) 浏览数(24)
{{topic.upvote_count || 0}} 编辑 回复

两个版本对应的文件名

完整版---->vue.js;vue.min.js(没有注释)
非完整版(RuntimeOnly)---->runtime.js;runtime.min.js(没有注释)
有无compiler(编译器)的区别,完整版的体积比非完整版的体积大30%-40%。

完整版可以通过compiler把视图上的HTML转化为DOM节点,完整版的视图可以写在HTML里面或者template选项里面;
非完整版中的HTML只是字符串,不能从HTML中获取"View",
---->结合webpack引入vue-loader,就可把vue文件里的HTML转化为h函数,从而实现完整版的功能

template 和 render 怎么用

完整版
<template>
      <div id ="app" >
             {{n}}
            <button @click="add">+1 </button>
       </div>
</template>
非完整版
new Vue({
   render(h) {
    return h('div', [this.n, h("button", { on:{click:this.add}})])
    },
     data:{n:0},
     methods:{
            add(){ this.n +=1} 
            }
    })

如何用 codesandbox.io 写 Vue 代码

https://codesandbox.io/​codesandbox.io
选择项目为VUE即可

image.png image.png

{{topic.upvote_count || 0}}

两个版本对应的文件名

完整版---->vue.js;vue.min.js(没有注释)
非完整版(RuntimeOnly)---->runtime.js;runtime.min.js(没有注释)
有无compiler(编译器)的区别,完整版的体积比非完整版的体积大30%-40%。

完整版可以通过compiler把视图上的HTML转化为DOM节点,完整版的视图可以写在HTML里面或者template选项里面;
非完整版中的HTML只是字符串,不能从HTML中获取"View",
---->结合webpack引入vue-loader,就可把vue文件里的HTML转化为h函数,从而实现完整版的功能

template 和 render 怎么用

完整版
<template>
      <div id ="app" >
             {{n}}
            <button @click="add">+1 </button>
       </div>
</template>
非完整版
new Vue({
   render(h) {
    return h('div', [this.n, h("button", { on:{click:this.add}})])
    },
     data:{n:0},
     methods:{
            add(){ this.n +=1} 
            }
    })

如何用 codesandbox.io 写 Vue 代码

https://codesandbox.io/​codesandbox.io
选择项目为VUE即可

image.png image.png

24
回复 编辑