渲染函数

作者: 九尾的日志 | 来源:发表于2018-08-20 11:42 被阅读0次

自定义组件时，template模板的替代方案

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>渲染函数</title>
        <script src="vue.js"></script>
    </head>

    <body>

        <div id="app">
            <test></test>
        </div>

        <script>
            
            
            //模板组件
//          Vue.component('test', {
//
//              template: '<div id="test" v-on:click="onclick">组件</div>',
//
//              data: function() {
//
//                  return {
//
//                      show: true
//                  }
//              },
//
//              methods: {
//
//                  onclick: function() {
//
//                      console.log('clicked!');
//                  }
//              }
//          })

            
            //渲染组件
            Vue.component('test',{
                
                render:function(createElement){
                    
                    return createElement('div',{ attrs:{ id:'test'},on:{click:this.onclick} },'组件');
                },
                
                data: function(){
                    
                    return{
                        
                        show: true
                    }
                },
                
                methods:{
                    
                    onclick:function() 
                    {
                        console.log('clicked!');
                    }
                }
            })
            
            
            new Vue({ el:'#app' });
            
        </script>

    </body>
</html>