官网学习
官网学习
双大括号不能在 HTML attributes 中使用。
计算属性返回的也是ref,需要添加value
不要在计算属性中做异步请求或者更改 DOM
v-show 不支持在 template 元素上使用，也不能和 v-else 搭配使用。
模板语法
动态绑定多个值 v-bind="obj"
<div v-bind="objectOfAttrs"></div>
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
使用 JavaScript 表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>
动态参数(值为字符串或null)
<a :[attributeName]="url"></a>
<a @[eventName]="doSomething"></a>
<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>
响应式基础
reactive和ref的部分区别
reactiveconst state = reactive({ count: 0 }) // n 是一个局部变量，同 state.count // 失去响应性连接 let n = state.count // 不影响原始的 state n++ // count 也和 state.count 失去了响应性连接 let { count } = state // 不会影响原始的 state count++ // 该函数接收一个普通数字，并且 // 将无法跟踪 state.count 的变化 callSomeFunction(state.count)refconst obj = { foo: ref(1), bar: ref(2) } // 该函数接收一个 ref // 需要通过 .value 取值 // 但它会保持响应性 callSomeFunction(obj.foo) // 仍然是响应式的 const { foo, bar } = obj- ref的数据在模板语法中
<script setup>
const count = ref(0)
const object = { foo: ref(1) }
const {foo} = object
</script>
<template>
<div>
<!-- 无需 .value -->
{{ count }}
</div>
<div>
<!-- 表达式将不会像预期的那样工作 -->
{{ object.foo + 1 }}
</div>
<div>
<!-- 正常显示2 -->
{{ foo + 1 }}
</div>
</template>
语法糖
<script setup>
let count = $ref(0)
function increment() {
// 无需 .value
count++
}
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>
计算属性缓存 vs 方法
- 每次页面重新渲染就会调用函数，只有依赖的数据变化才会触发计算属性的
getter
类与样式绑定
类的绑定
- 绑定对象
<!-- 是否有active这个类名取决于 isActive真假-->
<div class="defualt" :class="{ active: isActive }"></div>
<div class="defualt" :class="classObject"></div>
const isActive = ref(true)
const error = ref(null)
const classObject = computed(() => ({
active: isActive.value && !error.value,
'text-danger': error.value && error.value.type === 'fatal'
}))
- 绑定数组
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<!-- 简写 -->
<div :class="[{ active: isActive }, errorClass]"></div>
const activeClass = ref('active')
const errorClass = ref('text-danger')
const isActive = ref(true)
样式的绑定
- 绑定对象
<!-- 是否有active这个类名取决于 isActive真假-->
<div class="defualt" :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div class="defualt" :style="styleObject"></div>
const activeColor = ref('red')
const fontSize = ref(30)
const styleObject = reactive({
color: 'red',
fontSize: '13px'
})
- 绑定数组
<div :style="[baseStyles, overridingStyles]">我是红色的字体大小10px的字</div>
import {reactive } from 'vue'
const baseStyles=reactive({
color:'red'
})
const overridingStyles=reactive({
fontSize:'10px'
})
- 样式多值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">样式多值</div>
v-if vs v-show
v-if会销毁重建v-if惰性的，初始条件为false不会渲染该区域；v-show依赖display，无论初始条件如何，都会渲染v-show不支持在template元素上使用，也不能和v-else搭配使用。- 如果需要频繁切换，则使用
v-show较好；如果在运行时绑定条件很少改变，则v-if会更合适
v-for
<!-- 可以使用结构 -->
<li v-for="{ message } in items">
{{ message }}
</li>
<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
{{ message }} {{ index }}
</li>
<!-- myObject是对象 -->
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
事件处理
在内联事件处理器中访问事件参数
<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
Submit
</button>
function warn(message, event) {
// 这里可以访问原生事件
if (event) {
event.preventDefault()
}
alert(message)
}
事件修饰符
stoppreventselfcaptureoncepassive
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>
<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>
<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>
<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- .passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>
提示
-
使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用
@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为而@click.self.prevent则只会阻止对元素本身的点击事件的默认行为。 -
请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告
浙公网安备 33010602011771号