Name of the file corresponding to the two vue versions

Vue.js complete and vue.runtime.js non-complete

Version differences:

  • Full version: You can get views directly from HTML or template, with compiler, you can convert HTML with {{n}}, @click, V-for, V-if into real DOM nodes

  • Incomplete version: No compiler, cannot turn HTML into nodes. Webpack uses vue-loader to change HTML to H (‘div’,this.n)

The template and render

Vue full version example, introduced using bootcDN

<! --App.vue-->
<template>
	<div id="app">
    	{{n}}
        <button @click = "add">+ 1</button>
    </div>
</template>
Copy the code
/* main.js */
new Vue({
	el: '#app'.data: {n:0
    }
    methode: {add(){
        	this.n+=1}}Copy the code

Vue partial version example, imported using bootcDN

If you run the full version of the example above as a partial version, the n is not displayed and @click does nothing

Partial version examples

<! --App.vue-->
<template>
	<div id="app">
    	{{n}}
        <button @click = "add">+ 1</button>
    </div>
</template>
Copy the code
/* 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}}Copy the code

Write Vue code using CodesandBox

Liverpoolfc.tv: codesandbox. IO /

Select the Vue project

Automatically generate Vue related files

You can export this project