关于Vue你所知道的那些事

关于Vue你所知道的那些事
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动画

1. 什么情况下会用动画

条件渲染 v-if
条件展示 v-show
动态组件 例如：vue-router控制组件渲染
…
2. 如何实现动画

修改元素的样式：style & class
使用JS实现动画（前两周在某些场景下都需要自己直接去操作DOM或者更加的麻烦）
使用vue内置的transition & transition-group
3. transition的基础使用

v-enter：定义进入过渡的开始状态，在元素被插入之前生效，在元素被插入之后的下一帧移除
v-enter-active：定义进入过渡生效时的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除
v-enter-to: 定义进入过渡的结束状态，元素被插入之后下一帧生效 ，在过渡/动画完成之后移除
v-leave: 定义离开过渡的开始状态，在离开过渡被触发时立刻生效，下一帧被移除
v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除
v-leave-to: 定义离开过渡的结束状态，在离开过渡被触发之后下一帧生效，在过渡/动画完成之后移除