Understand two versions of VUE in 1 minute

Full version: vue.js

We can reference vue.js or vue.min.js link from the CDN (bootCDN)

It can also be referenced by import.

When introduced, it becomes a global variable with vUE functionality.

Function implementation directly in THE HTML operation, from the HTML view.

Its function is very complete, the volume is huge.

Grammar:

// A compiler is required
new Vue({
  template: '<div>{{ hi }}</div>'
})
Copy the code

To use the full version of vue.min.js, we need to use template, which can be written in the page or in JS.

Incomplete version: vue.runtime.js

We can reference vue.runtime.js or vue.runtime.min.js link from the CDN (bootCDN)

It can also be referenced by import.

When introduced, it becomes a global variable with vUE functionality.

Function realization mainly through JS itself, relatively independent.

Its functionality is incomplete, but the resulting volume is 30% smaller than vue.js.

// No compiler is required
new Vue({
  render (h) {
    return h('div'.this.hi)
  }
})
Copy the code

Render () with vue.runtime.min.js

Vue-loader is a hybrid application of both

Through the packaging tool (Webpack) to achieve the development of the use of the complete version, packaged into the Runtime version, so that the development is very happy, users open the page volume will be smaller, to achieve double happiness.

Vue single file component

We can also create a separate.vue file and import its import into main.js

This is a big flaw, SEO is not friendly

example

First we create a demo. vue file in our configured SRC folder:

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

<script>
export default {
  data() {
    return {
      n: 0
    };
  },
  methods: {
    add() {
      this.n += 1; }}};</script>

<style scoped>
.red {
  color: red;
}
</style>
Copy the code

So that’s the HTML view. Next we import this view file into main.js

In the.

import Demo from "./Demo.vue"; 

new Vue({
  el: "#app".render(h) {
    returnh(Demo); }});Copy the code

Once introduced, it can be used normally.

Codesandbox.io writes Vue code

Enter the official website to select vue, download it and open it with vscode. You can also obtain a configured vue template

codesandbox.iolink