12 basic components

1. Create a global components

Renderings: 1, create a new component, 2. instantiate an object, 3. Call component

Code:

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    < Script the src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ Script > 
</ head > 
< body > 
< div ID = "One" > 
    <-! . 3 Finally calling component -> 
    < the Button-counter > </ the Button-counter > 
    < the Button-counter > </ the Button-counter > 
</ div > 
< Script of the type = "text / JavaScript" > 
    // 1. in the first vue define a new component called a button-counter 
    Vue.component('button-counter' , {
         // definition data function = "each instance of the data returned independent 
        Data: function () {
             return { 
                COUNT: 0 
            } 
        }, 
        // definition component template content 
        Template: ' <Button ON-V: the Click =" + COUNT + "> Me clicked by You {{COUNT}} Times </ Button> ' 
    }); 
    // 2. then add a new component containing vue instantiated variables to VM 
    var VM = new new Vue ({ 
        EL: ' #one ' , 
        Data: {} 
    }); 
</ Script > 
</ body>
</html>

2. Create a local assembly

Code:

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 局部注册组件 -->
<div id="two">
    <button_local></button_local>
</div>
<script type="text/javascript">
    var vm_local = new Vue({
        el:'#two',
        data:{
            info1: 'ha'
        },
        components:{
            button_local:{
                template: '<h1 @click="add">哈哈</h1>',
                methods:{
                    add:function(){
                        alert('你好！')
                    }
                }
            }
        }
    })
</script>
</body>
</html>

Guess you like