vue render函數的使用（1）

1、render函數是什么???

// 在vue中我們使用模板HTML語法組建頁面的
// 除此之外，使用還可以使用render函數，用js語言來動態穿件構建DOM（這就是rneder函數）
// 因為vue是虛擬DOM，拿到template模板時也要轉譯成VNode的函數。
// 而直接使用render函數構建DOM。vue就免去了轉譯的過程。
// 當使用render函數描述虛擬DOM時，vue提供一個函數。
// 這個函數的名字叫createElement。還有約定的簡寫叫h,
// vm中有一個方法_c,也是這個函數的別名
參考地址：https://www.cnblogs.com/weichen913/p/9676210.html

如何使用render函數實現以下html

 <div :class="{'is-red':isRed }">
       <p>這是一個render</p>
 </div>

render函數這樣使用
創建一個XXX.js文件 代碼如下

// 這是render函數的使用方法
export default{
    data(){
        return{
            isRed:true,
            arr:[1,2,3,4],
            inputValue:""
        }
    },
    //  h 最終創建的是一個元素
    // 第一個參數div  是表示創建一個div區域的元素
    // 第二個參數class表示的是這個div上有一個屬性
    // 第三個參數可以是數組，表示div元素下的子元素
    render(h){
        return h('div',{//第二個參數
            class:{
                'is-red': this.isRed
            }
        },
        //第三個參數  
        [h('p','這是一個render')]
      
    );
    }
}

在使用的頁面上引入注冊（跟組件一樣）
import aa from "./myrender"
components:{
   aa
}
<aa></aa>