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

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

props与v-bind来传递数据

• v-bind可以绑定属性

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

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

• vue事件

• 过滤器filters

{{ message | filters}}

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对象语法-直接用于判断

data: {
  isActive: true,
  hasError: false
}

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

• 计算属性与class相配合

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

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

data: {
  activeColor: 'red',
  fontSize: 30
}

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

//对象语法可以放入多个样式对象

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

官方例子

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

• v-for的参数索引

  {{ index }}. {{ key }} : {{ value }}

• 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过滤数组
  计算属性

{{ n }}
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

方法过滤

{{ n }}
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里面

...

...

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

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

按键别名

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

自义定别名

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

• 按键修饰符

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

Do something