Vue.js學習（一）：用render函數渲染組件

這裏通過一個完整的例子對render函數的用法和注意事項進行說明：

HTML：

<div id="app">
        <demo :level="1"><p>我的自定義p標籤中的內容</p>asdsa</demo>  
        <!-- 如果不設置innerHTML則會顯示demo中分發的內容  -->     
    </div>

Css：

.c{
        background: red;
  }

JavaScript：

Vue.component('demo',{
    render: function (createElement) {
        var self=this
        var input=createElement('input',{

//由於render函數中並沒有v-model的API，因此，這裏只能靠自己實現相應的邏輯，此處引用手冊中的例子

attrs:{ type:'text' }, domProps:{ value: self.value }, on:{ input:function(event){ self.value=event.target.value; self.$emit('input',event.target.value) } } },this.$slots.default); var alink=createElement('a',{ attrs:{ name:'link', href:'myHref' } },this.$slots.default); return createElement('h'+this.level,{//以下是createElement（tag, {}, String）函數的中的第二個參數，通常是可以省略的，更多的參數請設置參考手冊 style:{ color:'yellow'//直接設置style樣式 }, class:{ c:true//引用css中設置的class樣式 }, attrs:{ id:'foo', name:'myname' }, props:{//屬性，可以參見vue組件中屬性的設置 ky:{ type:Number, default: 1 } }, /*domProps:{ innerHTML:'我的內容'//這裏會取代分發的slot內容 },*/ on:{//事件綁定 '~click':function(){//~表示once,只調用一次，更多事件修飾符請參見手冊 console.log('onceClick') } }, nativeOn:{//用於監聽原生事件 click:function(){ console.log('nativeOn') } }, slot:'myslot' },[input,alink])//此處記得一定要中括號，即便只有一個 }, props:{ level:{ type:Number, required: true, default: 2//這裏設置了默認值2，但是小編嘗試將html中:level省略，雖然可以按照'h2'標籤正常顯示，但是控制檯仍然報錯 } }})let vm=new Vue({ el:'#app'})

下圖爲上述實例的顯示情況：

下圖爲上述的標籤情況：

若設置了innerHTML，則顯示爲下圖的情況：