Vue-基础组件化的引入

最新推荐文章于 2025-03-16 17:18:06 发布

李三刀iii

最新推荐文章于 2025-03-16 17:18:06 发布

阅读量101

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_72492001/article/details/126291622

版权

本文介绍了一个Vue.js的具体组件实现案例，展示了如何定义一个名为“学校”的组件，并通过Vue的extend方法来创建组件模板，该模板包含学校名称和地址的数据绑定展示及按钮点击事件的响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue的js文件-->
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="root">
    <school></school>
    <school></school>
</div>
</body>
</html>
<script>
    // 1 定义组件
    let school = Vue.extend({
        // templare这个要加反的单引号包裹起来，``，是标准语法
        template:`<div>
            <h2>学校的名称：{{name}}</h2>
            <h2>学校的地址：{{address}}</h2>
            <button @click="clickMe">点我获取更多的信息</button>
        </div>`,
        data(){
            return{
                name:"软件学院",
                address:"深圳前海"
            }
        },
        methods:{
            clickMe(){
                alert(this.name+"--"+this.address);
            }
        },
       });
    // 2 注册组件（全局注册）
    Vue.component("school",school);
    // 3 使用组件

    new Vue({
        el:"#root",
        data:{

        }
    });
</script>