Vue组件初使用

最新推荐文章于 2024-07-23 15:40:17 发布

楠溪泽岸

最新推荐文章于 2024-07-23 15:40:17 发布

阅读量126

点赞数 2

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_51603875/article/details/125485724

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

Vue组件初使用
一、基本格式
- 组件效果
二、组件笔记
三、命名方法

Vue组件初使用

vue组件的入门使用

一、基本格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件初体验</title>
</head>
<body>
    <div id="app">
        <p>调用全局注册的按钮</p>
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //1、创建一个Vue实例
        const app = Vue.createApp({
            data(){
                return{
                    msg:'基础模板'
                }
            }
        })
        //2、注册一个全局组件(必须在挂在之前)
        app.component('button-counter',{
           data(){
               return{
                   count:0
               }
           },
            template:`
                <button v-on:click="count++">你点击了按钮{{count}}次</button>
            `
        });
        //3、挂载Vue实例
        app.mount("#app");
    </script>
</body>
</html>

组件效果

使用效果

二、组件笔记

<script>
        //1、创建一个Vue实例
        const app = Vue.createApp({
            data(){
                return{
                    msg:'基础模板'
                }
            }
        })
        //2、注册一个全局组件(必须在挂在之前)
        app.component('ButtonCounter',{
           data(){
               return{
                   count:0
               }
           },
            template:`
                <button v-on:click="count++">你点击了按钮{{count}}次</button>
            `
        });
        //3、挂载Vue实例
        app.mount("#app");
    </script>