# 学Vue

2019-07-03 17:02:45

模板语法（基于html）

• 改变文本内容使用插值表达式：双括号 {{ msg }}
• 渲染html，用 v-html
• 改变html标签属性的值使用 v-bind
• 一些指令：v-if，v-for，v-else-if，v-else
• 绑定事件：v-on
• v-on,v-bind 支持动态属性

    v-bind:[attributeName]
    v-on:[eventName]

• 缩写
  v-on:click -> @click
  v-bind:id -> :id

计算属性（computed）

• 侦听功能，动态计算数据
• computed 与 data 平级
• 缓存：依赖的数据没变，其它地方使用都直接用缓存数据
• 有 setter 和 getter
• 当需要在数据变化时执行异步或开销较大的操作时，用侦听器watch

class绑定 - v-bind:class

• 可以传一个对象
  <div v-bind:class="{ active: isActive }"></div>
• 可与 class 共存
• 可以传一个对象，也可以传一个返回对象的计算属性
• 可以传一个数组
• 组件模板中的 class 不会被根元素上面的 class 覆盖
• style 绑定与 class 绑定类似

条件渲染（v-if）

• Vue会复用已有元素

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

以上，input 被复用，不要复用的话，用 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）

• inof 都可以

<div v-for="item in items"></div>
<div v-for="item of items"></div>

• 支持可选的第二个参数，即当前项的索引
  <div v-for="(item, index) in items"></div>

• 可以遍历一个对象，支持3个参数
  <div v-for="(value, name, index) in object">

• 尽可能使用 v-for 时提供 key 属性

• Vue 不能检测以下数组的变动
  vm.items[1] = 'x' // 不是响应性的
  替代方法：

  // Vue.set
  Vue.set(vm.items, indexOfItem, newValue)
  
  // Array.prototype.splice
  vm.items.splice(indexOfItem, 1, newValue)
  

• 当在组件上使用 v-for 时，key 现在是必须的

事件处理

• 事件修饰符，可以串联多个修饰符
  1 .stop 阻止事件继续传播
  2 .prevent 阻止默认行为
  3 .capture
  4 .self
  5 .onece
  6 .passive

• 按键修饰符
  1 .enter
  2 .tab
  3 .delete
  4 .esc
  5 .space
  6 .up
  7 .down
  8 .left
  9 .right
  通过全局 config.keyCodes 自定义案件修饰符别名：
  Vue.config.keyCodes.f1 = 112

• 系统组合按键

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

表单输入绑定（双向绑定）

• 双向绑定 MVVM 就是 model 到 view，view 到 model

• 适用的表单元素 <input>,<textarea>,<select>,checkbox,radio

• v-model 其实是语法糖
  1 <text>,<textarea> 使用 value 作为 prop 和 input 事件
  2 <checkbox>,<radio> 使用 checked 作为 prop 和 change 事件
  3 <select> 使用 value 作为 prop 和 change 事件

  <input
    v-bind:value="searchText"
    v-on:input="searchText = $event.target.value"
  >
  

• 修饰符
  1 .lazy

  <!-- 在“change”时而非“input”时更新 -->
  <input v-model.lazy="msg" >
  

  2 .number
  3 .trim

组件

• data 必须是一个函数

  data: function () {
    return {
      count: 0
    }
  }
  

• 通过 prop 向子组件传递数据

• 子组件可调用父级组件的事件，并能传递值给父组件

  // 子组件
  <button v-on:click="$emit('enlarge-text', 0.1)">
    Enlarge text
  </button>
  
  // 父级组件
  <blog-post
    ...
    v-on:enlarge-text="postFontSize += $event"
  ></blog-post>
  
  // 或者 父级组件使用函数
  <blog-post
    ...
    v-on:enlarge-text="onEnlargeText"
  ></blog-post>
  

  methods: {
    onEnlargeText: function (enlargeAmount) {
      this.postFontSize += enlargeAmount
    }
  }
  

• 组件 v-model

  <custom-input v-model="searchText"></custom-input>
  
  Vue.component('custom-input', {
    props: ['value'],
    template: `
      <input
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    `
  })