1. Vue is divided into two versions: “Complete version” and “incomplete version”

  • Vue full version file name suffix is Vue. Js (Vue.min.js in production environment)

This version has the Compiler compiler, which writes views directly into HTML or the Template option. It can turn placeholders {{}} or conditional statements into real DOM nodes, but the code volume is about 40% larger than the incomplete version, which affects the user experience.

  • The file name suffix of the incomplete Vue version is vue.runtime.js (in the production environment, vue.runtime.min.js).

This version does not have a compiler to turn HTML into nodes. Instead, webpack can turn HTML into H (‘div’, this.n) using vue-loader (configured in YARN Build) and vue files.

Note: Webpack introduction: the default use of the incomplete version, Vue full version requires the alias configuration. @vue/ CLI import: The partial version is used by default. Vue full version requires additional configuration.

Conclusion:

Best bet: always use the incomplete version, then work with vue-loader and vue files

The reason:

  1. To ensure user experience, users want to download smaller JS files, but only support H functions
  2. To ensure the development experience, developers can write HTML tags directly in vue files instead of writing H functions
  3. Let loader do the dirty work. Vue-loader converts HTML from vue files into H functions

2. How to use template and render

The full version of Vue uses template, written directly in HTML or JS:

<template>
    <div id="app">
        {{n}}
        <button @click="add"> +1 </button>
    </div>
</template>
Copy the code

The render function takes a parameter h, which was written in Vue by Yustream (the author of the front-end framework vue.js) and passes it to Render to create an instance:

render(h){
    return h('div', [this.n, h('button',{on:{click: this.add}}, '+1')])
}
Copy the code

3. Write Vue code using codesandbox.io

Enter thecodesandbox.io/

  1. First Create Sandbox (don’t sign in)

  1. Select the Vue

  1. It is automatically generated after being created