console 命令行工具 X clear
console
<html>
    <body>
        <div id="app">
            <P>总数:{{total}}</P>
            <my-component @increase="getTotal" @reduce="getTotal" @click.native="click"></my-component>
            <P>双向绑定总数:{{count}}</P>
            <my-component2 v-model="count"></my-component2>
        </div>
    </body>
    <script>
        Vue.component('my-component2',{
            template:'<button @click="handleClick">+2</button>',
            data:function(){
                return{
                    counter:0
                }
            },
            methods:{
                handleClick:function(){
                    this.counter+=2
                    this.$emit('input',this.counter)
                }
            }
        })
        Vue.component('my-component',{
            props:['texta'],
            template:'\
                <div>\
                    <button @click="handleIncrease">+1</button>\
                    <button @click="handleReduce">-1</button>\
                </div>',
            data:function(){
                return {
                    counter:0
                }
            },
            methods:{
                handleIncrease:function(){
                    this.counter++;
                    this.$emit('increase',this.counter)
                },
                handleReduce:function(){
                    this.counter--;
                    this.$emit('reduce',this.counter)
                }
            }
        })
        const app = new Vue({
            el:'#app',
            data:{
                total:0,
                count:0
            },
            methods:{
                getTotal:function(total){
                    this.total = total
                },
                click:function(){
                    console.log('原生点击事件')
                }
            }
           
        })
    </script>
</html>
本项目引用的自定义外部资源

vue.js