vue 模板语法-动态参数:
<a :[attributeName]="url"> ... </a>
可以动态的绑定属性和事件.会先计算[ ]中的js表达式的值,再将值作为需要绑定的属性. 要求最终必须是字符串或者是null,为null会移除这个属性,若为其他类型,则触发一个warning.
推荐将attributeName,作为一个计算属性.来计算值.
vue-响应式对象
响应式对象的具体原理 JavaScript Proxy
响应式对象是默认深层响应式. 所以不要使用太深层次的对象.会影响性能. shallowReactive(),是浅层次的数据相应式,只有顶层可以数据.
reactive 赋值或解构至本地变量,或将属性传入到函数中时,都会丢失响应式. ref,从一般对象,或者传递给函数,不会丢失响应.是模板渲染上下文的顶层属性时才适用自动“解包”。
computed-计算属性
const yourComputedName = computed(()=>{
// 需要确定最终的值.
return xxx
})
最终接收的值,是一个计算属性ref. 因为是在模板中引用,所以不需要".value".
可写的计算属性(设置get setter)的值.(用的少,但是还是要记一下) get等于原本的, set(newValue)中的值是计算属性的新值.
const fullName = computed({
// getter
get() {
return firstName.value + ' ' + lastName.value
},
// setter
set(newValue) {
// 注意：我们这里使用的是解构赋值语法
[firstName.value, lastName.value] = newValue.split(' ')
}
})
getter中最好不要有任何副作用函数(异步请求和更改 DOM).推荐用watch去做.
class与style 动态绑定(几种用法)
可以与其他的class共存.
1. :class="{ active: isActive }"
2. :class="{ active: isActive, 'text-danger': hasError }"
3. const classObject = computed(() => ({
active: isActive.value && !error.value,
'text-danger': error.value && error.value.type === 'fatal'
}))
4. :class="[isActive ? activeClass : '', errorClass]"
// 使勇三元表达式,来选择你要表述的类.
5. :class= "[{isActive:activeClass},errorClass]"
在组件上使用: 如果组件内只有一个根组件,那组件名上的class的类名,都会移动到唯一的根组件上. 若有多个根组件,需要指定一个根组件来接收.
:class="$attrs.class"
事件处理
如果你想使用自定义事件时,任然要接收原生 DOM 事件,可以这么做.
//方式一: 使用特殊参数 $event
@click = "onClick('你自定义的参数',$event)"
// 方式二: 使用箭头函数,用参数取接一下
@click = "(event) => onClick('你自定义参数',event)"
v-model 修饰符
v-model.lazy 表示只有数据变化后,才会更新. 原本是(输入是input事件时更新) .number 是自动将输入转入数字,转不了,就保留原来的值. .trim 去除前后两段的空格
生命周期函数
请不要把生命周期函数写到定时器等其他异步函数中,会丢失组件示例.
watch 侦听属性
有多个参数,第一个参数是要监听的值.可以是ref, getter函数,多个响应数据组成的数据. 第二个是副作用函数.第一个值变了,需要执行的函数. 第三个参数,是个对象 { deep: true } 深度监视. { immediate: true } 立即执行一遍.
let x = ref('')
watch(x,()=>{ })
// 若只监测一个reactive中的一个属性,不可以用直接监听. x.count
需要写成getter模式.
watch(( )=>x.count,()=>{ })
组件上的 v-model
<MyComponent v-model="searchText">
等同于:
<input :value="searchText" @input="searchText = $event.target.value" />
现在给v-model加上参数v-model:title 子组件内要怎么处理. 没有参数时,默认为modelValue, v-model可以同时使用多个.绑定到组件内的元素上就可以了.
父组件:
<MyComponent v-model:title="searchText">
子组件:
<script setup>
const emits = defineEmits(['update:title'])
const props = defineProps(['title'])
<script>
<template>
<input type="text" :valse= "title" @input = "$emit('update:title',$event.target.value)">
</template>
v-model还可以去自定义修饰符. 修饰符用modelModifiers去承接它.modelModifiers默认是一个空对象.有那个参数,值就是true. modelModifiers需要放在props的最后面.
<script setup>
const props = defineProps({
modelValue: String,
modelModifiers: { default: () => ({}) }
})
const emit = defineEmits(['update:modelValue'])
function emitValue(e) {
let value = e.target.value
if (props.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
emit('update:modelValue', value)
}
</script>
<template>
<input type="text" :value="modelValue" @input="emitValue" />
</template>
