Vue组件

最新推荐文章于 2021-10-13 13:21:46 发布

qq_58590962

最新推荐文章于 2021-10-13 13:21:46 发布

阅读量76

点赞数

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

本文链接：https://blog.csdn.net/qq_58590962/article/details/119326723

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue两大核心：

数据驱动界面改变
组件化

1.什么是组件？什么是组件化？

在前端开发中组件就是把一个很大的界面拆分为多个小的界面，每一个小的界面就是一个组件
将大界面拆分成小界面就是组件化

2.组件化的好处？

可以简化Vue实力代码
可以调高复用性

3.Vue中如何创建组件？

创建组件构造器
注册已经创建好的组件
使用注册好的组件

自定义全局组件：
在这里插入图片描述
自定义局部组件：

自定义组件中的data和methods:

注意：在自定义组件中不能像在vue实列中一样直接使用data,而是必须通过返回函数的方式来使用data
在这里插入图片描述

动态组件：

<body>
    <!-- MVVM中的View -->
    <div id="app">
        <button @click="toggle">切换</button>
        <!-- 动态组件 -->
        <component v-bind:is="name"></component>
        <input type="checkbox">

    </div>

    <!-- 模板 -->
    <template id="home">
        <div>
            <!-- 自定义组件中使用事件绑定 -->
            <p>我是首页</p>
        </div>
    </template>
    <!-- 模板 -->
    <template id="photo">
        <div>
            <!-- 自定义组件中使用事件绑定 -->
            <img src="images/1.jpg" alt="">
        </div>
    </template>
</body>

<script>

    // 自定义全局组件
    Vue.component("home", { //组件名
        template: "#home",  //对应模板id
        data() {
            return {

            }
        },
        methods: { // 自定义组件 存储监听事件的回调函数

        }
    })
    // 自定义全局组件
    Vue.component("photo", { //组件名
        template: "#photo",  //对应模板id
        data() {
            return {

            }
        },
        methods: { // 自定义组件 存储监听事件的回调函数

        }
    })

    // -------------Vue实例---------------------------
    // MVVM中的View Model
    let vue = new Vue({
        el: "#app",
        // MVVM中的Model
        data: {
            isShow: true,
            name: "home"
        },
        // 存储监听事件的回调函数
        methods: {
            toggle() {
                this.isShow = !this.isShow
                this.name = this.name === "home" ? "photo" : "home"
            }
        },
        // 定义计算属性的
        computed: {

        },
    })


</script>

qq_58590962

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件

Vue两大核心：数据驱动界面改变组件化1.什么是组件？什么是组件化？在前端开发中组件就是把一个很大的界面拆分为多个小的界面，每一个小的界面就是一个组件将大界面拆分成小界面就是组件化2.组件化的好处？可以简化Vue实力代码可以调高复用性3.Vue中如何创建组件？创建组件构造器注册已经创建好的组件使用注册好的组件自定义全局组件：自定义局部组件：...
复制链接

扫一扫