Vue中 v-bind / v-model / 计算属性 / 异步更新 的基础使用

一: v-model 和 v-bind 的区别

v-model : 双向数据绑定 V=> M M=> V ,数据层发生改变,视图层也跟着变化, 反之 视图层发生改变,数据层也跟着改变 v-model 主要用于表单元素上.

v-bind: 缩写=> : 动态数据绑定(单向) M=> V 数据层发生改变 => 视图层跟随改变. v-bind 主要负责设置属性, 可以在任意元素中使用

二: 计算属性 computed

• 和 data 属性同级
• 写法像一个函数, 实际上是一个属性
• 一定要有 return 返回值, 返回出来的值,就是页面中要显示的值
• (重点) 只要和计算属性相关的数据发生了改变, 计算属性就会重新计算,里面的代码会重新执行一次

什么时候使用 computed 计算属性??

• 想要根据 data 中的值, 得到一个新值
• 这个新值, 会随着相关数据发生变化而变化

例如 :

三: Vue 中异步更新

使用 异步 DOM 是因为性能的考虑

• Vue中的DOM 更新是异步的
• vue中的数据发生改变, 不会立马将数据更新到视图中, 而是等待数据不再发生变化,一次性的更新到视图层
  可以用下面这个方法的回调函数去操作Dom

this.$nextTick( () => { })
在当前数据发生改变后 DOM 异步更新完毕会自动调用该方法里面的回调函数