web前端全栈0基础到精通（祺）vue 04

一、组件(component)

在前端，两大概念
一、模块
模块指的就是逻辑封装，一些共通的功能，你把它提取出来，封装到js中。你需要这个功能，你就引入js
es6的导入导出（导出的方式决定你引入的方法）
引入  import 变量名 from  '地址'
导出  export default 内容 
=========
导出  export const 变量
导入 import {变量}  from '地址'

二、组件
组件的指的是视图（静态）的封装，很多情况，静态页的结构很相似，我们可以提取出一个部分共通的代码。这部分代码片段，你想在哪里渲染，就在哪里调用

1.1概念

组件在vue中就是复用一个vue实例，它包含了vue实例中所有的属性和方法（除去el元素）。还有一个特殊的点，就是data！！！
我们会把共通的代码或者片段提取出来。哪里需要哪里调用

每一个组件都是独立的！！！！

在VUE中每一个应用程序（Vue实例化），它都可以看做成为一根组件树。

1.2 特点

可复用！！！

1.3创建方式

• 局部创建组件（常用）

components:{
	组件名称:{
	//这个配置对象与整个Vue实例是一致的，除了没有el元素
	}
}

//组件名称 最终当做标签元素去渲染了

• 全局创建组件

Vue.component('组件名称',{
	//配置对象
})

1.4 组件名称的命名规则

1、组件名称不能用已经存在的标签元素作为组件名称
2、不能起已经存在的标签名作为组件名称即使是大写也不行，因为html不区分大小
3、组件名称如果用的是驼峰命名法，那么在调用渲染的时候，必须加‘-’否则浏览器无法解析

1.5template属性

template属性有且只能有一个根标签！！！
如果template过于复杂，我们可以提取出来，放置到template标签中，通过id去区分不同的模板

1.6组件中的data

组件中的data为什么是一个函数？？？
每一个组件都是独立的，如果你的data是一个对象，它们会共用一个地址空间，如果某一个组件修改了其中一个值，其他拥有这个组件属性的地方都会发生变化。函数是一个独立作用域，数据内容就不会共享

1.7组件的嵌套

组件的嵌套！！！
在哪里注册，在哪里渲染！！！！
注意你的结构！！！！

---

Vue实例中的配置对象
el
data 
methods
watch
filters
computed
components

---

二、创建脚手架

2.1官网

https://cli.vuejs.org/zh/

2.2下载并安装脚手架

如果你的下载特别慢，那么重新设置你的npm来源。默认来源是国外的远程服务器。我们可以把它改成国内的淘宝镜像（并不需要用cnpm）还是npm命令
cmd执行以下即可。速度会嗖嗖的。。。
npm config set registry http://registry.npm.taobao.org

全局安装环境（一台电脑安装一次即可）
① 全局安装webpack环境
npm install(i) -g webpack
+ [email protected]
检测版本命令：webpack -v
（如果检查版本的时候让你安装webpack-cli，装不装都可以，但是不装就检索不到）

② 全局安装vue-cli脚手架
npm install(i) -g @vue/cli
+ @vue/[email protected]
检测版本命令：vue -V  或者 vue --version

======================================================
创建项目（不同的项目。你就应该单独创建）
在本地目录下，找一个空文件夹，下载
vue create 项目名称（mydemo）注意：不能用驼峰

=======================================================
启动项目的命令
npm run serve

注意：一定要进入项目目录，看见node_modules再启动

==========================================
如果没有node_modules 
通过 npm install(简写成i)

==================================================
打包命令    build(构建的意思)
npm run build

打包之后会生成一个dist文件夹。这个文件夹才会放置到服务器上。

2.3 SPA（single-page-application） 单页应用

前端目前所有的框架创建的项目都是单页应用

什么是单页应用，单页应用的特点是什么？
通过的理解，就是只有一个html页面。所有的视图都是通过组件，创建，嵌套，拼接而成
单页的案例：比较出名的是：https://es6.ruanyifeng.com/（es6的官网）
单页应用和多页应用的区别？
单页： 一个html
多页： 传统的项目（n个html）
单页： 
优点： 切换过程中，不会重新刷新。单页的切换靠的是路由，它在切换的过程中可以添加动画,减少服务器的压力
缺点: 首次加载过慢（因为一次性加载出所有的资源），出现空白页面。不利于SEO优化
多页：
优点：首次加载速度很快。更利于SEO的优化
缺点：切换页面的过程中，出现空白页面,切换过程中不能添加动画,增加服务器的压力

2.4项目目录

README.md 阅读指南
package.json 包管理配置文件
package-lock.json（当package一变化，就会出现这个）
babel.config.js 转译文件
.gitignore 用git命令上传文件的时候，要忽略内容的配置文件
src 
	是我们的代码主战场！！！！
	assets 静态资源文件夹 （js,css,图片。。。）
	components 组件文件夹
	App.vue 主组件（根组件）
	main.js 主的js配置文件
public 
	公有文件夹
	favicon.ico 收藏夹小图标
	index.html 唯一的html文件
node_modules 依赖包

2.5 初始化目录结构

一、删除components下面的helloworld.vue
二、清空app.vue





三、执行前两部，就实现了基本视图的显示

2.6 组件的嵌套

2.7 如何引入外部样式

2.8 scoped属性

scoped属性的意思是当前组件样式在当前有效
每一个组件都要添加一个scoped属性

2.9 全局引入js和css

main.js

//引入全局样式
import './assets/css/reset.css'

2.10 如何在vue组件的data数据中引入静态资源图片

一、通过 require
比如：img:require('../assets/images/1.webp')
二、通过import
import img1 from '../assets/images/1.webp'
img:img1

---

---

错误集锦

Do not use built-in or reserved HTML elements as component id: div
组件名称不能用已经存在的标签元素作为组件名称

 The "data" option should be a function that returns a per-instance value in component definitions.
 在组件中data必须是一个函数

面试题

说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI （视图template的内容）与用户的交互，避免页面的重新加载。
优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

单页应用和多页应用的区别

单页面应用（SinglePage Web Application，SPA）多页面应用（MultiPage Application，MPA）
组成一个外壳页面和多个页面片段组成多个完整页面构成资源共用(css,js)共用，只需在外壳部分加载不共用，每个页面都需要加载

刷新方式：
页面局部刷新或更改
整页刷新

url 模式：
a.com/#/pageone a.com/#/pagetwo
a.com/pageone.html a.com/pagetwo.html

用户体验：
页面片段间的切换快，用户体验良好
页面切换加载缓慢，流畅度不够，用户体验比较差

转场动画:
容易实现
无法实现

数据传递:
容易
依赖 url传参、或者cookie 、localStorage等
搜索引擎优化(SEO)
需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化
实现方法简易

试用范围:
高要求的体验度、追求界面流畅的应用
适用于追求高度支持搜索引擎的应用

开发成本：
较高，常需借助专业的框架
较低 ，但页面重复代码多

维护成本：
相对容易
相对复杂

组件中 data 为什么是一个函数？

为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？
因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。