關於render函數的總結

通常狀況下封裝一個導航組件的寫法javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <button @click='exchange_nevigation'>點擊切換</button>
    <v-anchor :title="title" :level='level'>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/x-template" id='template1'>
  <div>
      <h1 v-if="level===1" :title='title'>
          <a :href="'#'+title">
              <slot></slot>
          </a>
      </h1>
      <h2 v-if='level===2'>
          <a :href="'#'+title">
             <slot></slot>      
          </a>
      </h2>
      <h3 v-if='level===3'>
        <a :href="'#'+title">
           <slot></slot>      
        </a>
    </h3>
    <h4 v-if='level===4'>
        <a :href="'#'+title">
           <slot></slot>      
        </a>
    </h4>
  </div>
</script>
<script>
    Vue.component('v-anchor',{
        template:"#template1",
        props: {
            level:{
                type:Number,
                required:true
            },
            title:{
                type:String,
                default:""
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
           title:'一級導航',
           msg:"一級導航",
           level:1
        },
        methods:{
            exchange_nevigation:function(){
                var arr=['一','二','三','四'];
                if(this.level===4){this.level=1;
                this.title=arr[0]+'級導航'}else{
                    this.title=arr[this.level]+'級導航';
                    this.level+=1
                }
            }
        }
    })
</script>
</body>
</html>

使用render函數的寫法html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <button @click='exchange_nevigation'>點擊切換</button>
    <v-anchor :title="title" :level='level'>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    Vue.component('v-anchor',{
       render: function (createElement) {
           return createElement(
               'h'+this.level,
               [
                   createElement(
                       'a',{
                           domProps:{
                               href:'#'+this.title
                           }
                       },
                       this.$slots.default
                   )
               ]
           )
       },
        props: {
            level:{
                type:Number,
                required:true
            },
            title:{
                type:String,
                default:""
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
           title:'一級導航',
           msg:"一級導航",
           level:1
        },
        methods:{
            exchange_nevigation:function(){
                var arr=['一','二','三','四'];
                if(this.level===4){this.level=1;
                this.title=arr[0]+'級導航'}else{
                    this.title=arr[this.level]+'級導航';
                    this.level+=1
                }
            }
        }
    })
</script>
</body>
</html>

同上，實現了一樣的效果vue

關於render函數java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    Vue.component('v-anchor',{
       render: function (createElement) {
           return createElement(
                //第一個參數是標籤，必須填寫，形式{String|Object|Function}
               'div',
                //第二個參數是對應屬性的數據對象能夠選填
               {style:{
                   height:"100px",
                   width:"100px",
                   border:"1px solid black",
                   background:'yellow'
               }},
               //子節點,可選填
               [createElement('h1',{
                  domProps:{
                      innerHTML:'測試'
                  },
                  style:{
                      color:'red'
                  } 
               })]
           )
       }
    })
    new Vue({
        el:"#app",
        data:{
        }
    })
</script>
</body>
</html>

1.render函數的內容必須return出來npm

2.它包括三個參數app

2-1.第一個參數是標籤，能夠是函數或者字符串或者對象的形式產生dom

2-2.第二個參數是該標籤的數據對象，也可使用template函數

3.第三個參數使它的子節點，能夠選填，寫法和父節點同樣測試

關於render的第二個參數ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .a1{
        color:red
    }
</style>
<body>
<div id="app" v-cloak>
    <v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    Vue.component('v-anchor',{
       render: function (createElement) {
           return createElement(
                //第一個參數是標籤，必須填寫，形式{String|Object|Function}
               'h1',
                //第二個參數是對應屬性的數據對象能夠選填
               {
                   //和v-bind:class同樣
                   'class':{
                       a1:true
                   },
                   //和v-bind:style同樣
                   style:{
                      fontSize:'100px',
                      textShadow:'2px 2px 2px black',
                      textAlign:'center'
                   },
                   //正常的HTML特性
                   attrs:{
                       id:"my_h1",
                       title:"我是render生成"
                   },
                   //自定義事件監聽
                   on:{
                       click:this.popup
                   },
                   //自定義指令
                   directives:[
                       
                   ]
                   //做用域slot

               },
               //子節點,可選填
               [createElement('p',{
                   //DOM屬性
                  domProps:{
                      innerHTML:'測試'
                  },
                  style:{
                      color:'red'
                  } 
               })]
           )
       },
        methods:{
           popup:function(){
               alert('測試')
           }
        }
    });
    new Vue({
        el:"#app",
        data:{
        }
    })
</script>
</body>
</html>