Two versions of Vue

  • The full version: cdn.bootcdn.net/ajax/libs/v…
  • The full version: cdn.bootcdn.net/ajax/libs/v…
  • The difference between

  • The complete version with editor Compiler, placeholders or other complex Vue statements can be modified by analyzing DOM nodes, but the code volume will be 30% larger than that of the incomplete version. You can get views directly from HTML or template. More features.

  • The incomplete version lacks the compiler, is smaller and less powerful. Render translation can be done using vue-loader in webpack, such as changing HTML to H (‘div’,this.n)

Use template and render

  • Template can be written directly to HTML or JS, as in:
<template>
    <div id="app">      
        {{n}}
        <button @click="add">+1</button>   
   </div> 
</template>
Copy the code
  • The render function takes an argument, h, passed by vue; Use this parameter to create the instance
Render (h) {return h (' div ', [this. N, h (' {on: {click: this. Add} ', '+ 1'])}Copy the code

Write Vue code using codesandbox.io

Codesandbox.io/Do not register, you can only create 50

  • I’m going to go in and hit Create Sandbox

  • Select the Vue

  • Once created, it will help you configure the basic files and start writing code