vue组件（个人学习笔记三）

2023-11-17

友情提醒

先看文章目录，大致了解知识点结构，直接点击文章目录可以跳转到文章指定位置。

第一章、vue的组件

1.1）什么是SPA应用

①单页 Web 应用（single page web application，SPA）。 Vue工程是单页面应用程序，整个工程只有一个完整的html页面。
② 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
③数据需要通过 ajax 请求获取。
④Vue 脚手架工程只有一个页面，浏览器也只能读取这一个页面的内容。Vue 通过组件的方式把要渲染到页面的内容进行拆分，拆分成组件，由 Vue 对象加载各个组件并渲染到页面.

1.2）vue的组件简介

组件（component）的出现，是为了拆分Vue的代码块，不同的组件划分不同的功能模块，以后我们需要某个功能时，就直接调用对应的组件即可
①模块化：模块化是从代码的角度去分析的，方便代码分层开发，保证每个模块职责单一。
②组件化：组件化是从界面的角度去划分的，如：分页组件、轮播、颜色选择、文件上传等抽象是把公共的东西像的东西抽出来（好处：复用，公共的，缺点：代码的可读性直线下降）
在这里插入图片描述
③两种组件命名方式：
1、大驼峰 MyComponent
2、-连接符号： my-component
组件分为：根组件（App.vue）所有的组件都需要注册在根组件、一般组件、路由组件

1.3）vue工程中的main.js文件

在这里插入图片描述

第二章、Vue组件的使用

2.1）一般组件的自定义

①创建一个后缀为.vue组件文件，如：MyComponent.vue
在这里插入图片描述

②使用Vue.extend语法创建，一般组件会继承Vue对象也就是VueComponent对象简称VC对象，语法中options和new Vue时传入的那个options几乎一样，但也有区别：
1、el不要写：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2、data必须写成函数：
避免组件被复用时，数据存在引用关系。

<template>
    <!--写组件的html代码-->
    <h1>名字:{{name}}</h1>
</template>
<script>
    import Vue from "vue"
    /*该组件的vue语法*/
    /*vue代码需要声明vue对象  vue组件本身就是vue对象的小弟*/
    //myVueComponentDemo1就是vue组件对象  简称vc
    const myVueComponentDemo1 = Vue.extend({
        //el:"",vc是vue对象的小弟  它不能自己运行  只能被vue对象调用
        //data:{}, 对象式
        //函数式
        data(){
            return{
                name:"第一个组件"
            }
        },
        methods:{}

    })
    //把组件对象声明暴露
    export default myVueComponentDemo1;//默认该组件对象对外公开
</script>
<style>
    /*该组价的样式*/
</style>

2.2）注册组件：全局注册和局部注册

2.2.1）全局注册：靠Vue.component(‘组件名’,组件)

Vue组件直接绑定Vue对象
在这里插入图片描述
在App.vue使用注册后的组件标签

查看页面

2.2.2）局部注册（常用）：靠new Vue的时候传入components选项

Vue对象直接绑定根组件，所有的组件都需要注册在根组件（App.vue），一般组件只能被根组件管理。

<template>
  <div id="app">
  <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <h1>这是app.vue  我在这写一个标签</h1>
    <!--这是全局注册  来自vue对象-->
    <MyFirstVc></MyFirstVc>
    <MyFirstVc></MyFirstVc>
    <MyFirstVc></MyFirstVc>
    <MyFirstVc></MyFirstVc>
    <!--这是局部注册-->
    <h1/>
    <p>局部注册</p>
    <AAA></AAA>
    <AAA></AAA>
    <AAA></AAA>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
//局部注册
import MyFirst from "./components/MyFirst"
   HelloWorld,
    AAA:MyFirst//局部注册组件  该组件只能在app.vue上使用
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.3）使用组件

①Vue对象调用App.vue，App.vue调用一般组件
②自定义一个StudentDemo组件
注意：只能有一个元素，一般组件取名：大驼峰如MyComponent

<template>
    <div>
        <!--写html代码-->
        <p>姓名:{{stuName}}</p>
        <p>年龄:{{stuAge}}</p>
    </div>
</template>

<script>
    //vc对象
   export default {
        name:"StudentDemo",//组件名称  用来区分组件  在vue加载时  会以组件标签的形式呈现
       data(){
            return{
                stuName:"张三",
                stuAge:18
            }
       },
    }
</script>

<style scoped>
    /*css样式*/
</style>

③在根组件注册使用

<template>
  <div id="app">
    <!--<img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <h1>这是app.vue  我在这写一个标签</h1>
    &lt;!&ndash;这是全局注册  来自vue对象&ndash;&gt;
    <MyFirstVc></MyFirstVc>
    <MyFirstVc></MyFirstVc>
    <MyFirstVc></MyFirstVc>
    <MyFirstVc></MyFirstVc>
    &lt;!&ndash;局部注册&ndash;&gt;
    <h1/>
    <p>局部注册</p>
    <AAA></AAA>
    <AAA></AAA>
    <AAA></AAA>-->
    <BBB></BBB>
    <hr/>
    <BBB></BBB>
  </div>
</template>

<script>
/*import HelloWorld from './components/HelloWorld.vue'
//局部注册
import MyFirst from "./components/MyFirst"*/
import MyStudent from "./components/Student"
export default {
  name: 'App',
  components: {
   /* HelloWorld,
    AAA:MyFirst//局部注册组件  该组件只能在app.vue上使用*/
   BBB:MyStudent
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第三章、组件嵌套

在一般组件中引入另一个一般组件

3.1）Student组件

<template>
    <div>
        <p>
            姓名：{{stu.name}}<br/>
        </p>
        <p>
            年龄：{{stu.age}}<br/>
        </p>
        <p>
            性别：{{stu.sex}}<br/>
        </p>
    </div>
</template>

<script>
    export default {
        name: "StudentDemo",
        data(){
            return{
                stu:{
                    name:"小明",
                    age:18,
                    sex:"男"
                }
            }
        }
    }
</script>

<style scoped>

</style>

3.2）School组件

在School组件中引入Student组件

<template>
        <div>
            学校名称:{{school.name}}
            <MyStudent></MyStudent>
            <MyStudent></MyStudent>
            <hr/>
        </div>
</template>

<script>
    import MyStudent from "./Student"
    export default {
        name: "SchoolDemo",
        data(){
            return{
                school:{
                    name:"五道口职业技术学院"
                }
            }
        },
        components:{
            MyStudent
        }
    }
</script>

<style scoped>

</style>

3.3）App.vue中注册使用两个组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!--<HelloWorld msg="欢迎使用vue工程"></HelloWorld>-->
    <MySchool></MySchool>
    <MySchool></MySchool>
    <MySchool></MySchool>
    <MySchool></MySchool>
    <MySchool></MySchool>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

import MySchool from "./components/School"

export default {
  name: 'App',
  components: {
    //HelloWorld:HelloWorld//当局部注册的声明和组件名一致时  写一个即可
    //HelloWorld

    MySchool
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)