Vue两个版本的区别

256 阅读1分钟

一、Vue的两个版本

image.png

  • 完整版里有编辑器compiler,有占位符或其他比较复杂的Vue语句时,可以通过分析DOM节点来修改,但是代码体积会比非完整版的大30%。可以从HTML或template直接得到视图。功能更多。

  • 非完整版里没有编辑器compiler,体积更小,功能更弱。可以通过webpack里的vue-loader来render翻译,如将html变成h('div',this.n)

二、template 和 render 的使用

  • template可以直接写在html或js上,如:
<template>
    <div id="app">      
        {{n}}
        <button @click="add">+1</button>   
   </div> 
</template>
  • render函数接收一个参数h,这个参数是vue传的;用这个参数去创建实例
render(h){ 
     return h('div', [this.n,h('{on:{click:this.add}’,'+1'])
 }

三、使用 codesandbox.io 写 Vue 代码

网址:codesandbox.io/
不要注册,注册的话只能创建50个

  • 进来之后直接点Create Sandbox

image.png

  • 选择Vue

image.png

  • 创建完后,它会帮你配置好基本的文件,可以开始写代码了~