Vue的两个版本

vue两个版本对应的文件名

vue.js完整版和vue.runtime.js非完整版

版本区别:

• 完整版：可以从HTML或template直接得到视图，有compiler，可以将html里含有{{n}}，@click，v-for，v-if这些变成真实的dom节点

• 非完整版：无compiler，不能将html变成节点。webpack通过vue-loader将html变成h('div',this.n)

template和render

vue完整版例子, 使用bootcdn引入

<!--App.vue-->
<template>
	<div id="app">
    	{{n}}
        <button @click = "add">+1</button>
    </div>
</template>

/* main.js */
new Vue({
	el: '#app',
    data:{
    	n:0
    }
    methode:{
    	add(){
        	this.n+=1
        }
    }

vue非完整版例子，使用bootcdn引入

如果以非完整版运行上面完整版的例子，那个n是不显示的，@click也不会有什么作用

非完整版例子

<!--App.vue-->
<template>
	<div id="app">
    	{{n}}
        <button @click = "add">+1</button>
    </div>
</template>

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

使用codesandbox写Vue代码

官网： codesandbox.io/

选择Vue项目

自动生成Vue相关文件

可以将这个项目导出