首页  思维导图  详情



 



vue

2021-10-12 17:54:34   0  举报





vue总结

vue

vue核心

生命周期

vue指令

模板推荐

作者其他创作

大纲/内容

核心概念

mvvm设计思想关注视图层分离

model 数据层都放在data里

view 视图层 html页面

ViewModel 控制器，将数据和视图建立联系vm  Vue的实例就是vm

核心思想

数据驱动

组件化

虚拟dom（模拟dom的javascript树）

核心内容

7个属性

el （解析源头）

data（放默认数据的地方）

methods (放方法函数的地方)

watch （监听data数据变化）

computed 

render

template （设置模板，替换页面元素）

8个方法（生命周期）

初始化

beforeCreate（data和methods没数据）<br>

created（data和methods初始化了）<br>

beforMount（编译成虚拟dom）

mounted（渲染到真实页面）

更新状态

beforeUpdate（虚拟dom译成新的dom结构）

updated（将内存新的dom渲染到真实的页面上）

销毁

beforeDestory（实例上的属性，方法还能用）<br>

destoryed（实例上的属性，方法不能用）

7个指令

v-if  其后布尔值是否渲染该元素

v-show 相当于display：none/block

v-else 紧跟在v-if / v-show 后

v-for  用法 v-for="item in arr"

v-bind  简写 :

v-on  简写  @

v-model （用于表单对象的双向绑定）

三大块

事件

v-on 绑定如：v-on:click ==> @click

事件函数参数

@click = handle(实参1，实参2，$event)

事件修饰符

event.preventDefault()

@click.stop

event.stopPropagation()

@click.prevent

插槽（组件标签中要带数据或者其它模块）

匿名

父组件：在应用子组件的标签内加任何内容<br>

子组件：<slot></slot> 

具名

父组件：在调用子组件的标签里加入任意带标签的内容，且加入的标签加属性slot="插槽名"

子组件：<slot name="插槽名"></slot>

作用域

父组件：<template v-slot:default="slotProps">{{slotProps.userObj.name}}</template>

子组件：<slot>{{userObj.name}}</slot><br>

通讯

父传子

props

父组件： <son msg="zxx"></son> 表示就传zxx字符串 / <son :msg="zxx"></son> 表示动态绑定传zxx变量下的内容

子组件：props接收msg  在模板里使用msg

子传父

$emit

父组件：<son @SonData="showDataFn"></son>

子组件：this.$emit("SonData","要传给父组件的值放的位置")

 Collect

Get Started

Vue

 Collect

Get Started

Vue3监听数据类型

 Collect

Get Started

Vue

 Collect

Get Started

Vue入门





0 条评论

下一页