1. File names corresponding to the two versions

  • vue.js(Full version)
  • vue.runtime.js(Incomplete version)

The differences are shown below

  • The full version has an editorcompiler, there are placeholders or something more complicatedVueStatement, can pass analysisDOMNodes, but the code size will be 30% larger than the incomplete version. Available from theHTMLortemplateGet the view directly, more powerful
  • There is no editor in the full versioncompiler, smaller and less functional. Can be achieved bywebpackIn thevue-loadertorenderTranslation, as willhtmlbecomeh('div',this.n)

The best way to use it is:

  • Always use the incomplete version
  • And cooperate withvue-loader 和 vuefile

Ideas:

  • To ensure user experience, users downloadJSSmaller size, but only supportedhfunction
  • Ensure the development experience, developers can directly invueWriting in the fileHTMLLabel, not writehfunction
  • vue-loaderthevueIn the fileHTMLintohfunction

2. How to 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

Alternatively, 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

3. How to write Vue code with codesandbox.io

  • Go to codesandbox.io/
  • Click on thevueicon

  • As shown below, you can write code

  • You can export the code as you write itzip