vue各个版本的render方法 - Githubissues

jackieli123723 / jackieli123723.github.io

✅lilidong 个人博客

9 stars 0 forks source link

vue各个版本的render方法 #65

Open jackieli123723 opened 5 years ago

jackieli123723 commented 5 years ago

vue1 vue render function 1 原理

new Vue({
  el: "#app",
  data() {

  },
  render(createElement) {
    return createElement(
      'div',
      {
        attrs: {}
      },
      'Hello World!'
    )
  }
})

vue2 vue render function 2 原理

new Vue({
  el: "#app",
  data() {

  },
  render(createElement) {
    return createElement(
      'button',
      {
        attrs: {
          class: 'primary-button'
        },
        on: {
          click: () => alert('You clicked!')
        }
      },
      'Click Here!'
    )
  }
})

vue vue render function 3 原理

const users = [
  {
    name: 'John'
  },
  {
    name: 'King'
  }
]

Vue.component('list', {
  template: '#list'
})

new Vue({
  el: "#app",
  render(createElement) {
    return createElement('ul', users.map(
        user => createElement('li', user.name)
      )
    );
  }
})