计算属性缓存
将同样的函数定义为方法而不是计算属性时，两种方法的结果上时一致的，而计算属性会基于其响应式依赖被缓存只有在其响应式依赖变更的时候才会重新计算，但是方法在每次访问的时候都会重复执行函数。
样式绑定
绑定数组
我们可以通过给:class绑定一个数组来渲染多个css
1
| <div :class="[activeClass, errorClass]"></div>
|
相应的，也能在数组里面用对象或者三目表达式来进行有选择的渲染
1
2
3
| <div :class="[{ active: isActive }, errorClass]"></div>//`isActive`为真时active被渲染
<div :class="[isActive ? activeClass : '', errorClass]"></div>
|
组件绑定 根元素
- 在给组件绑定时，如果组件只有一个根元素，那么就会直接给这个根元素渲染
- 当有多个根元素时，就可以通过
@attrs属性来实现指定：
1
2
3
| <!-- MyComponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
|
1
| <MyComponent class="baz" />
|
会被渲染成：
1
2
| <p class="baz">Hi!</p>
<span>This is a child component</span>
|
内联样式
:style支持绑定javascript对象值，对应的时html元素的style属性：
1
2
| const activeColor = ref('red')
const fontSize = ref(30)
|
1
| <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
|
绑定对象
可以通过直接绑定一个对象来使模板更加简洁：
1
2
3
4
| const styleObject = reactive({
color: 'red',
fontSize: '13px'
})
|
1
| <div :style="styleObject"></div>
|
绑定数组
可以通过绑定多个数组来合并并且渲染到同一个元素上面：
1
| <div :style="[baseStyles, overridingStyles]"></div>
|
列表渲染
1
2
3
4
5
6
7
8
| <li v-for="{ message } in items">
{{ message }}
</li>
<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
{{ message }} {{ index }}
</li>
|
单大括号内与对象的属性名保持一致
v-for与对象
你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
1
2
3
4
5
| const myObject = reactive({
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
})
|
1
2
3
4
5
| <ul>
<li v-for="value in myObject">
{{ value }}
</li>
</ul>
|
第二个参数表示属性名，第三个参数表示位置索引
1
2
3
| <li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
|
v-if 与 v-for
同一个节点上，v-if的优先级比v-for高，所以将无法读取到别名
1
2
3
4
5
6
7
| <!--
这会抛出一个错误，因为属性 todo 此时
没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>
|
方法事件处理器
v-on可以接收一个函数名来对函数调用
1
2
3
4
5
6
7
8
9
| const name = ref('Vue.js')
function greet(event) {
alert(`Hello ${name.value}!`)
if (event) {
alert(event.target.tagName)
}
}
|
1
2
| <!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>
|
一点例子
1
2
3
4
5
6
7
8
9
10
11
| <script setup>
defineProps(['title'])
defineEmits(['remove'])
</script>
<template>
<li>
{{ title }}
<button @click="$emit('remove')">Remove</button>
</li>
</template>
|