vue
2022-02-28 17:25:32 11 举报AI智能生成
vue脑图学习
作者其他创作
大纲/内容
框架概念
MVVM 响应式
数据<--驱动-->视图
hello world
语法
模板
v-xxx: 指令
v-bind:
v-bind:href="url"
Class 与 Style 绑定
v-once
v-if=“ ”条件渲染
v-for="todo in todos" 列表渲染
数组变动
v-on:
v-model="xxxx(data)" 表单控件
{{ msg }} 插值
过滤器
实例
计算属性 computed 基于普通属性
计算属性的函数就是 vm.reversedMessage 的 getter
vm.reversedMessage 依赖于 vm.message
性能好，缓存
getter(默认的) setter（需要手动添加）
watch
作用：响应数据的变化
render函数
jsx
函数化组件--- 无状态（没有 data），无实例（没有 this 上下文）
组件---vue实例
钩子函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
this 指的是这个实例 this.xxx(data，methods，computed，watch)
全局注册 局部注册
组件中的data必须是函数
props 父子通信·
验证
非父子组件通信
空vue实例 pub-sub模式
vuex
组件之间的组合
<slot>插槽 存在于子组件的模板中
非具名
具名
作用域插槽
组件之间的切换
<component v-bind:is="currentView"> 元素
<keep-alive> 包裹<component>组件，开启缓存
索引 ref
可加在组件或dom元素上
异步加载组件
.vue文件 单文件的组件
状态管理
Redux binding for Vue
vuex--借鉴了 Flux、Redux、和 The Elm Architecture
用一个全局单例模式管理状态（数据）
路由
vue-router库
简单切换
响应式原理
Object.defineProperty 把对象各属性转为 getter/setter
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性
必须在初始化实例前声明根级响应式属性，哪怕只是一个空值
Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
确保dom更新后再执行其他动作
vm.$nextTick(callback)
parent
v-on:increment="incrementTotal" 绑定自定义事件
child
this.$emit('increment')
0 条评论
下一页
