[vue]如何使用挂载

CodeEchoes

已于 2024-04-25 09:16:38 修改

阅读量246

点赞数 6

文章标签： vue.js 前端前端框架

于 2024-04-25 09:16:22 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73787865/article/details/138175627

版权

本文介绍了HTML的基本结构，然后展示了如何使用Vue.js创建和定义组件，并将它们分别挂载到不同的div元素上，以实现动态内容显示。

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

效果图

1.HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    </div>
    <div id="app1">
    </div>
    <div id="app2">
    </div>
</body>
</html>

2.vue.js

 <script src="./js/vue.min.js"></script>

3.vue组件定义

    <script>
        var cpn = Vue.extend({
            template:'<p> I wish U {{text1}}<HR></p>',
            data:function(){
                return{
                    text1:'happiness',
                    text2:'health',
                    text3:'good luck'
                }
            }
        });
        var cpn1 = Vue.extend({
            template:'<p> I wish U {{text2}}<HR></p>',
            data:function(){
                return{
                    text1:'happiness',
                    text2:'health',
                    text3:'good luck'
                }
            }
        });
        var cpn2 = Vue.extend({
            template:'<p> I wish U {{text3}}<HR></p>',
            data:function(){
                return{
                    text1:'happiness',
                    text2:'health',
                    text3:'good luck'
                }
            }
        });

4.挂载

        new cpn().$mount('#app')
        new cpn1().$mount('#app1')
        new cpn2().$mount('#app2')
    </script>
</body>
</html>