The two versions

The complete version (vue.js) is different from the non-complete version (vue.runtime.js)

Recommended use: always use the incomplete version, and then work with vue-loader and vue files

How to use template and render

Template —- HTML to do the rendering

The full version must use template.

Here is a code that creates a plus one.

new Vue({
  data: {
    n: 0,},template: ` 
      
 
       
{{ n }}
 
       +1 
      
 `.methods: {
    add() {
      this.n += 1;
    },
  },
}).$mount('#app');
Copy the code

Render —-js way to do render

This is also creating code that adds one

The incomplete version is render. H is const h = createElement is creating a tag

new Vue({
  el: '#app'.data: {
    n: 0,},// Create a section of HTML with js
  render(h) {
    return h('div'[this.n,
      h(
        'button',
        {
          on: {
            click: this.add,
          },
        },
        '+ 1',)]); },methods: {
    add() {
      this.n += 1; ,}}});Copy the code

How to write Vue code with codesandbox.io

Step 1: Click on the Vue icon to create (be careful not to log in, if you can only create a limited demo

Step 2: Directly operate and edit in the following interface

Step 3: If you want to download it, you can click file in the upper left corner and then click Export to ZIP to Export your code.