Today finally entered the VUE study, we say vUE two versions of the difference and use it.

File names corresponding to the two versions

The two versions are the full version and the run-time version (incomplete)

Full/incomplete version

  • Compiler with/without compiler

Compiler makes up 40% of the volume

  • Views are written in THE HTML or template option/in the render function, using h to create tags

H is written to render, h can be changed to any name

  • CDN introduction: vue.js/vue.runtime.js

The file name suffix is.min.js in the production environment

  • Webpack introduction: Alias needs to be configured/partial version is used by default
  • @vue/ CLI import: Additional configuration required/partial version used by default

Best practice: Always use the incomplete version and then work with vue-loader and vue files.

  • To ensure user experience, users download smaller JS files, but only support H functions
  • To ensure the development experience, developers can write HTML tags in vue files, not h functions
  • Use loader to do dirty work. Vue-loader will convert THE HTML in vue file into h function, so that h function can be obtained without writing H function

How to use template and render

Vue typically uses a template to create HTML, and then sometimes we need to use javascript to create HTML and use the render function.

  • The full vUE typically creates HTML using template, which replaces the mounted element template and renders it in HTML fashion
<template>
<div class="red">
    {{n}}
    <button @click="add">+1</button>
</div>
</template>
Copy the code
  • The render function in Vue takes one argument, which is a function normally called h. In fact, this h is called createElement. The Render function puts the return value of createElement into THE HTML
new Vue({ el: "#app", render(h) { return h(Demo); }});Copy the code

How to write Vue code with codesandbox.io

First go to the page, create Sandbox in the upper right corner to create a Vue sandbox. Embed -> Share Embed -> Share Embed -> Share Embed -> Share Embed -> Export to ZIP This is a great online code editor