Frontend_Development

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

2017-02-04  本文已影响707人  coolheadedY

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

props与v-bind来传递数据

<div :id='data'></div>
<div v-bind:disabled='dis'></div>
<a v-bind:href="url"></a>
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
<a v-on:click="function">
<!-- 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 | 日期过滤器('年', '月', '日') }}
computed: {
  now: function () {
    return Date.now()
  }
}
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
  isActive: true,
  hasError: false
}
<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]">
<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 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>

官方例子

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>
example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})
// 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)
<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
    })
  }
}
<!-- 阻止单击事件冒泡 -->
<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>
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>
上一篇 下一篇

猜你喜欢

热点阅读