Vue学习笔记

对比其他框架

React 和 Vue 有许多相似之处，它们都有：

• 使用 Virtual DOM
• 提供了响应式（Reactive）和组件化（Composable）的视图组件
• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库

JSX vs Templates
在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖

Angular 和 Vue

• AngularJS 使用双向绑定，Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂
• 在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 AngularJS 中两者有不少相混的地方
• Angular 的学习曲线是非常陡峭的 —— 作为一个框架，它的 API 面积比起 Vue 要大得多，你也因此需要理解更多的概念才能开始有效率地工作。当然，Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用；但不可否认的是，这也使得它对于经验不甚丰富的开发者相当的不友好

Vue生命周期：

Vue语法

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

<span>Message: {{ msg }}</span>

为了输出真正的 HTML ，你需要使用 v-html 指令：

<div v-html="rawHtml"></div>

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。

HTML 属性中使用，应使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

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

过滤器可以用在两个地方：mustache 插值和 v-bind 表达式

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

计算属性：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性computed只有在它的相关依赖发生改变时才会重新求值
只要发生重新渲染，method 调用总会执行该函数

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

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

在自定义组件里，你可以像任何普通元素一样用 v-for

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

显示一个数组的过滤或排序副本，而不实际改变或重置原始数据

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

阻止单击事件冒泡

<a v-on:click.stop="doThis"></a>

提交事件不再重载页面

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

修饰符可以串联

<a v-on:click.stop.prevent="doThat"></a>

只有修饰符

<form v-on:submit.prevent></form>

添加事件侦听器时使用事件捕获模式

<div v-on:click.capture="doThis">...</div>

只当事件在该元素本身（比如不是子元素）触发时触发回调

<div v-on:click.self="doThat">...</div>

点击事件将只会触发一次

<a v-on:click.once="doThis"></a>

在监听键盘事件时，我们经常需要监测常见的键值。

• .enter
• .tab
• .delete (捕获 “删除” 和 “退格” 键)
• .esc
• .space
• .up
• .down
• .left
• .right

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。

• .ctrl
• .alt
• .shift
• .meta

滑鼠按键修饰符

• .left
• .right
• .middle

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

组件

在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

在组件中 data 必须是一个函数。理解这种规则的存在意义很有帮助，让我们假设用如下方式来绕开 Vue 的警告：

var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  // 但是我们返回给每个组件的实例的却引用了同一个data对象
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算：

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

我们可以为组件的 props 指定验证规格
type 可以是下面原生构造器：

• String
• Number
• Boolean
• Function
• Object
• Array
• Symbol

HTML 特性是不区分大小写的。当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

每个 Vue 实例都实现了事件接口 (Events interface)，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

进阶