Vue组件的创建与使用，描述简单，容易学习

最新推荐文章于 2022-02-25 22:36:56 发布

远方的原

最新推荐文章于 2022-02-25 22:36:56 发布

阅读量579

点赞数

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

本文链接：https://blog.csdn.net/qq_44890362/article/details/121716047

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.学过或者正在学习vue的小伙伴一定十分清楚，组件在vue框架里面的重要性吧

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

现在让我们一起来学习如何创建和使用vue的组件吧，在创建组件之前先引入vue.js。

2.全局组件

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <button-one></button-one>
        <button-one></button-one>
      
    </div>
    <script>
        //创建一个组件(全局)
        Vue.component('button-one', {
                // 注意这个data必须是一个函数，需要返回一个对象
                data() {
                    return {
                        name: '大中国',
                        msg: '6'
                    }
                },
                //vue 模板语法 这里我们使用es6的模板语法
                template: `
                <div>
                    <h1><span>{{name}}</span><span>{{msg}}</span></h1>
                    <button @click = 'handle'>按钮</button>
                </div>
                `,
                methods: {
                    handle() {
                        this.msg = this.msg + '' + 6
                    }
                }
        })
      
        
        let vm = new Vue({
            el: '#app',
        })
    </script>
</body>

</html>

注意该组件的名称可以使用驼峰命名的写法，也可以使用短横线的写法（非常推荐）。我这里使用的是后者。大家可以看得到这个组件是可以复用的，现在给大家看一下我的结果。

上面的两个按钮都是可以点击的。

3.局部组件

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <button-two></button-two>
        <button-two></button-two>
    </div>
    <script>
        // 创建一个组件（局部）
        let buttonTwo = {
            data() {
                return {
                    name: '大中华',
                    msg: '6'
                }
            },
            template: `
                <div>
                    <h1><span>{{name}}</span><span>{{msg}}</span></h1>
                    <button @click = 'handle'>按钮</button>
                </div>
            `,
            methods: {
                handle() {
                    this.msg = this.msg + '' + 6
                }
            }
        }
        let vm = new Vue({
            el: '#app',
            // 局部组件需要挂载一下
            components: {
                buttonTwo
            }
        })
    </script>
</body>

</html>

大家注意这个局部组件是需要挂在components里面的。给大家看一下我的结果

远方的原

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue组件的创建与使用，描述简单，容易学习

1.学过或者正在学习vue的小伙伴一定十分清楚，组件在vue框架里面的重要性吧组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：现在让我们一起来学习如何创建和使用vue的组件吧，在创建组件之前先引入vue.js。2.全局组件<!DOCTYPE html><html lang="en"><head> <meta charset="UT
复制链接

扫一扫