Vue 相关笔记

· 2024-04-20 · # vue # html

记录一些 Vue 知识

常用标签属性

v-text 和 v-html

v-text

相当于 innerText 但是响应式
一般不用直接 {{ text }}

v-html

相当于 innerHtml 但是响应式

v-show 和 v-if

区别，一个是隐藏，一个是小消失

v-show

根据值的真假，是否显示组件

v-if

根据值的真假，是否渲染组件

v-else 和 v-else-if

不好说，借来官网示例理解

v-else

<div v-if="Math.random() > 0.5">Now you see me</div>
<div v-else>Now you don't</div>

v-else-if

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

v-for

动态生成多个模板元素

<div v-for="item in items">{{ item.text }}</div>
<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

v-on

类似 onclick addEventerListener 等
可以简写为@

<button @click="要执行的函数或代码">按钮</button>

可以便捷的阻止事件冒泡通
过加入 .prevent .stop 来代替
event.preventDefault() 或 event.stopPropagation()

<a @click.stop="doThis"></a>
<form @submit.prevent="onSubmit"></form>
<a @click.stop.prevent="doThat"></a>

v-bind 和 v-model

使用在元素属性中（区别于 {{ }} ）的数据绑定

v-bind

数据单向绑定
(简写为 :attr="varF")

<a :herf="url">{{ url }}</a>

v-model

数据双向绑定，通常用于表单元素
（代替 value 属性？）

<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>

仅限：

<input>
<select>
<textarea>
components

修饰符

.lazy - 监听 change 事件而不是 input
.number - 将输入的合法字符串转为数字
.trim - 移除输入内容两端空格

v-slot

插槽相关，用于指定插槽名字

<template v-slot:slotname> </template>

可以缩写

<template #slotname> </template>

其他

父组件到子组件的传参

通过 provide 传出 inject 接收

父组件

import { provide } from "vue";

var a = ref(0);
var b = () => {
  console.log(1);
};
// 支持变量和函数
provide("provide_a", a);
provide("provide_fun_b", b);

子组件

import { inject } from "vue";

var a = inject("provide_a");
var b = inject("provide_fun_b");

匿名插槽和具名插槽

普通自闭合标签

<Com2 />

匿名插槽

<Com2>
  <div>插进来了</div>
</Com2>

具名插槽，需要指定名称，有两个写法

<Com2>
    <template v-slot=slotProps>
        <div>写法 1</div>
    </template>

    <template #slotProps>
        <div>写法 2</div>
    </template>
</Com2>

com2.vue
两 slot 同时写的话根据传入的插槽类型自动选择生效

<template>
  <div>组件 2 开始</div>

  <slot />
  <slot name="slotProps" />

  <div>组件 2 结束</div>
</template>

子组件到父组件的传参

父组件

<template>
    <Com2 #slotProps="data">
        <div>{{ `${data.apple} + ${data.paper}` }}</div>
    </Com2>
</template>

子组件

<template>
  <div>组件 2 开始</div>

  <slot name="slotProps" apple="apple" paper="paper" />

  <div>组件 2 结束</div>
</template>

##　生命周期函数

一些 on 开头的函数

父组件

<template>
	<Div2 v-if="show" />
	<input type="button" value="切换" @click="delete_div">
</template>

<script setup>
import Div2 from './components/2.vue'
import { ref } from 'vue'

var show = ref(true);
var delete_div = () => {
	show.value = !show.value;
}
</script>

v-if 不仅仅控制元素的可见性
它还会根据条件动态地创建或销毁 DOM 元素
因此可以用来测试挂载和卸载组件

子组件 2.vue

<template>
    num: {{ num }}
    <input type="button" value="添加" @click="add">
</template>

<script setup>
import {
    ref,
    onBeforeMount, onMounted,
    onBeforeUpdate, onUpdated,
    onBeforeUnmount, onUnmounted,
} from "vue";

var add = () => {
    num.value++;
};

var num = ref(0);

onBeforeMount(() => {
    console.log("[挂载] 组件 1 挂载前");
});
onMounted(() => {
    console.log("[挂载] 组件 1 挂载");
});

onBeforeUpdate(() => {
    console.log("[更新] 组件 1 更新前");
});
onUpdated(() => {
    console.log("[更新] 组件 1 更新");
});


onBeforeUnmount(() => {
    console.log("[卸载] 组件 1 卸载前");
});
onUnmounted(() => {
    console.log("[卸载] 组件 1 卸载");
});
</script>

`toref` 和 `torefs`

用于将响应式数据转换为 ref。

import { reactive, toRef, toRefs } from "vue";

const state = reactive({
  count: 0,
});

const state = reactive({
  count: 0,
  name: "Vue",
});

const count = toRef(state, "count");
const { count, name } = toRefs(state);