vue rendering render

First, the macro demonstrates the Vue whole process:

 

Vue is recommended in most cases templateto create your HTML. However, in some scenarios, you need programming skills and create HTML JavaScript, which is rendera function , than it templateis closer to the compiler.

In fact, it provides for the fixing operation dynamically generated HTML templates. Simply put, we use the template in vue HTML syntax set up a page, use the render function that we can use to build js language DOM.

Second, how to use render

When using the render function describes virtual DOM, vue provide a function that is a tool to build a virtual DOM need. Official website gave him a name createElement. There convention shorthand called h, vm, there is a method _c, is an alias for this function.

createElement({String-HTML 标签字符串 | Object-组件选项对象 | Function-异步函数})

Third, the general use render exemplary vue

<script>
    //模板
    var login = {
      template: '<h1>这是登录组件</h1>'
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
     //createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
      render: function (createElements) { 
        // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
        return createElements(login)
      }
    });
 </script>