Differences between Vue versions

When we learn to use Vue, we can introduce “Vue complete version” and “Vue non-complete version”. Let’s take a look at the differences between the two versions through the following table.

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

1 to ensure user experience, users download JS file size is smaller, butOnly H functions are supported.

2 to ensure the development experience, developers can directly write HTML tags in vUE files, whileI'm not going to write h.

3. Vue -loader does dirty work for loader. Vue -loader uses HTML in vue filesConvert to h function.

How to use template and render

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

The render function takes an argument h, passed by Vue, and uses it to create an instance

Render (h) {return h (' div ', [this. N, h (' {on: {click: this. Add} ', '+ 1'])}Copy the code

Write Vue code with codesandbox.io

I would like to recommend a Vue code for an online website codesandbox.io/ attention! Do not log in when using this site, because there is a limit to how many times I can log in to create new projects, as long as I do not log in, I can create projects indefinitely

Projects created on this can also be packaged and downloaded locally