程序人生►WEB前端

Vue.js基础

基本指令

v-clock解决闪烁

image-20200904102048570

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

v-text

v-model

事件:v-on:click @click

$event 事件对象

常用特性

表单操作

设置value 绑定 通过js提交

表单修饰符:

number：转化为数值
trim：去掉开始和结尾的空格
lazy：将input事件切换为change事件

1
<input v-model.number="age"type="number">

自定义指令

image-20200922123511555

image-20200922124229124

image-20200922124412333

计算属性

计算属性与方法的区别:
计算属性是基于它们的依赖进行缓存的
方法不存在缓存

Computed 内的方法

过滤器

过滤器的作用是什么？
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

image-20200922132910524

image-20200922133111711

image-20200922133219170

侦听器

应用场景:数据变化时执行异步或开销较大的操作

image-20200922131906563

生命周期

image-20200922133703829

组件化开发

注册组件

image-20200924103309449

image-20200927160902802

:data是一个函数

image-20200924104215945

如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件

值传递

image-20200924105239162

image-20200924105444631

props属性值类型
字符串 String
数值 Number
布尔值 Boolean
数组 Array
对象 Objects

事件定义传递信息

image-20200924110155323

image-20200924110341351

非父子组件间传递

image-20200924110812414

插槽slot

ps:必须写在子标签内

image-20200924111822809

位于字组件的模板中

image-20200924111903310

image-20200924112108074

template 包裹多条

作用域插槽

父组件对子组件加工处理 父组件定义样式

image-20200925102255391

前后端交互

异步请求

image-20200925112340831

image-20200925112556918

image-20200925112617296

image-20200925112636604

axiox

image-20200925113457295

image-20200925113532262

image-20200925113641561

image-20200925113849542

image-20200925114007818

async/await

image-20200927104729815

image-20200927105329443

路由

component Vue自定义的，就是用于组件占位

基本使用

image-20200926102436888

image-20200926102708213

image-20200926103843311

image-20200926103953117

重定向

image-20200926111053150

嵌套路由

image-20200926111434238

image-20200926111533942

image-20200926111550754

动态路由匹配

image-20200926112727088

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

image-20200926113009413

​ image-20200926113157523

当props为对象参数时,:id 无法被访问

image-20200926113411866

动态静态参数结合

命名路由

image-20200926113615195

编程式导航

image-20200926113750469

image-20200926114054307

image-20200926114030138

前端工程化

模块化规范

image-20200927161719129

image-20200927162355949

image-20200927162538731

image-20200927162643183

webpack

基本使用

image-20200927162908719

image-20200927163155921

image-20200927163524589

image-20200927164021869)image-20200927165216831

image-20200927165424762

image-20200927170245648

loader加载器

image-20200927170442580

image-20200927170525356

image-20200927170842832

​ use数组中指定的1oader顺序是固定的
​ 多个1oader的调用顺序是：从后往前调用

image-20200927171154171

image-20200927171221778

image-20200927171515593

image-20200927171801639

image-20200927172052526

Vue单文件组件

image-20200927172317952

image-20200927172409974

image-20200927173214593

image-20200927173949695

打包发布

image-20200927174656710

Vue脚手架

image-20200927174950800

image-20200927175119855

image-20200927180301923

image-20200927182426354

image-20200927182450508

image-20200927182513277

Vue扩展 数组api

image-20200923104140427

image-20200923104940716

Vue3

setup

ref和reactive