Skip to content

Vue实例中的Options

el

  • 类型：string ｜ HTMLElement
  • 作用：决定之后Vue实例管理哪一个DOM

data

  • 类型：Object ｜ Function
  • 作用：Vue实例对应的数据对象

methods

  • 类型：{[key:string]: Function}
  • 作用：定义属于Vue实例的一些方法，可以在指令或其他地方调用

computed

  • 每个计算属性都包含一个getter和setter（不常用）
  • 缓存机制

指令

v-once

  • 该指令后面不需要跟任何表达式
  • 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

v-html

  • 该指令后面往往会跟一个string类型
  • 该指令会将string里面的html解析出来并渲染

v-text

  • 作用和Mustache相似：都是用于将数据显示在界面中
  • 通常接受一个string类型

v-pre

  • 用于跳过这个元素及其子元素的编译过程，用于显示原本的Mustache语法

v-clock

  • 用于避免尚未被编译的Mustache标签被显示出来

v-bink

  • 作用：动态绑定一个或多个属性值，或者向另一个组件传递props值
  • 语法糖：:

绑定class

  • 对象语法：

用法一：直接通过{}绑定一个类

<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突

注：如果isActive和isLine都为true，那么会有title/active/line三个类

<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中

注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

  • 数组语法（不常用）：

用法一：传入单个值的数组

<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值

<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突

注：会有title/active/line三个类

<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

绑定style

  • 对象语法：

:style="{color: currentColor, fontSize: fontSize + 'px'}"

注：

  • style后面跟的是一个对象类型

    • 对象的key是CSS属性名称
    • 对象的value是具体赋的值，值可以来自于data中的属性
  • 数组语法：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

注：

  • style后面跟的是一个数组类型

  • 可以是多个值，分割即可

v-on

  • 作用：绑定事件监听器
  • 语法糖：@
  • 参数：
  • 如果方法不需要参数，那么方法后面的()可以不加
  • 如果方法本身有一个参数，那么默认会将原生事件event传入
  • 如果同时需要传入参数和event，可以通过$event传入事件
  • 修饰符：
  • .stop:调用event.stropPropagation()
  • .prevent:调用event.preventDefault()
  • .[keyUp|keyDown].[keyCode | keyAlias]:键盘事件
  • .native:监听组件根元素的原生事件
  • .once:只触发一次回调

v-if,v-else-if,v-else

  • 如果条件为假，那么对应的元素和子元素不会被渲染

v-show

  • 如果条件为假，会将元素的display属性设置为none

v-for

  • 类似python的for循环
  • 需要索引值时: v-for=(item, index) in items
  • 官方推荐给对应的元素或组件加上:key属性 -> 为了高效的更新虚拟DOM

v-model

  • 双向绑定：类似Angular的ngModel

  • 本质是一个语法糖，背后包含两个操作：

  • v-bind绑定一个属性值

  • v-on绑定一个input事件
<input type="text" v-model="message">
<!--等价于-->
<input type="text" 
       v-bind:value="message"
       v-on:input="message = $event.target.value">

  • checkbox

  • 单个：绑定的是布尔值

  • 多个：绑定的是数组

  • select

  • 单个：绑定的是一个值

  • 多个：绑定的是一个数组

  • 修饰符

  • lazy：让数据在失去焦点或者回车的时候才更新

  • number：让输入框输入的内容自动转换为数字类型
  • trim：过滤内容两边的空格

生命周期