Vue学习中觉得要记下的内容

有些东西不常用就会忘，用于没事的时候翻一翻，内容不局限于教程

props与v-bind来传递数据

• v-bind可以绑定属性

<div :id='data'></div>
<div v-bind:disabled='dis'></div>
<a v-bind:href="url"></a>

• vue模板支持的函数表达式类型

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

• vue事件

<a v-on:click="function">

• 过滤器filters

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

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

{{ message | filterA | filterB }}
{{ message | 日期过滤器('年', '月', '日') }}

• 计算属性的运用环境和要点
  1复杂逻辑
  2与methods相比计算属性依赖缓存，methods每次重新渲染时都执行
  Date.now()在计算属性时不变的，不是响应式依赖

computed: {
  now: function () {
    return Date.now()
  }
}

• class对象语法-直接用于判断

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
  isActive: true,
  hasError: false
}

• class数组语法-直接用于拼接, 也可以在里面进行判断

<div v-bind:class="[activeClass, errorClass]">
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">

• 计算属性与class相配合

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

• 绑定内联样式-对象展示直观体现

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

<div v-bind:style="[baseStyles, overridingStyles]">
//对象语法可以放入多个样式对象

• 条件渲染, template用来包裹多个元素并且不会显示

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key='不需要复用input内的数据'>
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key='不需要复用input内的数据'>
</template>

官方例子

• v-for和v-if一样可以用template来渲染多个模块

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

• v-for的参数索引

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

• v-for可以迭代对象
  迭代对象

• 重塑数组filter(), concat(), slice()等方法不会改变原数组会返回新的数组，需要重新赋值给新数组，vue不会重新渲染dom

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

• vue数组方法的两种替代方式, 都用splice比较方便
  vm.items[i] = newValue无效，不会触发更新

// Vue.set
Vue.set(arr.items, i, newValue)
// Array.prototype.splice`
arr.items.splice(i, 1, newValue)

vm.items.length = newLength无效，不会触发更新

arr.items.splice(newLength)

• v-for过滤数组
  计算属性

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

方法过滤

<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
    })
  }
}

• 事件修饰符
  event.preventDefault()或 event.stopPropagation()可以写在methods里面

<!-- 阻止单击事件冒泡 -->
<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>
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>

• vue按键事件和按键修饰符
  event.keyCode找键盘码

function keyDown(e){console.log(e.keyCode)}
document.onkeydown = keyDown;

<!-- 只有在 keyCode 是 13 时调用 vm.fn() -->
<input v-on:keyup.13="fn">

按键别名

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

<input v-on:keyup.enter="fn">
<!-- 缩写语法 -->
<input @keyup.enter="fn">

自义定别名

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

• 按键修饰符

.ctrl
.alt
.shift
.meta //mac下是commoned、Windows下是win键

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>