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
+ webpack@5.31.0
检测版本命令：webpack -v
（如果检查版本的时候让你安装webpack-cli，装不装都可以，但是不装就检索不到）② 全局安装vue-cli脚手架
npm install(i) -g @vue/cli
+ @vue/cli@4.5.12
检测版本命令：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<template><div><h1>主组件</h1></div>
</template>
<script>
export default {}
</script>
<style ></style>三、执行前两部，就实现了基本视图的显示
2.6 组件的嵌套
<template><div><组件名称></组件名称></div>
</template>
<script>import 组件名称 from '地址'
export default {components:{组件名称:组件名称,//key和value一致，可以简写组件名称}
}
</script>
2.7 如何引入外部样式
<style >通过 @import引入
</style>
2.8 scoped属性
scoped属性的意思是当前组件样式在当前有效
每一个组件都要添加一个scoped属性<style scoped></style>
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 的实例，是不会被复用的，因此不存在引用对象的问题。
web前端全栈0基础到精通（祺）vue 04相关推荐
- web前端全栈0基础到精通（祺）01
前端的概述 web的发展史 web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易 web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博 web3.0 人工智能 复杂的页面功 ...
- web前端全栈0基础到精通（祺）vue 02
一.localStorage 和 sessionStorage的区别 相同点: 都可以实现存储. 它们的大小都是5MB左右. 它们的存储方式都必须以字符串进行存储!!!! 它们的语法都是相同.存值: ...
- web前端全栈0基础到精通（祺）08
表单 表单标签 注册和登录 目的:收集用户信息,能够输入内容 input标签 text 文本输入类型 <input type="text" name="userna ...
- web前端全栈0基础到精通（祺）js 02
数据类型 分类. 基本数据类型: number string boolean null undefined 复杂/复合/引用数据类型: object array function 检验数据类型 语法: ...
- web前端全栈0基础到精通（祺）11
HTML5基础 HTML5中新增的布局标签 html 1990 html4.0.1 1997 html5 2008 稳定版 2012年 新增的结构标签 (更加语义化) header标签 <hea ...
- web前端全栈0基础到精通（祺）vue 01
一.vue的基本知识 1.1vue 的官网 https://cn.vuejs.org/ 1.2概念 渐进式的JavaScript框架????渐进式... 自底向上,逐渐增强.vue.js它本身就是一个 ...
- web前端全栈0基础到精通（祺）07
项目切图规范 PS常用工具 移动工具 移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具 快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具 放大镜工具可 ...
- web前端全栈0基础到精通（祺）03
盒模型 基础选择器 通配符选择器 * {width: 200px;height: 200px;background-color: yellow; } 标签选择器 div {width: 200px;h ...
- web前端全栈0基础到精通（祺）js 10
表单 快速获取表单元素 \1. 需要先获取表单 form \2. 快速获取表单元素 form.name值 var form = document.getElementsByTagName('form' ...
最新文章
- JavaScript 页面间传值
- 未来脑机接口的电极”衣服”可能长这样，你会喜欢吗？
- （Mark）操作系统原理
- 1.2 文本域(含可编辑表格实现）
- MySQL数据类型中的二进制类型有_在MySQL数据类型中,常用的数据类型有()。A.()数值类型()B.()字符串类型()C.()日期时间类型()D.()二进制类型...
- 6410裸机开发教程下载
- 解决webpack5打包html中图片后图片无法显示问题
- 动易 dw css不对,动易模板制作示.doc
- 用户故事 | 验收标准
- 使用python做一个翻译工具
- 又是一年毕业季，你拿什么打动面试官？
- linux中swp是什么文件,Linux中.swp 文件的产生与解决方法
- 发送端口25，465，587端口
- php语言开始和结束分别为,PHP语言参考
- [JavaScript学习-01]JavaScript实现九宫格抽奖
- 杜比dss200服务器系统升级包434,杜比数字影院系统DSS200软件升级指南(初稿).pdf
- 当电脑80端口被占用怎么办
- 【数据库1】mysql，DDL/DML，DQL，外键约束，多表/子查询，事务，登陆，连接池，jdbc，redis，crontab，ftp，oracle，数据交换/存储/收集
- 【元胞自动机】基于matlab元胞自动机3D森林火灾模型【含Matlab源码 656期】
- [附源码]计算机毕业设计Python高校体育场馆管理系统(程序+源码+LW文档)