初识vue组件

最新推荐文章于 2024-02-08 10:28:07 发布

mandyucan

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量233

点赞数

分类专栏：框架文章标签： vue

本文链接：https://blog.csdn.net/Mandyucan/article/details/82387138

版权

框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue.component组件

// js
Vue.component("greeting", { // 将greeting当做一个标签使用，组件
    template:  // 模板里面有且只有一个根标签
    `<p>
        {{name}}: 大家好，给大家介绍一下我自己
        <button @click="changeName">改名</button>
    </p>`,

    data: function() { // 写成函数形式，
        return {  // 返回对象
            name: "mandy"
        } 
    },

    methods: {
        changeName: function() {
            this.name = "Cindy"
        }
    }
})
new Vue({
    el: "#vue-app-one",

});

 new Vue({
    el: "#vue-app-two",

});

// html
<body>
    <h1>初始vue组件</h1>
    <div id="vue-app-one">
        <greeting></greeting>
    </div>
    <div id="vue-app-two">
        <greeting></greeting>      
    </div>
    <script src="app.js"></script>
</body>

页面展示：
这里写图片描述

注意：
如果将data放在组件外面，相当于挂载全局，访问时，点击其中一个按钮，两个实例都会发生改变；

var data = {
    name: "mandy"
}
Vue.component("greeting", { // 将greeting当做一个标签使用，组件
    template:  // 模板里面有且只有一个根标签
    `<p>
        {{name}}: 大家好，给大家介绍一下我自己
        <button @click="changeName">改名</button>
    </p>`,

    data: function() {
        // return {  // 返回对象
        //     name: "mandy"
        // }
        return data;
    },


    methods: {
        changeName: function() {
            this.name = "Cindy"
        }
    }
})
new Vue({
    el: "#vue-app-one",

});

 new Vue({
    el: "#vue-app-two",

});

展示效果：
这里写图片描述

mandyucan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识vue组件

Vue.component组件// jsVue.component("greeting", { // 将greeting当做一个标签使用，组件 template: // 模板里面有且只有一个根标签 `&lt;p&gt; {{name}}: 大家好，给大家介绍一下我自己 &lt;button @click="changeName"&gt;改名&...
复制链接

扫一扫

专栏目录