有些东西不常用就会忘，用于没事的时候翻一翻，内容不局限于教程
- 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>
网友评论