Vue3 快速入门

Alyson
174 阅读3分钟

Vue 基础语法入门 Demo

计数器

image.png

字符串反转

image.png

隐藏/显示

image.png

TodoList

image.png

image.png

组件

image.png

image.png

image.png

基础知识讲解

vue 实例 & vue 组件

image.png

vue 生命周期函数

image.png

image.png image.png

模版语法

  • v-html
  • v-text
  • v-bind:tit="tit" 等价于 :tit="tit" :[tit]="tit" //属性名可以变化
  • v-on:click 等价于 @click @[event]="xx" //事件名称也可以变化
    • 阻止默认行为 .prevent
  • v-once 变量只使用一次
  • v-if

data & methods & computed & watcher

计算属性：效率更高，有缓存 （ 比 methods ） image.png

监听器：异步推荐使用 watch

image.png

watch 同步的话等价于 computed ，推荐使用 computed，因为更加简洁 image.png

样式绑定语法

class 样式

image.png

image.png

image.png

image.png

image.png

行内样式

image.png

image.png

image.png

vue 条件渲染

  • v-if dom 不存在
  • v-show display:none
  • v-else
  • v-else-if

vue 列表渲染

  • v-for 优化性能： 加一个 key

image.png

image.png

image.png

image.png

image.png

vue 事件

  • 绑定 image.png

image.png

  • 修饰符
    • 事件修饰符号
      • prevent
      • stop 停止冒泡
      • capture 把事件变成捕获模式
      • once 事件只执行一次
      • passive 提升滚动性能
      • self
    • 按键修饰符号
      • enter
      • tab
      • delete
      • esc
      • up
      • down
      • left
      • right
    • 鼠标修饰符
      • left
      • right
      • middle
    • 精确修饰符号
      • exact eg: @click.ctrl.exact

image.png

双向绑定

checkbox

image.png

image.png

image.png

radio

image.png

select

image.png

image.png

image.png

image.png

v-model 修饰符

lazy number trim

Vue 组件

image.png

全局组件

image.png

局部组件

image.png

传值

类型校验

image.png image.png

传入属性

image.png

传入函数

image.png

巧妙用法

image.png

image.png

单项数据流

image.png

image.png

Non Props

image.png image.png

image.png

image.png

image.png

父子组件通信

双向绑定 props & emit

image.png

简写上面的代码

image.png

image.png

高级写法

多个数据建立关系

image.png

自定义修饰符

image.png

image.png

子组件传值给父组件

image.png

父子组件通信校验

校验值

image.png

校验事件

image.png

插槽

父模版数据传入到子模版中

image.png

image.png

image.png

默认插槽

image.png

具名插槽

image.png image.png

作用域插槽（子组件传值给父组件）

image.png

image.png

动态组件 & 异步组件

非动态组件

image.png

image.png

动态组件

image.png

缓存

image.png

异步组件

image.png image.png

基础知识查漏补缺

ref

获取 DOM 节点

image.png

父组件调用子组件的方法

image.png

inject/provide

层层传递

image.png

inject/provide 一次性不能响应式变化。孙子组件只拿一次

image.png

Vue 动画

过渡

方式一

image.png

image.png

方式二

image.png

动画

image.png

image.png

vue 单元素、单组件的入场出场动画

取消 css 动画

image.png

css 过渡

image.png

image.png

image.png

css 动画

image.png

css 过渡和动画

image.png

过渡和动画，以过渡的时间为准

image.png

不管是过度还是动画时间固定

image.png

image.png

css 动画样式命名

image.png

image.png

样式命名的用法

image.png image.png

配合使用 animate.css

image.png

js 动画

image.png

image.png image.png

vue 多个单元素、单组件的入场出场方式

先退出后进入

image.png

初次显示的时候，显示动画效果

image.png

列表动画

image.png

image.png image.png

状态动画

image.png

image.png

mixin 混入

局部mixin

组件 data 优先级高于mixin data 优先级

image.png

生命周期函数

image.png image.png

组件 methods 优先级高于mixin methods 优先级

自定义属性，组件中的属性高于mixin 中的属性优先级

image.png

修改自定义属性的优先级

image.png

对数据做校验的插件（全局 mixin ）

image.png

image.png

image.png

Vue 自定义指令

全局 focus

image.png

局部 focus

image.png

指令传参

image.png

数据 data

image.png

image.png

等价于 updated 和 mounted image.png

指令传参的巧妙使用

image.png

传松门 Teleport

蒙层，将蒙层放到 body 上

image.png

image.png

Teleport 蒙层，将元素放在其它元素下面

image.png

image.png

render 函数

template -> render-> h->虚拟 DOM -> 真实 DOM -> 展示到页面上

image.png

更优雅的方法

image.png

image.png

h

image.png

插件的定义与使用

image.png

image.png

插件

image.png

image.png

插件使用

image.png

image.png

校验插件

image.png image.png

image.png

Composition API

setup

image.png

context

image.png image.png

ref reactive readonly

ref 处理基础类型的数据

image.png

reactive 处理非基础类型的数据

image.png

image.png

readonly 只读

image.png

toRefs

image.png

image.png

toRef(可以解构出来没有的属性)

image.png

TodoList compostion API

image.png

image.png

TodoList 代码优化

image.png

image.png

computed

image.png

image.png

image.png

watch & watchEffect

基础类型

image.png

引用类型

image.png

监听多个值

image.png

image.png

image.png

image.png

watchEffect （ajax、异步）

image.png

image.png

生命周期

image.png

image.png

image.png

Provide & Inject

image.png

子组件不能修改父组件的代码

image.png image.png

ref 获取真实的 DOM 元素节点

image.png

TODO

this 指向问题 （箭头函数）

参考：Vue3+系统入门与项目实战 (慕课网)

参考：Vue+Ts 快速上手

avatar
文章
阅读
粉丝