vue3:组件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <demo></demo>

</div>
<script src="js/vue.js"></script>
<script>
// 组件：将公用的功能抽里出来形成组件  目的：复用代码
//    全局组件
//注册组件的方法
    Vue.component('demo',{
        template:'<h1 @click="change">{{msg}}</h1>',
        //组件当中的data必须是个方法
        data:function(){
            return {
                msg:'msg'
            }
        },
        methods:{
            change:function(){
                this.msg='test'
            }
        }
    })

    new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    })
</script>

</body>
</html>

 

posted @ 2020-07-22 06:57  LDM_datos  Views(103)  Comments(0)    收藏  举报