开发者学堂课程【前端自动化构建工具 Webpack：使用 Vue 实例的 rend 方法渲染组件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8227
使用 Vue 实例的 rend 方法渲染组件
在普通页面中使用 render 函数渲染组件
1. 在页面中渲染基本的组件
”viewport” content=”width=device-width,initial-scale=0.1”>
”X-UA-Compatibel” content=”ie=edge”>
Document
</code><code><span class="lake-fontsize-1515">”<span>./lib/vue-2.4.0.js</span>”<span>>
”app”>
</span></code></div><div><code><span class="lake-fontsize-1515">Var login={</span></code></div><div><code><span class="lake-fontsize-1515">template:</span></code><code><span class="lake-fontsize-1515">’<span><h1></span>这是登录组件<span></h1></span>’</span></code></div><div><code><span class="lake-fontsize-1515">}</span></code></div><div><code><span class="lake-fontsize-1515"> </span></code></div><div><code><span class="lake-fontsize-1515">//</span></code><code><span class="lake-fontsize-1515">创建<span>Vue</span>实例，得到<span>ViewModel</span></span></code></div><div><code><span class="lake-fontsize-1515">Var vm=new Vue({</span></code></div><div><code><span class="lake-fontsize-1515">el</span></code><code><span class="lake-fontsize-1515">：’<span>#app</span>’</span></code></div><div><code><span class="lake-fontsize-1515"><login></login></span></code></div><div><code><span class="lake-fontsize-1515">data{}</span></code></div><div><code><span class="lake-fontsize-1515">methods:{}</span></code></div><div><code><span class="lake-fontsize-1515">components:{</span></code></div><div><code><span class="lake-fontsize-1515">login</span></code></div><div><code><span class="lake-fontsize-1515">}</span></code></div><div><code><span class="lake-fontsize-1515">});</span></code></div><div><code><span class="lake-fontsize-1515">
2. 在页面中使用新的函数渲染render组件
”viewport” content=”width=device-width,initial-scale=0.1”>
”X-UA-Compatibel” content=”ie=edge”>
Document<title></span></code></div><div><code><span class="lake-fontsize-1515"><script src=</span></code><code><span class="lake-fontsize-1515">”<span>./lib/vue-2.4.0.js</span>”<span>></script></span></span></code></div><div><code><span class="lake-fontsize-1515"></head></span></code></div><div><code><span class="lake-fontsize-1515"><body></span></code></div><div><code><span class="lake-fontsize-1515"><div id=</span></code><code><span class="lake-fontsize-1515">”<span>app</span>”<span>></span></span></code></div><div><code><span class="lake-fontsize-1515"><div>33333</div></span></code></div><div><code><span class="lake-fontsize-1515"> </span></code></div><div><code><span class="lake-fontsize-1515"><login></login></span></code></div><div><code><span class="lake-fontsize-1515"> </span></code></div><div><code><span class="lake-fontsize-1515"><div></span></code></div><div><code><span class="lake-fontsize-1515"><script></span></code></div><div><code><span class="lake-fontsize-1515">Var login={</span></code></div><div><code><span class="lake-fontsize-1515">template:</span></code><code><span class="lake-fontsize-1515">’<span><h1></span>这是登录组件<span></h1></span>’</span></code></div><div><code><span class="lake-fontsize-1515">}</span></code></div><div><code><span class="lake-fontsize-1515"> </span></code></div><div><code><span class="lake-fontsize-1515">//</span></code><code><span class="lake-fontsize-1515">创建<span>Vue</span>实例，得到<span>ViewModel</span></span></code></div><div><code><span class="lake-fontsize-1515">Var vm=new Vue({</span></code></div><div><code><span class="lake-fontsize-1515">el</span></code><code><span class="lake-fontsize-1515">：’<span>#app</span>’</span></code></div><div><code><span class="lake-fontsize-1515">data{}</span></code></div><div><code><span class="lake-fontsize-1515">methods:{}</span></code></div><div><code><span class="lake-fontsize-1515">render:function(createElements){//createElements</span></code><code><span class="lake-fontsize-1515">是一个方法，调用它能够把指定的组件模板渲染为<span>html</span>结构</span></code></div><div style="text-indent: 14.0pt;"><code><span class="lake-fontsize-1515">Return createElements(login)</span></code></div><div style="text-indent: 14.0pt;"><code><span class="lake-fontsize-1515"> </span></code></div><div style="text-indent: 14.0pt;"><code><span class="lake-fontsize-1515">//</span></code><code><span class="lake-fontsize-1515">注意<span>:</span>这里<span>return</span>的结果，会替换页面中<span>el</span>指定的那个容器</span></code></div><div><code><span class="lake-fontsize-1515">}</span></code></div><div><code><span class="lake-fontsize-1515">});</span></code></div><div><code><span class="lake-fontsize-1515"></script></span></code></div><div><code><span class="lake-fontsize-1515"></body></span></code></div><div><code><span class="lake-fontsize-1515"></html></span></code></div><div><span class="lake-fontsize-1515"> </span></div><div style="text-align: left;"><span class="lake-fontsize-1515">注意：一个 <span>app </span>容器只能使用 <span>render </span>一个组件</span></div></span></code></div></code></span></div>
