Vue


数据与方法

当一个 Vue 实例被创建时,它将 数据 对象中的所有的 属性加入到 Vue 的响应式系统中。当这些 属性 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。值得注意的是只有当实例被创建时就已经存在于数据中的属性才是响应式的。也就是说如果你添加一个新的属性,那么对于这个新添加的属性的改动不会触发任何试图的更新

使用 Object.freeze(),这会阻止修改现有的 属性,也意味着响应系统无法再追踪变化。

除了数据 属性,Vue 实例还暴露了一些有用的实例 属性与方法。它们都有前缀 $,以便与用户定义的 属性 区分开来。API 参考

实例生命周期钩子

  • 挂载(初始化相关属性)
  1. beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用
  2. created 在实例创建完成后立即被调用
  3. beforeMount 在挂载开始之前被调用
  4. mounted 被新创建的vm.$el替换,并挂载到实例上去时候调用该钩子
  • 更新(元素或组件的变更操作)
  1. beforeUpdate 数据更新使调用,发生在虚拟DOM打补丁之前
  2. updated 由于数据更改导致虚拟DOM重新渲染和打补丁在这之后会调用该钩子
  • 销毁(销毁相关属性)关属性)
  1. beforeDestroy 实例销毁之前调用
  2. destroyed 实例销毁之后调用

不要在选项 property 或回调上使用箭头函数因为箭头函数并没有 thisthis 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致错误

模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

插值

文本:数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

v-html 指令:双大括号会将数据解释为普通文本,而非 HTML 代码。v-html输出真正的 HTML(站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击

v-bind 指令:绑定html属性

对于以上所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。有个限制就是,每个绑定都只能包含单个表达式

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。

v-bind可以绑定动态参数,你可以使用动态参数为一个动态的事件名绑定处理函数

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定

<form v-on:submit.prevent="onSubmit">...</form>

v-bind 缩写:,v-on 缩写@

计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

我们可以将同一函数定义为一个方法(methods)而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch,通常更好的做法是使用计算属性而不是命令式的 watch 回调

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter

侦听器

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。除了 watch 选项之外,还可以使用命令式的 vm.$watch API


文章作者: XiaoQi
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 XiaoQi !
 上一篇
超级简历一面 超级简历一面
找到数组中符合条件的数findfind方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
2020-09-23
下一篇 
关于ES6 关于ES6
let命令ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 for循环的计数器,就很合适使用let命令。 let在for循环还有一个特别之处,就是设置循环变量的那部分是一个父
2020-08-04
  目录