type
status
date
slug
summary
tags
category
icon
password
常用指令:
  • v-bind: 单向绑定解析表达式,可简写为 :xxx
  • v-model: 双向数据绑定
  • v-for: 遍历数组/对象/字符串
  • v-on: 绑定事件监听,可简写为 @
  • v-if: 条件渲染(动态控制节点是否存在)
  • v-else: 条件渲染(动态控制节点是否存在)
  • v-show: 条件渲染(动态控制节点是否展示)
  • v-text 指令:
    • 作用: 向其所在的节点中渲染文本内容
    • 与插值语法的区别:v-text 会替换掉节点中的内容,{{xx}}则不会
  • v-html 指令:
    • 作用:向指定节点中渲染包含 html 结构的内容。
    • 与插值语法的区别:
        1. v-html 会替换掉节点中所有的内容,{{xx}}不会
        1. v-html 可以识别 html 结构
    • 严重注意:v-html 有安全性问题!!!
        1. 在网站上动态渲染任意 html 是非常危险的,容易导致 XSS 攻击。
        1. 一定要在可信的内容上使用 v-html,永远不要在用户提交的内容上使用 v-html。
  • v-cloak 指令(没有值):
    • 本质上是一个特殊属性,Vue 示例创建完毕并接管容器后,会删掉 v-cloak 属性。
    • 使用 css 配合 v-cloak 可以解决网络慢时页面展示出{{xx}}插值语法的问题.
  • v-once
    • v-once 所在节点在初次动态渲染后,就视为静态内容了。
    • 以后数据的改变不会引起 v-once 所在结构的更新,可以用于优化性能。
  • v-pre 指令:
    • 跳过其所在节点的编译过程
    • 可利用它跳过:没有使用指令语法,没有使用插值语法的节点,会加快编译

模板语法

  1. 插值语法
  • 功能:用于解析标签体内容。
  • 写法:{{xxx}},xxx 是 js 表达式,且可以直接读取到 data 中的所有属性。
  1. 指令语法
  • 功能:用于解析标签(包括:标签属性,标签体内容,绑定事件...)
  • 举例:v-bind: href="xxx" 或简写为 : href="xxx",xxx 同样要写 js 表达式,且可以直接读取到 data 中的所有属性。
  • 备注:Vue 中有很多指令,形式都是 v-xxx

数据绑定

Vue 中有 2 中数据绑定的方式:
  • 单向绑定(v-bind):数据只能从 data 流向页面。
  • 双向绑定(v-model):数据不仅能从 data 流向页面,还可以从页面流向 data。
  • 备注
    • 双向绑定一般都应用在表单类元素上(如:input、select 等)
    • v-model: value 可以简写为 v-model,因为 v-model 默认收集的就是 value 值。

el与data的两种写法

data 与 el 的两种写法:
  1. el 的两种写法
  • new Vue 时配置 el 属性。
  • 先创建 Vue 实例,然后再通过 vm.$mount(#root) 的方式进行挂载
2. data 的两种写法 - 对象式 - 函数式
如何选择:目前学习阶段都可以,后边学习到组件时,data 必须使用函数式,否则会出问题。
  1. 一个重要原则:由 Vue 管理的函数,一定不要写箭头函数,一旦写了箭头函数,this 就不再是 Vue 实例了。

MVVM模型

MVVM 模型
  1. M模型(Model) :data 中的数据
  1. V视图(View) :模板代码
  1. VM视图模型(ViewModel):Vue 实例
观察发现:
  1. data 中所有的属性,最后都出现在了 vm 身上。
  1. vm 身上所有的属性,及 Vue 原型上所有属性,在 Vue 模板中都可以直接使用。

数据代理

  1. Vue 中的数据代理:通过 vm 对象来代理 data 对象中属性的操作(读/写)
  1. Vue 中数据代理的好处:更加方便的操作 data 中的数据
  1. 基本原理:
  • 通过 Object.defineProperty()把 data 对象中所有属性添加到 vm 上。
  • 为每一个添加到 vm 上的属性,都指定一个 getter/setter
  • 在 getter/setter 内部去操作(读/写)data 中对应的属性。

事件处理

事件的基本使用

事件的基本使用:
  1. 使用 v-on: xxx 或 @xxx 绑定事件,其中 xxx 是事件名
  1. 事件的回调需要配置在 methods 对象中,最终会在 vm 上
  1. methods 中配置的函数,不需要用箭头函数,否则 this 就不是 vm 了
  1. methods 中配置的函数,都是被 Vue 所管理的函数,this 的指向是 vm 或组件实例对象
  1. @click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参

事件修饰符

Vue 中的事件修饰符: (前三个常用)
  1. prevent:阻止默认事件(常用)
  1. stop:阻止事件冒泡(常用)
  1. once:事件只触发一次(常用)
  1. capture:使用事件的捕获模式
  1. self:只有 event.target 是当前操作的元素时才触发事件
  1. passive:事件的默认行为立即执行,无需等待事件回调执行完毕

键盘事件

  1. Vue 中常用的按键别名:
    1. 常用键码
      Tab键9
      事件名删除键8
      Esc键27
      空格键32
      上箭头键38
      下箭头键40
      左箭头键37
      右箭头键39
      Enter键(回车键)13
      • 回车 => enter
      • 删除 => delete (捕获“删除”和“退格”键)
      • 退出 => esc
      • 空格 => space
      • 换行 => tab (特殊,必须配合 keydown 去使用)
      • 上 => up
      • 下 => down
      • 左 => left
      • 右 => right
  1. Vue 未提供别名的按键,可以使用按键原始的 key 值去绑定,但注意要转为 kebab-case(短横线命名)
  1. 系统修饰键(用法特殊):ctrlaltshiftmeta
    1. 配合 keyup 使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
    2. 配合 keydown 使用:正常触发事件。
  1. 也可以使用 keyCode 去指定具体的按键(不推荐)
  1. Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名 不推荐

计算属性

插值语法

methods实现

计算属性实现

计算属性:
  1. 定义:要用的属性不存在,要通过已有属性计算得来。
  1. 原理:底层借助了 Objcet.defineproperty 方法提供的 getter 和 setter
  1. get 函数什么时候执行?
    1. 初次读取时会执行一次。
    2. 当依赖的数据发生改变时会被再次调用。
  1. 优势:与 methods 实现相比,内部有缓存机制(复用),效率更高,调试方便。
  1. 备注:
    1. 计算属性最终会出现在 vm 上,直接读取使用即可。
    2. 如果计算属性要被修改,那必须写 set 函数去响应修改,且 set 中要引起计算时依赖的数据发生改变。

计算属性简写

监视属性

监视属性

监视属性 watch:
  1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
  1. 监视的属性必须存在,才能进行监视

深度监视

深度监视:
  1. Vue 中的 watch 默认不监测对象内部值的改变(一层)。
  1. 配置 deep: true 可以监测对象内部值改变(多层)。
备注:
  1. Vue 自身可以监测对象内部值的改变,但 Vue 提供的 watch 默认不可以!
  1. 使用 watch 时根据数据的具体结构,决定是否采用深度监视。

绑定样式

  1. class 样式 写法: class="xxx", xxx 可以是字符串、对象、数组。
      • 字符串写法适用于:类名不确定,要动态获取。
      • 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
      • 数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
  1. style 样式
      • : style="{fontSize: xxx}" 其中 xxx 是动态值。
      • : style="[a,b]" 其中 a、b 是样式对象。

条件渲染

  1. v-if
      • 写法:
        • v-if="表达式"
        • v-else-if="表达式"
        • v-else="表达式"
      • 适用于:切换频率较低的场景。
      • 特点:不展示的 DOM 元素直接被移除。
      • 注意:v-if 可以和: v-else-if、v-else 一起使用,但要求结构不能被打断
  1. v-show
      • 写法:v-show="表达式"
      • 适用于:切换频率较高的场景。
      • 特点:不展示的 DOM 元素未被移除,仅仅是使用样式隐藏掉
  1. 使用 v-if 的时,元素可能无法获取到,而使用 v-show 一定可以获取到。

列表渲染

基础列表

v-for 指令:
  1. 用于展示列表数据
  1. 语法:v-for="(item, index) in xxx" : key="yyy"
  1. 可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

key的内部原理

面试题:react、vue 中的 key 有什么作用?(key 的内部原理)
  1. 虚拟 DOM 中 key 的作用: key 是虚拟 DOM 对象的标识,当数据发生变化时,Vue 会根据【新数据】生成【新的虚拟 DOM】,随后 Vue 进行【新虚拟 DOM】与【旧虚拟 DOM】的差异比较,比较规则如下:
  1. 对比规则:
    1. 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key:
      • 若虚拟 DOM 中内容没变, 直接使用之前的真实 DOM!
      • 若虚拟 DOM 中内容变了, 则生成新的真实 DOM,随后替换掉页面中之前的真实 DOM。
    2. 旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key:
      • 创建新的真实 DOM,随后渲染到到页面。
  1. 用 index 作为 key 可能会引发的问题:
    1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实 DOM 更新 ==> 界面效果没问题, 但效率低。
    2. 如果结构中还包含输入类的 DOM: 会产生错误 DOM 更新 ==> 界面有问题。
  1. 开发中如何选择 key?:
    1. 最好使用每条数据的唯一标识作为 key, 比如 id、手机号、身份证号、学号等唯一值。
    2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用 index 作为 key 是没有问题的。

列表过滤

列表排序

收集数据表单

  • 收集表单数据:
    • 若:<input type="text"/>,则 v-model 收集的是 value 值,用户输入的就是 value 值。
    • 若:<input type="radio"/>,则 v-model 收集的是 value 值,且要给标签配置 value 值。
    • 若:<input type="checkbox"/>
        1. 没有配置 input 的 value 属性,那么收集的就是 checked(勾选 or 未勾选,是布尔值)
        1. 配置 input 的 value 属性:
        1. v-model 的初始值是非数组,那么收集的就是 checked(勾选 or 未勾选,是布尔值)
        1. v-model 的初始值是数组,那么收集的的就是 value 组成的数组

        生命周期

        1. 又名:生命周期回调函数,生命周期函数,生命周期钩子
        1. 是什么:Vue 在关键时刻帮我们调用的一些特殊名称的函数
        1. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
        1. 生命周期函数中的 this 指向是 vm,或 组件实例对象
        常用的生命周期钩子:
        1. mounted:发送 ajax 请求,启动定时器,绑定自定义时间,订阅消息等【初始化操作】
        1. beforeDestroy:清除定时器,解绑自定义事件,取消订阅消息等【收尾工作】
        关于销毁 Vue 实例
        1. 销毁后借助 Vue 开发者工具看不到任何信息
        1. 销毁后自定义事件会失效,但原生 DOM 时间依然有效
        1. 一般不会在 beforeDestroy 操作数据,因为即便是操作数据,也不会再触发更新流程了。