The second spare time

vue components: split main codes, the code amount reduction vue example, ui facilitate reuse.

　　　　　vue manner creating components, Vue.component (component name, the component constructor), with similar objects creating Vue, the same data, methods, watch, etc., but the data must be a function component, and no acquisition el root instance.

The following code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="app">
                <my-com></my-com>
        </div>
        <script type="text/javascript">
            Vue.component("myCom",{
                //data必须是一个函数
                data :function(){
                    return{
                        count:0    
                    }
                },
                template:"<button v-on:click='count++'>点击了{{count}}次</button>"
            })
            var vm = new Vue({
                el:"#app"
            })
        </script>
    </body>
</html>

There are several ways to achieve extend the

<! DOCTYPE HTML> 
<HTML> 
    <head> 
        <Meta charset = "UTF-. 8"> 
        <title> </ title> 
        <Script the src = "vue.js"> </ Script> 
    </ head> 
    <body> 
        < div ID = "App"> 
            <My-COM> </ My-COM> 
            <mycom2> </ mycom2> 
            <mycom3> </ mycom3> 
            <mycom4> </ mycom4> 
        </ div> 
        <Template ID = "TEMP" > 
            <div> 
                <h1> implementation of the fourth component </ h1> 
                <h2> benefits of such an approach is the ability to prompt </ h2> 
            </div>
        </template>
        <script>var com1 =
             Vue.extend({
                Template: '<h1 of> implementation of a first component </ h1 of>' 
            }) 
            Vue.component ( 'MyCom' , COM1) 
            Vue.component ( 'mycom2' , Vue.extend ({ 
                Template: '<H2> Components the second implementation </ H2> ' 
            })) 
            Vue.component ( ' mycom3 ' , { 
                Template: ' <H3> a third component implementations </ H3> ' 
            }) 
            Vue.component ( ' mycom4 ' , { 
                Template: "#temp"
            })
            var vm = new Vue({
                el:"#app"
            })
        </script>
    </body>
</html>

Component data transfer is performed by prop.

The second spare time

Guess you like