vue
2021-10-12 17:54:34 0 举报AI智能生成
登录查看完整内容
vue总结
作者其他创作
大纲/内容
model 数据层都放在data里
view 视图层 html页面
ViewModel 控制器，将数据和视图建立联系vm Vue的实例就是vm
mvvm设计思想 关注视图层分离
核心概念
数据驱动
虚拟dom（模拟dom的javascript树）
组件化
核心思想
el （解析源头）
data（放默认数据的地方）
methods (放方法函数的地方)
watch （监听data数据变化）
computed
render
template （设置模板，替换页面元素）
7个属性
beforeCreate（data和methods没数据）
created（data和methods初始化了）
beforMount（编译成虚拟dom）
mounted（渲染到真实页面）
初始化
beforeUpdate（虚拟dom译成新的dom结构）
updated（将内存新的dom渲染到真实的页面上）
更新状态
beforeDestory（实例上的属性，方法 还能用）
destoryed（实例上的属性，方法 不能用）
销毁
8个方法（生命周期）
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 （用于表单对象的双向绑定）
7个指令
核心内容
v-on 绑定如：v-on:click ==> @click
@click = handle(实参1，实参2，$event)
事件函数参数
@click.stop
event.preventDefault()
@click.prevent
event.stopPropagation()
事件修饰符
事件
父组件：在应用子组件的标签内加任何内容
子组件：<slot></slot>
匿名
父组件： 在调用子组件的标签里加入任意带标签的内容，且加入的标签加属性slot=\"插槽名\"
子组件：<slot name=\"插槽名\"></slot>
具名
父组件：<template v-slot:default=\"slotProps\">{{slotProps.userObj.name}}</template>
子组件：<slot>{{userObj.name}}</slot>
作用域
插槽 （组件标签中要带数据或者其它模块）
父组件： <son msg=\"zxx\"></son> 表示就传zxx字符串 / <son :msg=\"zxx\"></son> 表示动态绑定传zxx变量下的内容
子组件：props接收msg 在模板里使用msg
props
父传子
父组件：<son @SonData=\"showDataFn\"></son>
子组件：this.$emit(\"SonData\
$emit
子传父
通讯
三大块
vue
0 条评论
回复 删除
下一页
