文章目录

一、组件
- 1-1 传统方式和组件的对比
- 1-2 模块和组件概念
- - 1-2-1 模块+模块化
  - 1-2-2 组件化
- 1-3 组件
- - 1-3-1 非单文件组件
  - - 1-3-1-1 组件的使用
    - 1-3-1-2 组件嵌套
  - 1-3-2 单文件组件
  - - 1-3-2-1 App.vue
    - 1-3-2-2 index.html
    - 1-3-2-1 main.js
    - 1-3-2-1 School.vue
    - 1-3-2-1 Student2vue
  - 1-3-3 组件的几个注意点
  - 1-3-4 VueComponent

一、组件

1-1 传统方式和组件的对比

传统方式：
- 依赖关系混乱，不好维护
- 代码复用率不高

1-2 模块和组件概念

1-2-1 模块+模块化

模块：向外提供特定功能的js程序
模块化：当应用中的js都以模块来编写时，那这个应用就是一个模块化的应用

1-2-2 组件化

组件的定义：实现应用中局部功能代码和资源的集合
复用编码，简化项目编码，提高运行效率

1-3 组件

1-3-1 非单文件组件

1-3-1-1 组件的使用

非单文件组件：一个文件中包含有n个组件
Vue中使用组件的三大步骤：
- 创建组件
- 注册组件
- 使用组件
如何定义一个组件：
- 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别：
  - el不要写，最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
  - data必须写成函数，避免组件被复用时，数据存在引用关系
- 使用template可以配置组件结构
如何注册组件
- 局部注册： new Vue传入components选项
- 全局注册： Vue.cpmponent('组件名',组件)
编写组件标签 : <school></school>
基本使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body><div id="root"><school></school><hr><student></student></div><div id="root2"><student2></student2></div><script>Vue.config.produtionTip = false// 创建school组件 const school = Vue.extend({template: `<h2>学校姓名：</h2>`,data() {return {}}})// 创建studentconst student = Vue.extend({template: `<h2>学生姓名</h2>`})const student2 = Vue.extend({template: `<h2>safafad</h2>`})Vue.component('student2', student2)new Vue({el: '#root',components: {school,student}})new Vue({el: '#root2'})</script>
</body></html>

1-3-1-2 组件嵌套

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><!-- 准备好一个容器 --><div id="root"><app></app></div></body>
<script>Vue.config.productionTip = false;const student = Vue.extend({name: 'student',template: `<div><h2>学生姓名： {{name}}</h2>  <h2>学生年龄： {{age}}</h2></div>`,data() {return {name: '牛婷婷',age: 15}}})// 创建school组件const school = Vue.extend({name: 'school',template: `<div><h2>学校姓名： {{schoolName}}</h2>  <h2>地址： {{address}}</h2><student></student></div>`,data() {return {schoolName: '台历',address: '金钟'}},components: {student}})// 创建hello组件const helloo = Vue.extend({name: 'hello',template: `<div><h2>Hello</h2></div>`})const app = Vue.extend({name: 'app',template: `<school></school><helloo></helloo>`,components: {school,helloo}})// 创建vmnew Vue({el: '#root',// 第二步：注册组件（局部注册）components: {app}})
</script></html>

1-3-2 单文件组件

单文件组件：一个文件中只包含有1个组件

1-3-2-1 App.vue

<template><div><School></School><Student></Student></div>
</template><script>
import School from './School'import Student from './Student'export default {name: 'App',components: {School,Student}
}
</script><style></style>

1-3-2-2 index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="root"><App></App></div><div id="root"></div><script src="./main.js"></script>
</body></html>

1-3-2-1 main.js

import App from './App.veu'new Vue({el: '#root',components: { App }
})

1-3-2-1 School.vue

<template><div class="demo"><h2>学校姓名： {{schoolName}}</h2>  <h2>地址： {{address}}</h2></div>
</template><script>
// export default {// }export default ({name:'school',data() {return {schoolName: '台历',address: '金钟'}}})</script><style></style>

1-3-2-1 Student2vue

<template><div class="demo"><h2>学校姓名： {{name}}</h2>  <h2>地址： {{age}}</h2></div>
</template><script>export default({name:'school',data() {return {name: '牛婷婷',age: 18 }}})</script><style></style>

1-3-3 组件的几个注意点

1. 关于组件名：
- 一个单词组成
  - 第一种写法（首字母小写）：school
  - 第二种写法（首字母大写）： School
- 多个单词组成：
  - 第一种写法(kebab-case命名) ： ‘my-schoool’
  - CamelCase命名：MySchool(脚手架下写)
- 备注：
  - 组件名尽可能回避HTML中已有的元素名称
  - 可以使用name配置项指定组件在开发者中呈现的名字
关于组件标签：
- 一：<school></school>
- 二：<school/>
- 不用使用脚手架时
···

1-3-4 VueComponent

关于 VueComponent:
- school组件本质上一个名为VueComponent的构造函数，并不是程序员定义的，是Vue.extend生成的
- Vue解析<school/>会帮我们创建school组件的实例对象，即Vue帮我们执行的: new VueComponent(options)
- 每次调用Vue.extend,返回的都是一个全新的VueComponent
关于this指向:
- 组件配置中： data函数、methods中的函数、computed中的函数，this均是【VueComponent】
- .new Vue(options)配置中： data函数、methods中的函数、watch中的函数,它们的this均是【Vue】
- 一个重要的内置关系： VueComponent.prototype.__proto__ == Vue.prototype
- 让组件实例对象（vc）可以访问到Vue原型上的属性、方法

【Vue基础七】--- 组件和模块概念相关推荐

Vue基础知识+组件化开发+模块化开发总结
三.内容: 一.MVVM View层视图层,我们前端开发时候的DOM层主要就是给用户展示各种信息 Model层数据层:可能是我们固定的思数据,更多的是来自我们的服务器,在网路上请求下来的数据 V ...
vue基础整理-组件
1--组件可以理解为页面的一部分,其具有独立的逻辑及功能或界面,同时又能与其他部分进行相应地融合,变成完整的应用.页面可以由这样一个个的组件构成,如导航栏.列表项.弹窗.侧边栏.下拉框.多选框等.页 ...
【VUE基础】组件化高级
1. slot-插槽的基本使用我们在使用组件的时候有时候希望,在组件内部定制化内容,例如京东这样. 这两个都是导航栏,组件的思想是可以复用的,把这个导航栏看做一个组件. 这个组件都可以分成三个部 ...
学习VUE第七天课程（VUE之组件（基础、分类、命名））
VUE之组件(基础.分类.命名) 组件( Component )是 Vue.js 最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 接下来会由浅入深地学习组件的全部内容,并通过几个案例 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
vue快速修改数组的某个值_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
vue warning如何去掉_详解 vue 组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 ...
vue传递数组对象_详解vue组件三大核心概念
前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：组件详解+项目说明...
缘起新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

【Vue基础七】--- 组件和模块概念

文章目录

一、组件

1-1 传统方式和组件的对比

1-2 模块和组件概念

1-2-1 模块+模块化

1-2-2 组件化

1-3 组件

1-3-1 非单文件组件

1-3-1-1 组件的使用

1-3-1-2 组件嵌套

1-3-2 单文件组件

1-3-2-1 App.vue

1-3-2-2 index.html

1-3-2-1 main.js

1-3-2-1 School.vue

1-3-2-1 Student2vue

1-3-3 组件的几个注意点

1-3-4 VueComponent

【Vue基础七】--- 组件和模块概念相关推荐

最新文章

热门文章

【Vue基础七】--- 组件和模块概念

文章目录

一、 组件

1-1 传统方式和组件的对比

1-2 模块和组件概念

1-2-1 模块+模块化

1-2-2 组件化

1-3 组件

1-3-1 非单文件组件

1-3-1-1 组件的使用

1-3-1-2 组件嵌套

1-3-2 单文件组件

1-3-2-1 App.vue

1-3-2-2 index.html

1-3-2-1 main.js

1-3-2-1 School.vue

1-3-2-1 Student2vue

1-3-3 组件的几个注意点

1-3-4 VueComponent

【Vue基础七】--- 组件和模块概念相关推荐

最新文章

热门文章

一、组件