vuejs笔记之render渲染方式

责编:menVScode 2017-10-12 21:24 阅读(1475)

下面的代码能将模板显示在页面;

<div id="app">
	<moban></moban>
</div>
Vue.component('moban',{
	template:'<div>11111</div>'
})
var vm = new Vue({
	el:'#app'
});


render()函数的作用也是将模板的显示在页面上;render()函数接受一个fn参数,通过执行这个参数fn(),并在函数fn中return出去。同时fn()需接收一个参数--模板变量

<div id="app"></div>
var renderMo = Vue.component('moban',{
	template:'<div id="app">menvscode</div>'
})
var vm = new Vue({
	el:'#app',
	render:function(h){
		//render函数,接受一个参数,通过执行这个参数h(),并return返回出去。
		//同时h()需接收一个参数--模板变量
		console.log(h);//function(a, b, c, d) { return createElement(vm, a, b, c, d, true); }
		return h(renderMo);
	}
        //render:h => h(renderMo)//将App组件渲染到页面上
});


template: '<App/>', components: { App };等价于 render : h => h(App)。

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App } 
})


new Vue({
  el: '#app',
  router,
  render:function(h){
    return  h(App)
 }
  
})


标签: render vuejs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码