v-for
v-for 列表渲染 指令可以渲染数组和对象
v-for="(item,index) in items" v-bind:key="index"
v-for="(value,key,index) in object" 遍历对象
虚拟DOM 性能优化
key 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
你需要为每项提供一个唯一 key 属性
Vue 识别节点的一个通用机制 一个组件添加 key key值更改 组件强制刷新
深浅拷贝 ...展开运算 JONS.stringify 递归
深浅复制
深浅监听
数据类型
基本数据类型 String Number Boolean null undefined (不可变对象 深拷贝 )
引用数据类型 对象 数组 (可变对象 浅拷贝)
不可变对象 基本数据类型 immutable 修改不可变对象 响应式系统一定检测到数据更新
可变对象 引用数据类型 mutable 修改可变对象 可能 响应式系统无法检测到数据更新
Vue 响应式视图 可以检测 不可变对象的数据修改 可变对象 有的时候监测不到 (响应式视图系统会监测第一层的数据改变)
修改 基本数据类型 会触发视图更新
修改 引用数据类型 可能触发视图更新
数组方法
push
pop
shift
unshift
splice
sort
reverse
map
reduce
forEach
filter
find
some
every
concat
slice
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新
变异数组方法 这些方法直接修改原来的数组
push
pop
shift
unshift
splice
sort
reverse
非变异数组方法 这些方法不能改变原始数组 但可以返回一个新的数组
map
reduce
forEach
filter
find
some
every
reduce
concat
slice
实例方法 全局方法
vm.$set(array,index,newItem) Vue.set 设置
vm.$delete Vue.delete 删除
过滤器 filter
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化 (日期格式 货币格式)
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
“管道”符号指示 |
Vue.filter 全局过滤器
filters 局部过滤器
-->
<!--
v-on 监听DOM 事件 执行相关的函数
缩写 @ v-on:click @click
函数调用时候的参数 是 实参
函数定义时候的参数 是 形参
事件修饰符
event.preventDefault() 阻止浏览器的默认事件
event.stopPropagation() 阻止事件冒泡
v-on 提供了事件修饰符
.stop 阻止单击事件继续传播
.prevent 阻止浏览器的默认事件
.capture
.self
.once 这个事件只能触发一次
.passive
按键修饰符 键盘事件 (键盘码)
enter 13
right 37
left
space 32
up
down
v-on:click @click
input
change
click
dbclick
keyup
keydown
keypress
mousemove
mousedown
mouseup
mouseenter
mouserleave
touchstart 后面再讲 手机端的触摸事件
touchmove
touchend
原生绑定事件
onclick="do()" DOM0
document.getElementyById("box").onclick = fn;
addEventListener("click",fn,false/true) 默认 false false 冒泡 true 捕获 DOM2
removeEventListener("click")
jquery 绑定事件
on / off
bind / unbind
click()
事件委托===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去)
$(parent).on('click',child,fn);
$(parent).delegate(child,'click',fn);
过滤器
Vue 提供了 transition 的封装组件 任何元素和组件添加进入/离开过渡
v-if
v-show
组件切换 (动态组件切换 子组件切换)
transition
过渡 (0-1)
在进入/离开的过渡中，会有 6 个 class 切换
v-enter 进入之前 开始帧 过渡
v-enter-active 正在进入 animation
v-enter-to 进入完成 结束帧
v-leave 离开之前
v-leave-active 正在离开
v-leave-to 离开完成
v- transition 没有name 默认 v-
transition 添加 name = fade v 替换成 fade
初始化渲染 过渡
appear
appear-active-class 动画
v-if / v-show
v-model 用于绑定 input 和 textarea 的 value 输入框
v-model 实现数据双向绑定
view 视图层 修改视图(input 事件) v-model 会自动去更新对应的 数据(model)
model 数据层 修改数据 通过js修改数据 v-model 会自动的去更新 数据对应的 视图 (view)
Vue 不是一个真正的MVVM模式的 框架 ,只是借鉴了 MVVM 部分精华和优点
设计模式
MVC angularJS
M model 数据层
V view 视图层
C controller 控制器层
MVVM
M model 数据层
V views 视图层
VM viewmodel 数据视图对象
MVP
M model 数据层
V views 视图层
P presenter 逻辑层 (js逻辑处理代码+方法)
v-model 的底层原理 语法糖
Object.defineProperty() 进行数据劫持 (监听数据改变 从而触发修改视图的逻辑函数) (监听输入框输入事件 从而修改对应的数据)
它会根据控件类型自动选取正确的方法来更新元素
v-model 本质上不过是语法糖 ( 包含大量逻辑代码块集合)
负责监听用户的输入事件以更新数据
text 和 textarea 元素使用 value 属性和 input 事件
checkbox 和 radio 使用 checked 属性和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件 $("#select").prop()
v-model 也有修饰符
lazy input 变为 change 延迟触发
trim 去除首尾空格
number 用户的输入值转为数值类型
Vue 永远操作数据 而不是去操作DOM
操作 this.goods
深度监听 vs 浅度监听
[
{
[]
}
]
如果修改数据(对象数组) 第一层数据 检测数据改变
如果修改数据 深层 数据 无法检测数据改变