Vue-组件

<!-- Vue--初识组件 -->

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="styledemo1.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>  
    <div id="vue-app-one">
    <greeting></greeting>
    </div>
    <div id="vue-app-two">
    <greeting></greeting>
    
    </div>
    <script src="app10.js"></script>
</body>
</html>

Vue.component("greeting",{
    template:
    `
    <div>
        <p> {{ name }}:hello,everyone!</p>
        <button v-on:click="changeName">changeName</button>
    </div>
    `,
    data:function(){
        return {
            name:"zouzou"
        }
    },
    methods:{
        changeName:function(){
            this.name = "Sally";
        }
    }
})



new Vue({
    el:"#vue-app-one"
})

new Vue({
    el:"#vue-app-two"
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容