详情查看vue官网

一、Vue的两个版本

Vue有两个版本，分别是完整版与非完整版。

• 完整版 同时包含编译器(compiler) 和运行时(runtime) 的版本,可以直接从html里得到视图。

编译器(compiler)：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

运行时(runtime)：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

• 非完整版 只包含运行时(runtime) 的版本，没有编译器。

• 区别

• 版本选择 在开发过程，我们总是使用非完整版（即runtime版），然后配合Vue-loader和Vue文件。

优点：

1.提升用户体验。用户下载的js文件体积小，但是只支持h函数。

2.保证了开发者的体验。开发者通过Vue-loader可以引入compiler，可直接把Vue文件里的html/template转化为h函数，这样就可以达到和完整版一样的功能，既能减小文件体积，还能提升用户体验。

二、template 和 render

非完整版与完整版对比

/* App.vue */

// Vue非完整版（需要编译器）
<template>
	<div id="app">
    	{{n}}
        <button @click = "add">+1</button>
    </div>
</template>


// Vue完整版（不需要编译器）
<template>
	<div id="app">
    	{{n}}
        <button @click = "add">+1</button>
    </div>
</template>

/* main.js */

// Vue非完整版
new Vue({
	el: '#app',
    render(h){
    	return h('div',[this.n, h('button', {on:{click:Jthis.add}, '+1'}])
    }
    data:{
    	n:0
    }
    methode:{
    	add(){
        	this.n+=1
        }
    }


//Vue完整版
new Vue({
	el: '#app',
    data:{
    	n:0
    }
    methode:{
    	add(){
        	this.n+=1
        }
    }

三、使用codesandbox写Vue

官网链接：[codesandbox.io/] (codesandbox.io/)

Create Sandbox

选择Vue项目

接着就可以写Vue啦，可以实时预览、还能导出非常方便