Vue两个版本的区别和使用方法

1. 两个版本对应的文件名

• 完整版的：https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js

• 非完整版的：https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.js

• 区别如下图：

  
  
  image.png

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

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

• 使用方法，可以是在文件里加入script来引用对应的文件名。vue.js/vue.runtime.js，也可以使用压缩版的vue.min.js / vue.runtime.min.js

2. 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'])
 }

3. 用 codesandbox.io 写 Vue 代码

• 先打开https://codesandbox.io/index2
  

  image.png

• Create Sandbox，并且在里面选Vue

  
  
  image.png

• 创建完后，它会帮你配置好基本的文件

  
  
  image.png

• 然后你就可以写你的代码了

• 本文参考：https://zhuanlan.zhihu.com/p/115274659