标签:text com 切换 而不是 模块化 rev 自定义指令 博客 script
Vue
尤雨溪
渐进式的JAVAscript框架
MVVM框架
M:model层 数据的增删改查
V:view层 视图 类似与HTML一样的模板
VM:viewModel model和view的一个映射层
优点:
数据驱动视图
回流和重绘
简单的来说页面的排版布局发生了改变就是回流
简单来说对一个元素进行样式操作不会导致页面布局发生改变重绘
回流一定会发生重绘
重绘不一定发生回流
vue常用的指令
v-text {{}}
v-html
v-bind :
v-on @ .stop .prev .enter .keyCode值 $event
v-model form表单 .number
Object.defineProperty
Proxy
v-for
v-show
v-if
区别:
前者操作元素的display属性 初次渲染的开销较大
后者操作元素的创建和销毁 开销较大
使用场景:
v-else-if
v-else
v-pre
v-cloak
v-once
v-slot 插槽
自定义指令
全局注册
Vue.directive()
局部注册
VUE({
})
过滤器
Vue.filter()
组件
Vue.component()
watch
属性监听
基于Vue的依赖,当依赖的属性发生了改变的时候,那么就会自动触发相对应的方法进行数据的处理
如果监听对象的时候只会监听对的引用地址是否发生了改变 具体的值是不会进行监听的
如果需要监听对象值的变化 handler函数 deep:true
无法监听数据(特殊情况)的变化 this.arr[0] = 200; this.arr.length = 0
在监听的函数中会接收到2个值 一个新值和一个旧值
$set() 给一个响应式对应添加一个响应式属性
特点:
一个数据影响多个数据
computed
属性计算
基于Vue的依赖,当依赖的属性发生了改变的时候,那么就会自动触发相对应的方法进行数据的处理
数据的缓存
特点
一个数据受多个数据的影响
生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated 活跃状态
deactivated 缓存状态
动态组件
通过同一个挂载点进行动态切换组件的变化
<component></coponent> is
<keep-alive></keep-alive> (***)
属性:
include
exclude
max
Vue动画
当前的元素必须遵循2个特点
1、必须经历显示隐藏
2、需要执行动画的元素 外层必须加一个<tranisition></tranisition>
name:动画的名称
name-enter
name-enter-active
name-enter-to
name-leave
name-leave-active
name-leave-to
<tranisition
enter-class
enter-active-class
enter-to-class
。。。
></tranisition>
组件传值
父传子
自定义属性
props:[] {}
type default required
子传父
通过自定义方法 触发通过this.$emit
通过插槽作用域
非父子
公共的vue实例对象
EventBus
手动封装$on $emit $off 事件订阅
Vuex
为了使组件更加的灵活
data为什么在组件中是一个函数而不是一个对象?
什么是单项数据流?
插槽
slot
默认名字是default
如果需要命令的时候 v-slot:名称
作用域插槽:
v-slot:名称 = "接收的值"
<Banner>
<template v-slot>
<p>111</p>
</template>
</Banner>
vue实例身上的方法
$mount()
$destroy()
$foreUpdate
$on
$emit
$off
$once
1、什么叫回流和重绘
2、虚拟DOM (虚拟DOM就是真实的JS对象,操作内存中的JS对象比操作真实的DOM速度要快)
3、模块化
4、虚拟DOM的key值有什么作用
5、Object.defineProperty
6、单页面开发与多页面开发的优缺点
博客
深入响应式原理
单文件组件?
查漏补缺
<keep-alive></keep-alive>
实例身上的方法
$extend
$mixin
路由
Vuex
axios
跨域
移动端
标签:text com 切换 而不是 模块化 rev 自定义指令 博客 script
原文地址:https://www.cnblogs.com/PeiGaGa/p/11032653.html