Vue——组件化开发

最新推荐文章于 2024-01-09 00:04:18 发布

liang__lei

最新推荐文章于 2024-01-09 00:04:18 发布

阅读量306

点赞数

分类专栏：组件化开发文章标签： vue

本文链接：https://blog.csdn.net/liang__lei/article/details/107525149

版权

组件化开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue——组件化开发

官方文档：https://cn.vuejs.org/v2/api/#created

一.什么是组件化

1.1 组件化思想：

1.如果我们将一个页面中所有的逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
2.但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完全属于自己这部分的独立的功能，那么之后整个页面的管理和维护就变得非常的容易了。

将一个页面拆分成许多小模块

图片的描述
3.在Vue.js中任何的应用都会被抽象成一棵树

在这里插入图片描述

4.组件的使用分成三个步骤：

在这里插入图片描述

4.1 创建组件构造器

4.2 注册组件

4.3 使用组件

在这里插入图片描述

代码演示
在这里插入图片描述

ES6语法补充
ES6中定义字符串有三种形式：
第一种：’ ’ ==》单引号
第二种：" " ==》双引号
第三种：（键盘tab上边的按键 ES6新增语法）

代码演示
在这里插入图片描述

5.全局组件和局部组件

5.1 全局组件

在这里插入图片描述

5.2 局部组件

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    //3.使用组件-->
<!--    <cpn></cpn>-->
<!--    <cpn></cpn>-->
<!--    <cpn></cpn>-->
    <cpnlc></cpnlc>
    <cpnlc></cpnlc>
    <cpnlc></cpnlc>
</div>

<div id="app2">
<!--    <cpn></cpn>-->
    <cpnlc></cpnlc>
</div>

<script src="../../resources/vue.js"></script>
<script>
    //1.创建组件构造器对象
    const cpnC = Vue.extend({
        template:`
            <div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈哈哈哈</p>
            </div>
        `
    })

    //2.注册组件（全局组件）
    //component('使用时组件的标签名',组件构造器)
    // Vue.component('cpn',cpnC) ----> 此处注册的为全局组件

    const app = new Vue({
        el:"#app",
        data:{
            message:"你好呀",
        },
        components: {//此处注册局部组件
            cpnlc:cpnC
        }
    })

    const app2 = new Vue({
        el:'#app2'
    })

</script>

</body>
</html>

全剧组件和局部组件的补充
在这里插入图片描述

父组件和子组件

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
	<!-- 使用组件 -->
    <cpn2></cpn2>
    <cpn2></cpn2>
</div>

<script src="../../resources/vue.js"></script>
<script>
    //1.创建第一个组件构造器（子组件）
    const cpnC1 = Vue.extend({
        template: `
            <div>
                <h2>我是标题1</h2>
                <p>我是内容，哈哈哈哈</p>
            </div>
        `
    })

    //2.创造第二个组件构造器（父组件）
    const cpnC2 = Vue.extend({
        template: `
            <div>
                <h2>我是标题2</h2>
                <p>我是内容，呵呵呵呵</p>
            </div>
        `,
        components:{//子组件在此处注册
            cpn1:cpnC1
        }
    })

    //root组件
    const app = new Vue({
        el:"#app",
        data:{
            message:"你好呀",
        },
        components: {//父组件在root（根组件）中注册
            cpn2:cpnC2
        }
    })

</script>

</body>
</html>

注册组件的语法糖写法（简写写法）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 使用全局组件   -->
    <cpn1></cpn1>

    <!-- 使用局部组件  -->
    <cpn2></cpn2>
</div>


<script src="../../resources/vue.js"></script>
<script>
    //1.注册全局组件的语法糖（简写形式）
    Vue.component('cpn1',{
        template:`
            <div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈哈哈</p>
            </div>
        `
    })

    //2.注册局部组件的语法糖（简写形式）
    const app = new Vue({
        el:"#app",
        data:{
            message:"你好呀",
        },
        components: {//此处注册局部组件
            cpn2:{
                template: `
                    <div>
                        <h2>我是标题2</h2>
                        <p>我是内容，呵呵呵呵</p>
                    </div>
                `
            }
        }
    })
</script>

</body>
</html>

8.模板分离的写法

在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 使用全局组件   -->
    <cpn1></cpn1>

    <!-- 使用局部组件  -->
    <cpn2></cpn2>
</div>

<!--1. 第一种写法，通过script标签，注意：类型必须是text/x-template -->
<script type="text/x-template" id="cpn1">
    <div>
        <h2>我是标题1</h2>
        <p>我是内容，哈哈哈哈1</p>
    </div>
</script>

<!--2.第二种写法，通过template标签-->
<template id="cpn2">
    <div>
        <h2>我是标题2</h2>
        <p>我是内容，呵呵呵呵2</p>
    </div>
</template>

<script src="../../resources/vue.js"></script>
<script>
    //1.注册全局组件的语法糖（简写形式）====> 模板的抽离
    Vue.component('cpn1',{
        template:'#cpn1'
    })

    //2.注册局部组件的语法糖（简写形式）
    const app = new Vue({
        el:"#app",
        data:{
            message:"你好呀",
        },
        components: {//此处注册局部组件 ====> 模板的抽离
            cpn2:{
                template: "#cpn2"
            }
        }
    })
</script>

</body>
</html>

组件可以访问Vue实例数据吗？

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 使用局部组件  -->
    <cpn2></cpn2>
</div>

<!--通过template标签-->
<template id="cpn2">
    <div>
        <h2>{{ title }}</h2>
        <p>{{ content }}</p>
    </div>
</template>

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

    //注册局部组件的语法糖（简写形式）
    const app = new Vue({
        el:"#app",
        data:{
            message:"你好呀",
        },
        components: {//此处注册局部组件 ====> 模板的抽离
            cpn2:{
                template: "#cpn2",
                data:function () {//组件当中数据存放的地方（data必须是一个函数）
                    return{
                        title:'我是标题2',
                        content:'我是内容，呵呵呵呵2'
                    }
                }
            }
        }
    })
</script>

</body>
</html>

11. 为什么组件中的 data 必须是函数？

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--  使用组件  组件之间互不影响  -->
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
</div>


<!--第二种写法，通过template标签-->
<template id="cpn">
    <div>
        <h2>当前计数为：{{ counter }}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script src="../../resources/vue.js"></script>
<script>
    //1.注册全局组件的语法糖（简写形式）====> 模板的抽离
    //组件里边有自己的数据存储区、模板区、方法区
    Vue.component('cpn',{
        template:'#cpn',
        //组件的数据data必须是一个函数，每创建一个组件就会调用一次该函数，每个组件就会生成自己的存储数据的地方
        //因为函数存储在栈内存中  调用完了就会释放  不会影响下一次调用  所以组件之间 data 是不相同的
        data:function () {
            return{
                counter:0
            }
        },
        
		//组件事件方法的实现
        methods:{
            increment(){
                this.counter++
            },
            decrement(){
                this.counter--
            }
        }
    })

    //2.注册局部组件的语法糖（简写形式）
    const app = new Vue({
        el:"#app",
        data:{
            message:"你好呀",
        },
    })
</script>

</body>
</html>

组件通信——父组件向子组件传递数据
组件通信——子组件向父组件传递数据

liang__lei

关注

0
点赞
踩
0

收藏

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

Vue——组件化开发一.什么是组件化1.1 组件化思想：1.如果我们将一个页面中所有的逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。2.但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完全属于自己这部分的独立的功能，那么之后整个页面的管理和维护就变得非常的容易了。3.在Vue.js中任何的应用都会被抽象成一棵树4.组件的使用分成三个步骤：4.1 创建组件构造器4.2 注册组件4.3 使用组件代码演示ES6语法补充ES6中定义字符串有
复制链接

扫一扫