Vue基础知识

数据绑定

v-bind 单项绑定

v-model 双向绑定

事件处理

点击事件

v-on:click 点击事件

@click="" 效果一致

@click.prevent 阻止默认事件

@click.stop 阻止事件冒泡

@click.once 事件只触发一次

@click.capture 使用时间的捕获模式

@click.self 只有event.target是当前操作的元素时 才触发事件

@click.passive 时间的默认行为立即执行，无需等待时间回调执行完毕

插入methods中，其中function的第一个参数为事件对象event

事件的捕获是由外向内进行，事件的冒泡是由内向外进行

键盘事件

@keydown 按下按键

@keyup 按下弹起后

按键别名，可在事件后加点进行识别

别名 按键名
enter 回车
delete 删除
esc 退出
space 空格
tab 换行
up 上
down 下
left 左
right 右

绑定样式

:class

适用于样式的类名不确定，需要动态绑定。

其参数可以是数组，会绑定所有值

也可以是对象

:style="{fontSize: fsize+'px'}"

一般直接赋值对象。fsize为对象参数。

条件渲染

v-show实际为调整display属性

v-if会在dom中删除此元素

template 不会破坏结构，只能配合v-if

列表渲染

v-for可以遍历对象数组、对象、字符串，key 让每个节点有一个唯一标识

image-20220630111311531

列表过滤

模糊搜索，使用watch监视去实现

image-20220701104951568

用computed实现

image-20220701105337862

列表排序

image-20220701110340639

Vue.set()方法可以后面添加响应式的参数
vm.$set()方法可以后面添加响应式的参数

不能给data追加属性，只能给data内的参数添加数据。

监测数组变化

数组元素没有set和get去侦听变化，只有使用对应的方法进行变更时，才回做出响应式变化。

  1. push()
  2. pop()
  3. shift()
  4. unshift()
  5. splice()
  6. sort()
  7. reverse()

收集表单数据