vue-16 组件的概念及基本使用

最新推荐文章于 2024-05-28 09:26:00 发布

Mr.菜园子

最新推荐文章于 2024-05-28 09:26:00 发布

阅读量139

点赞数

分类专栏： Vue 文章标签： vue vue.js vue-cli3

本文链接：https://blog.csdn.net/qq_34479912/article/details/114648612

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

组件（component）是 Vue.js 最强大的功能之一。

Vue 中的组件化开发就是把网页的重复代码抽取出来，封装成一个个可复用的视图组件，然后将这些视图组件拼

接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。

通常一套系统会以一棵嵌套的组件树的形式来组织：

例如：项目可能会有头部、底部、页侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之

类的组件。

组件就是对局部视图的封装，每个组件包含了

HTML 结构
CSS 样式
JavaScript 行为

data 数据

methods 行为

提高开发效率，增强可维护性，更好的去解决软件上的高耦合、低内聚、无重用的3大代码问题

Vue 中的组件思想借鉴于 React

目前主流的前端框架： Angular 、 React 、 Vue 都是组件化开发思想

全局注册与局部注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全局注册</title>
</head>
<body>
    <div id="app">
        <!-- 引用组件时，组件名必须采用横线分隔符 -->
        <component-a></component-a>
        <component-a></component-a>
        <component-b></component-b>
    </div>

    <div id="app2">
        <component-a></component-a>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        //全局注册组件
        /*
        组件名：
            1. 驼峰、横线分隔符命名方式
            2. 使用组件时，必须采用横线分隔符的方式进行引用

        组件可以理解为就是特殊的Vue实例 ， 不需要手动的实例化而已，它用于管理自已的模板
        */
        Vue.component('component-a', {
            // template选项指定组件的模板代码
            template: '<div><h1>头部组件---{{ name }}</h1></div>',
            data: function () { // 在组件中，data选项必须 是一个函数  
                return {
                    name: '全局组件'
                }
            }
        })

        // 定义局部 组件对象 
        const ComponentB = {
            template: '<div>这是 {{ name }}</div>',
            data: function () {
                return {
                    name: '局部组件'
                }
            }
        }

        new Vue({
            el: '#app',
            // 组件选项
            components: { 
                // key: value   key 组件名，value 就是组件对象
                'component-b': ComponentB
            }
        })

        new Vue({
            el: '#app2'
        }) 
    </script>
</body>
</html>

git源码测试：https://gitee.com/cyzgw/vue_demo.git

https://gitee.com/cyzgw/vue_demo/blob/master/demo-02/01-%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C.html

Mr.菜园子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-16 组件的概念及基本使用

组件（component）是 Vue.js 最强大的功能之一。Vue 中的组件化开发就是把网页的重复代码抽取出来，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。通常一套系统会以一棵嵌套的组件树的形式来组织：例如：项目可能会有头部、底部、页侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。组件就是对局部视图的封装，每个组件包含了HTML 结构 CSS 样式 Jav
复制链接

扫一扫