Vue two versions of the differences and use methods

1. File names corresponding to the two versions
2. How to use template and render
3. How to write Vue code with codesandbox.io

1.1. The full version

• vue.js

https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js
Copy the code

2. The runtime version

• vue.runtime.js

https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.runtime.min.js
Copy the code

The difference and connection between the two

Why are there two versions and what are the differences between them?

In short, vue.js is the full version of VUE, with all components (such as compiler), while the non-full version does not.

Because of the non-complete version, which does not have a compiler component, the non-complete version is 40% smaller than the full version, making it ideal for faster loading by client browsers, as Vue does by default.

However, because of the lack of compiler, template was not allowed in the incomplete version and the h function was used to render the page, making the development experience particularly bad.

However, since it can be packaged with Webpack, vue-Loader is responsible for converting the template into an H function, which can be implemented using either the incomplete version or the full version development process.

The template and render

Template is the part of the Vue single-file component responsible for views

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

Render is used to render the template

import demo from './demo.vue'
new Vue({
  el: '#app',
  render(h) {
    return h(demo)
  }
Copy the code

Write Vue code using CodeSandbox