VUE基本知识

vm是什么?

• 是一个调度者,监听数据,渲染页面

插值表达式可用来干什么的?

• 渲染数据

v-text使用:

1. 更新元素的 textContent
2. 只能被使用在元素的属性节点上,不能用在元素的内容区域
3. 会覆盖掉元素之前的内容
4. 会把元素内部的内容都替换掉
5. 在网速慢的情况下,存在闪烁的问题

v-html使用:

• 更新元素的 innerHTML, 渲染带标签的文本

v-bind使用:

• 绑定属性

v-for使用:

• 渲染数组

  1. v-for="item in arr", item是数组中的每一项,arr是需要循环的数组
  2. v-for="(item, index) in arr", index是索引

• 渲染对象

  1. v-for="value in obj", value是对象键的值,obj表示需要遍历的对象
  2. v-for="(value, key, index) in obj", index表示索引

• v-for能够根据数据的变化自动刷新视图

• 注意,以下两种情况不会触发视图更新

  1. 当使用数组的length属性去改变数组的时候，不会触发视图更新
  2. 使用数组下标(索引)的方式去改变数组的时候，也不会触发视图更新

• 解决上述问题

  1. 使用Vue.set(arr, index, newVal), arr是需要改变的数组，index是数组里面的项， newVal是改变后的值
  2. Array.prototype.splice()

• :key

  1. v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项
  2. 好处就是提升性能
  3. 注意key的值唯一,不能重复

v-model使用:

• 双向数据绑定
• v-model只能在input/textarea/selet使用

v-on使用: (监听DOM事件)

• 使用方法：

  1. 在标签的属性位置写上v-on:任意的事件类型="执行的函数"
  2. 简写：@任意的事件类型="执行的函数" （推荐）
  3. 通过执行函数添加参数
  4. 通过执行函数中添加$event参数传递事件对象，注意只能是$event,并且不能加引号
  5. 事件修饰符可以给事件添加特殊功能 .stop, .prevent
  6. 可以给和按键相关的事件添加按键修饰符 常用的有 .enter

v-if和v-show使用:

• v-if和v-show指令可以用来控制元素的显示和隐藏 v-if="布尔值", v-show="布尔值", 布尔值为true元素显示，false隐藏

• 区别：

  1. v-if通过控制dom来控制元素的显示和隐藏
  2. v-show通过控制样式display:none来控制元素的显示与隐藏

• 使用场景区别

  1. 涉及到大量dom操作的时候，我们需要使用v-show
  2. 涉及到异步数据渲染的时候就要使用v-if