Vue第二章组件化编程

最新推荐文章于 2023-07-11 17:41:55 发布

天海一直在AI

最新推荐文章于 2023-07-11 17:41:55 发布

阅读量225

点赞数

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

本文链接：https://blog.csdn.net/tianhai12/article/details/122961736

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第二章：Vue组件化编程

2.1模块与组件

模块——复用js，简化编写

组件——用来实现局部功能效果的代码集合

2.2非单文件组件

一个文件中只包含有n个组件

Vue中使用组件的三大步骤

1、定义组件：Vue.extend(options) data必须写成函数——避免组件被复用时，数据存在引用关系

2、注册组件：局部注册、全局注册

3、使用组件：编写组件标签

基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <hello></hello>
        <!-- 第三步编写组件标签 -->
        <h1>{{msg}}</h1>
        <xuexiao></xuexiao>
        <hr>
        <xuesheng></xuesheng>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
</body>

<script type="text/javascript">
        Vue.config.productionTip = false
        //第一步：创建school组件
        const school = Vue.extend({
            template:`
            <div>
                <h2>学校：{{school}}</h2>
                <h2>地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
            `,
            data() {
                return {
                    school:'辽宁科技学院',
                    address:'本溪'
                }
            },
            methods: {
                showName(){
                    alert(this.school)
                }
            },
        })
        //第一步：创建student组件
        const student = Vue.extend({
            template:`
            <div>
                <h2>姓名：{{name}}</h2>
                <h2>年龄：{{age}}</h2>
            </div>
            `,
            data() {
                return {
                    name:'某海',
                    age:'17'
                }
            }
        })
        //第一步：创建hello组件
        const hello = Vue.extend({
            template:`
            <div>
            <h2>你好{{name}}</h2>
            </div>
            `,
            data() {
                return {
                    name:'TOM'
                }
            },

        })
        //第二步：全局注册组件
        Vue.component('hello',hello)
        //创建vm
        new Vue({
            el:'#root',
            data:{
                msg:'你好啊！'
                },
            //第二步：注册组件
            components:{
                xuexiao:school,
                xuesheng:student
            }
            // data:{
            //     school:'辽宁科技学院',
            //         address:'本溪',
            //         name:'某海',
            //         age:'17'
            // }
        })
        new Vue({
            el:'#root2'
        })
        
</script>
</html>

几个注意点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>几个注意点</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>{{msg}}</h2>
        <xuexiao></xuexiao>
    </div>
</body>

<script type="text/javascript">
        Vue.config.productionTip = false
        //定义组件
        //简写课去掉Vue.extend
        const s = Vue.extend({
            name:'school',
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                </div>
            `,
            data() {
                return {
                    name:"某海",
                    address:'辽宁'
                }
            },
        })
        new Vue({
            el:'#root',
            data:{
                msg:'欢迎学习'
            },
            components:{
                xuexiao:s
            }
        })
</script>
</html>

组件的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>几个注意点</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <app></app>
        
    </div>
</body>

<script type="text/javascript">
        Vue.config.productionTip = false

         //定义student组件
         const student = Vue.extend({
            name:'student',
            template:`
                <div>
                    <h2>学生名称：{{name}}</h2>
                    <h2>学校年龄：{{age}}</h2>
                </div>
            `,
            data() {
                return {
                    name:"某海",
                    age:18
                }
            },
        })

        //定义school组件
        const school = Vue.extend({
            name:'school',
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <student></student>
                </div>
            `,
            data() {
                return {
                    name:"某海",
                    address:'辽宁'
                }
            },
            components:{
                student
            }
        })
        
       
        //定义hello组件
        const hello = Vue.extend({
            template:`<h1>{{msg}}</h1>`,
            data() {
                return {
                    msg:'欢迎来到德莱联盟'
                }
            },
        })

        //定义app组件
        const app = Vue.extend({
            template:`
            <div>
                <hello></hello>
                <school></school>
            </div>
            `,
            components:{
                school,
                hello
            }
        })
        new Vue({
            el:'#root',
            //注册组件（局部）
            components:{app}
        })
</script>
</html>

1、student组件本质上是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2、写或，Vue解析时会帮我们创建student组件的实例对象

3、特别注意：每次调用Vue.extend 返回的都是一个全新的VueComponent！！！！！！！！

4、this指向：组件配置中this均为[VueComponent实例对象]

一个重要的内置关系：

VueComponent.prototype.__proto__ === Vue.prototype

why？

让组件实例对象（VueComponent）可以访问到Vue原型上的属性、方法

VueComponent的原型对象的原型对象是Vue的原型对象

天海一直在AI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue第二章组件化编程

第二章：Vue组件化编程2.1模块与组件模块——复用js，简化编写组件——用来实现局部功能效果的代码集合2.2非单文件组件一个文件中只包含有n个组件Vue中使用组件的三大步骤1、定义组件：Vue.extend(options) data必须写成函数——避免组件被复用时，数据存在引用关系2、注册组件：局部注册、全局注册3、使用组件：编写组件标签基本使用：<!DOCTYPE html><html lang="en"><head> <m
复制链接

扫一扫