VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件

复习

1.自定义指令: 高级操作

(1)配置项: directives

(2)所以v-开头的被认为是指令, 可以快速操作DOM元素

(3)用法有两种

  • 指令名: 函数: 在DOM元素 创建时(内存阶段) 和 更新时 触发
  • 指令名: 对象类型: 可以精确配置在哪个周期触发
  • bind: 内存阶段, 创建时触发
  • inserted: 页面阶段, 元素显示到页面上之后触发

2.网络请求

  • 使用第三方的axios模块, 通过 Promise 封装而来, 解决了回调地狱问题
  • 使用前必须安装: npm i axios vue-axios
  • 使用时: axios.get(接口地址).then(res=>{})
  • 后续: 把请求的数据存储在本地, 使用前必须用v-if判断存在再用

3.过滤器

  • {{ 值 | 过滤器 | 过滤器(参数, 参数) }}
  • 配置项: filters
  • 作用: 可以把{{}}中的值进行修改, 返回修改后的值

一、组件

 组件:组成页面的零件

  • 模块化思想的具体表现:当一个页面特别大的时候,应该按照照业务功能进行模块划分. 拆分成多个独立的模块, 分别开发
  • 团队合作时便于分工
  • 维护项目时, 便于修改.

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第1张图片存放组件的位置

组件的命名规范:大驼峰(多个单词首字母都大写)命名法+推荐至少两个单词(因为HTML的自带标签都是一个单词,我们的组件两个单词就能避免重复)。推荐给根div一个class,名称是文件名的蛇形命名法格式

例:大驼峰MyHeader ->蛇形 my-header

二、组件基础

 大型网站: 分 头 身体 脚,写在外部引入到App.vue中,

components是专门放组件的文件夹

引入有三个步骤:

第一个步骤:在script里先引入,书写语句:import  文件名 from ' 路径 '

有旧语法: const MyHeader = require("./components/MyHeader"),

路径如果有下有波浪线,可能情况是:

1. 路径错误
2. vscode卡了, 重启
3. 可能安装了什么插件, 具体挨个禁用
4. 忍着

第二个步骤: 注册: 语法糖: {属性名:变量名} 一样则可以合写 {MyHeader : MyHeader},放在配置项components里,属性名你设定的标签名, 可以自定义. 属性名不允许有 - , 必须放引号里。

第三个步骤:在html里把对应的标签加上去

 作者提供了多种写法, 挑你喜欢的

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第2张图片

完整版:

 
  

 完成引入后,可以给整个标签添加样式:

  • 我怎么知道组件MyHeader的样式名是 my-header呢??----开发要守规矩 -- 组件制作时, 一定要给根div 一个class
  • 标签选择器只支持 HTML的系统标签,例如 div span..
  • 组件: 只能依赖 class.    我们故意把class名 起的和标签名一样. 人为制造巧合. 便于使用.   使用时必须加.  是class选择器

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第3张图片VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第4张图片

 vscode提供了自动引入辅助操作:

在准备好组件之后,直接书写标签名,系统会有提示,选中要引入的组件后回车,会自动生成引入和注册步骤的代码,但是,小概率会失败,就需要手动书写三步骤 。

三、组件生命周期

组件由两部分组成: 数据/函数 和 DOM元素

create相关的: 数据和函数

mount相关的: DOM元素

新的选项(每个周期都是一个单独的配置项):

人的生命周期: 备孕->怀孕10月->待产->出生->开始学习->学习完毕->快死了->死了
组件的一生: 开始创建(内存)->创建完毕(内存)->开始显示到页面->显示完毕->开始更新->更新完毕->开始销毁 -> 销毁完毕
每个生命周期触发时, 会自动调用 固定名称的方法

面试题几乎必考, 属于基础知识, 必须背下来

生命周期钩子函数: 钩子 -> 鱼钩 : 有鱼咬钩会自动触发
当某个生命周期触发时, 函数会自动触发

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第5张图片 钩子函数: 由系统自动触发的函数, 都叫钩子函数
mounted: 挂载/安装 周期. 组件显示到页面上之后会自动触发。(mounted钩子函数最常用)

四、全局引入axios

如果是大型的项目, 一定有很多个组件. 如果在每个组件中单独引入axios 较为繁琐,就在main.js中实现全局引入,因为在main.js中, 把 axios 放在Vue的原型里。

核心思想:注入到vue原型, 在.vue文件中, 用this就可以调用

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第6张图片
1. 简单粗暴修改原型, 使用时没有代码提示


2. 优雅: 依赖axios提供的 vue-axios模块, 使用时有代码提示

请确保已安装此模块 npm i vue-axios

 VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第7张图片

使用axios,语法与局部不同,需要用this调用

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第8张图片

五、组件传参

同函数传参: 先声明形参 再传递实参。

就是在组件页声明形参,需要用到一个新的配置项props(配置组件的形参,或称为组件的属性)

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第9张图片

 在App.vue把实参传递回来,写在标签里面,有冒号的传递的是JS代码,没有冒号传的是文本

 六、事件监听

配置项-监听器: 可以监听任意属性的变化

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第10张图片

七、插槽

特殊的组件功能 : 插槽: 一个用来做布局的组件, 只负责布局 不负责具体内容 

双标签写法, 其内容会替换掉组件中的占位符

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第11张图片

 VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第12张图片

 八、外部css文件

当采用组件化开发后,就必须考虑css的复用性问题

VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第13张图片

 VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第14张图片

 VUE day_04(7.20)组件、axios的全局引入、事件监听、插槽、外部css文件_第15张图片

你可能感兴趣的:(VUE(7.15-7.28),前端)