1. File names corresponding to the two versions

The two versions of Vue are the full version and the run-time version (partial)

Full/incomplete version

  • With Compiler (compiler), 40% volume/No Compiler
  • The view is written in HTML or in the template option/in the render function, the h tag is written and passed to render, and the H can be changed to any name
  • CDN Import: vue.js/vue.runtime.js File names are different, and the generation environment suffix is.min.js
  • 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.

2. How to use template and render

Vue typically uses a template to create HTML, and sometimes we need to use JavaScript to create HTML, which requires the render function.

  • The full vUE typically creates HTML using template, which replaces the mounted element template and is rendered in HTML
<template>
<div>
    {{n}}
    <button @click="add">+ 1<button>
</div>
</template>
Copy the code
  • The render function in Vue takes one argument, which is a function, usually called h function. 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){
        returnh(Demo); }})Copy the code

3. How to write Vue code using codesandbox.io

First go to the page, create Sandbox in the upper right corner to create a Vue sandbox. To export files, you can log in to the upper-left corner -> Export to ZIP in the lower left corner of the External Resources column. You can customize the import of External static resources. Embed -> Share You can also share your own code with others. Embed -> Share is a great online code editor.