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

友情提醒
第一章、vue的组件
- 1.1）什么是SPA应用
- 1.2）vue的组件简介
- 1.3）vue工程中的main.js文件
第二章、Vue组件的使用
- 2.1）一般组件的自定义
- 2.2）注册组件：全局注册和局部注册
- - 2.2.1）全局注册：靠Vue.component('组件名',组件)
  - 2.2.2）局部注册（常用）：靠new Vue的时候传入components选项
- 2.3）使用组件
第三章、组件嵌套
- 3.1）Student组件
- 3.2）School组件
- 3.3）App.vue中注册使用两个组件

友情提醒

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

第一章、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组件对象  简称vcconst 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//当局部注册的声明和组件名一致时  写一个即可//HelloWorldMySchool}
}
</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>