乐趣区

关于javascript:Vue知识点汇总实时更新修正

jiezi

一、class 与 style

  • 动静 class(与一般的 class 属性共存): 可间接用对象，如果有一般 class，应该用数组语法，对象中只有动静的
    ① :class="[{active: isActive},errorClass]"
    ② :class="{active: isActive,'text-danger': hasError}"
  • 内联款式：对象语法，驼峰和短横线都行
    ① :style="{color: activeColor, fontSize: fontSize +'px'}"

二、v-if 与 v -for 与 v -show

  • v-if 切换多个元素标签，应用 <template> 包裹
  • Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，须要 key 标识
  • v-show 不反对 <template> 元素，也不反对 v-else
  • v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
    ① 如果须要十分频繁地切换，则应用 v-show 较好
    ② 如果在运行时条件很少扭转，则应用 v-if 较好
  • 当 v-if 与 v-for 一起应用时，v-for 具备比 v-if 更高的优先级。所有个别用有 v -if 的 template 包裹 v -for，不让他们在同一层

三、列表渲染

# 数组
v-for="(item,index) in items"
v-for="item of items"
# 对象
v-for="value in object"
v-for="(value, key) in object"
v-for="(value, key, index) in object"
  • 为了给 Vue 一个提醒，以便它能跟踪每个节点的身份，从而重用和从新排序现有元素，你须要为每项提供一个惟一 key 属性。现实的 key 值是每项都有的且惟一的 id。
  • 一段取值范畴的 v -for <span v-for="n in 10">{{n}} </span>
  • 不能间接批改数组某一项，长度
    ① 应用 this.$set(arr，index，newValue) 扭转某项
    ② 应用 this.arr.splice（newLength）删除也会触发 DOM 更新

四、生命周期

  • beforeCreated：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created：实例创立实现后立刻调用；数据观测，属性和办法的计算，watch/event 事件回调曾经实现；$el 元素目前不可见；this 能够应用；个别，异步获取数据在 created 里被赋值，用于首次渲染页面。
  • beforeMount：实例挂载之前被调用；相干 render 函数首次被调用。
  • mounted：实例挂载实现后立刻调用；$el 元素可用，此时能够操作 DOM 元素。
    ①留神 mounted 不会承诺所有的子组件也都一起被挂载。如果你心愿等到整个视图都渲染结束，能够用 vm.$nextTick 替换掉 mounted：
mounted: function () {this.$nextTick(function () {
   // Code that will run only after the
   // entire view has been rendered
   //[nextTick：将回调提早到下次 DOM 更新循环之后执行。在批改数据之后立刻应用它，而后期待 DOM 更新。]
   })
}
  • beforeDestory:实例销毁之前调用。在这一步，实例依然齐全可用
  • destroy：实例销毁之后被立刻调用

五、不要在 watch、computed、method 等选项属性上应用箭头函数定义函数

  • 例如在 watch 中searchQuery: newValue => this.updateAutocomplete(newValue)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会依照冀望指向 Vue 实例，this.updateAutocomplete 将是 undefined。因为在规范函数中，this 援用的是把函数当成办法调用的上下文对象，this 指向的就是 vue 实例。在比方 method 函数（个别 function 写法下）中进行事件回调调用某个函数，this 指向的并非想要的后果，此时把回调函数写成箭头函数的模式就能够解决问题，因为箭头函数的 this 就是父作用域的 this，而父作用域就是 method 函数调用时生成的上下文作用域。从原理上的解释像 vue 中 method 函数中的代码，这个函数定义的时候是必须是个别函数。个别函数中指针 this 援用的是把函数当成办法调用的上下文，vue 中就是实例 vue 把 method 函数作为办法调用，所以指向的是 vue 实例。method 函数外部又有一个闭包箭头函数，这个闭包中的 this 指向的是 method 的上下文，而 method 的上下文是 vue 实例，所以就被笼罩了。闭包中的 this 指的就是 vue 实例也就是 method 的上下文，都是同一个。

六、事件修饰符：疾速了解

  • .stop：避免事件冒泡，等同于 JavaScript 中的 event.stopPropagation()
    避免事件冒泡，艰深来说就是阻止事件向父元素传递，阻止任何父事件处理程序被执行，等同于 JavaScript 中的 event.stopPropagation()。
  • .prevent：避免执行预设的行为，等同于 JavaScript 中的 event.preventDefault()
    某些标签领有本身的默认事件，比方 <a> 标签点击后会进行页面的跳转。这类默认事件尽管是冒泡后开始的，但不会因为 stop 而进行执行。阻止执行这类预设的行为，.prevent 就派上用场了。例如下：<a href="http://www.baidu.com" @click.prevent> 点击跳转 </a>
  • .capture：捕捉冒泡
    捕捉冒泡，即冒泡产生时，有.capture 修饰符的 dom 元素会优先执行。咱们还是用回 stop 时候的例子，失常状况下点击最内层按钮，是由下往上冒泡。
  • .self：将事件绑定到本身，只有本身能力触发
    将事件绑定到本身，只有本身能力触发，通常用于防止冒泡事件的影响。
  • .once：只触发一次
    这个比拟好了解，加上 once 修饰符当前事件只触发一次，然而不影响事件的冒泡，下层的事件依然会被触发，并且页面刷新后这个次数会重置。
  • .passive：不阻止事件的默认行为
    `.passive 是 2.3.0 新增的修饰符。这里波及到一个问题，为什么须要通知浏览器不阻止事件的默认行为？
    起因是这样的，浏览器只会在每次触发监听器的时候，才去判断这次是否有调用 preventDefault()来阻止默认行为。这样的判断，在某些场景下会影响交互，像用户通过手势滑动页面时，就没法迅速滚动了，而应用.passive 就能够提前通知浏览器，咱们没有用 preventDefault 阻止默认动作，你也不必重复去判断了，从而进步性能解决卡顿。`

七、Vue 插槽

  • Vue 具名插槽:
    就是子组件中的提供给父组件应用的一个占位符，用 <slot> </slot> 示意，父组件能够在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的 <slot> </slot> 标签。
    ①2.6.0 当前的版本中的用法是这样的：<template v-slot:header>// 在父组件中应用模板语法，应用 v -slot 绑定插槽的名字。
    ②<slot name="header"></slot>// 在子组件中依然应用 name 来作为插槽的标识符。
    或者间接把 slot 属性用在一个一般元素上，例如：<h1 slot="header">Here might be a page title</h1>。这种写法是在 2.6.0 之前版本的语法，当初曾经废除。
  • Vue 作用域插槽:
    有时让插槽内容可能拜访子组件中才有的数据是很有用的，然而因为只有子组件能够拜访到例如 user 数据，而咱们提供的内容是在父级渲染的。
    ①为了让 user 数据在父级的插槽内容中可用，第一步：咱们能够将 user 作为元素的一个属性 attribute 绑定下来，<slot v-bind:user="user"> {{user.lastName}} </slot>。
    ②第二步：绑定在元素上的属性被称为插槽 prop。当初在父级作用域中，咱们能够应用带值的 v-slot 来定义咱们提供的插槽 prop 的名字。<template v-slot:default="slotProps"> {{slotProps.user.firstName}} </template>，在这个例子中，咱们抉择将蕴含所有插槽 prop 的对象命名为 slotProps，但你也能够应用任意你喜爱的名字。
  • 注意事项:
    ①默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。
    ②只有呈现多个插槽，请始终为所有的插槽应用残缺的基于 <template> 的语法：
<current-user>
  <template v-slot:default="slotProps">
    {{slotProps.user.firstName}}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>
退出移动版