vue
2021-10-12 17:54:34 0 举报AI智能生成
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没数据）
created（data和methods初始化了）
beforMount（编译成虚拟dom）
mounted（渲染到真实页面）
更新状态
beforeUpdate（虚拟dom译成新的dom结构）
updated（将内存新的dom渲染到真实的页面上）
销毁
beforeDestory（实例上的属性，方法 还能用）
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
插槽 （组件标签中要带数据或者其它模块）
匿名
父组件：在应用子组件的标签内加任何内容
子组件：<slot></slot>
具名
父组件： 在调用子组件的标签里加入任意带标签的内容，且加入的标签加属性slot="插槽名"
子组件：<slot name="插槽名"></slot>
作用域
父组件：<template v-slot:default="slotProps">{{slotProps.userObj.name}}</template>
子组件：<slot>{{userObj.name}}</slot>
通讯
父传子
props
父组件： <son msg="zxx"></son> 表示就传zxx字符串 / <son :msg="zxx"></son> 表示动态绑定传zxx变量下的内容
子组件：props接收msg 在模板里使用msg
子传父
$emit
父组件：<son @SonData="showDataFn"></son>
子组件：this.$emit("SonData","要传给父组件的值放的位置")
0 条评论
下一页
