关于Vue是个人都知道的那些事

809 阅读1分钟

new Vue(options)

返回值vm**(viewModel)** el:不能挂载到html或者body上 =>querySelector data 数据值对于对象来说要先声明,否则新增属性无效(可以基于vm.$set处理) vm.arr[0]=xxx 改变数组中的某一项视图不会渲染,需要基于内置的方法,例如:push… 对象或者数组可以整体替换值实现数据变视图也变 …

mustache([ˈmʌstæʃ]) 小胡子语法

value JS表达式 常用的指令(directive)

v-model v-html / v-text:取消小胡子语法刷新中的闪烁问题 v-bind(缩写 :) v-once v-if 和 v-show v-for

for in循环 & for of循环 遍历数据类型的范围

Symbol.iteratoer:Array、Set、Map、String、Arguments、NodeList… v-on 事件绑定 v-on:xxx methods :和data类似,都会把方法挂载到vm实例上(this都是当前实例)

directive自定义指令

Vue.directive([指令名,省略v-], function(el,bindings,vnode){} el当前元素

bindings包含很多信息

name:指令名,不包括 v- 前缀

value:指令的绑定值

oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用

expression:字符串形式的指令表达式

arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”

modifiers:包含修饰符的对象。例如:my-directive.foo.bar 中,修饰符对象 { foo: true, bar: true }

vnode虚拟DOM

ctx = vnode.context 获取当前元素所在的上下文

ctx[bindings.expression]=xxx 获取上下文中的表达式变量,并且把指定的值赋值给它

钩子函数

bind:当用户绑定指令时生效(只调一次)

update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前(一个函数的方式就是把bind和update合在一起的写法)

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用

unbind:只调用一次,指令与元素解绑时调用

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)

表单元素的处理

普通文本框 或者 文本域 单选框 复选框 下拉框 小案例:全选和非全选 计算属性、过滤器、监听器

methods 普通方法 filters 过滤器

只能应用到胡子语法和v-bind中 小练习:输入内容的单词首字母大写 computed getter & setter 相对于普通方法来讲,计算属性是基于它们的响应式依赖进行缓存的 依赖data中的数据变量

watch 当需要在数据变化时执行异步或开销较大的操作时应用监听器

data(){ return { checked:false, //是否全选 checkModel:[] } }, watch:{ checkModel(){ if(this.checkModel.length==this.list.length){ this.checked=true; }else{ this.checked=false; } } } … 复制代码 class和style绑定

class的处理(对象语法、数组语法) 内联样式的处理

生命周期函数(钩子函数)

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destory

常用的属性方法

$set : 设置响应式数据

$el : 挂载的元素

$destroy : 销毁vue的实例;同时调用beforeDestroy destroyed

$mount : 挂载真实DOM的方法

$data : 响应式的对象

$options: 是Vue的构造函数的参数

$refs : 可以用来获取指定的元素对象 (非受控组件)

$on : 订阅

$emit : 发布

$watch:监控

VUE中的TRANSITION动画

什么情况下会用动画

条件渲染 v-if 条件展示 v-show 动态组件 例如:vue-router控制组件渲染

  1. 如何实现动画

修改元素的样式:style & class 使用JS实现动画, 使用vue内置的transition & transition-group 3. transition的基础使用

关于Vue你所知道的那些事:

定义进入过渡的开始状态,在元素被插入之前生效,在元素被插入之后的下一帧移除

v-enter-active:定义进入过渡生效时的状态,在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除

v-enter-to: 定义进入过渡的结束状态,元素被插入之后下一帧生效 ,在过渡/动画完成之后移除

v-leave: 定义离开过渡的开始状态,在离开过渡被触发时立刻生效,下一帧被移除

v-leave-active:定义离开过渡生效时的状态,在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除

v-leave-to: 定义离开过渡的结束状态,在离开过渡被触发之后下一帧生效,在过渡/动画完成之后移除