当前位置：首页 > news >正文

Vue3笔记

news 来源：原创 2025/4/20 13:16:11

创建组件并绑定到DOM

import { createApp } from 'vue';
import MyApp from './MyApp.vue';const myApp = createApp(MyApp);
myApp.mount('#myApp'); // <div id="myApp"></div>

Vue文件示例

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script><template><button @click="count++">Count is: {{ count }}</button>
</template><style scoped>
button {font-weight: bold;
}
</style>

全局错误处理

myApp.config.errorHandler = (error) => {};

模板语法

文本插值

<!--
import { ref } from 'vue';
const userName = ref("");
-->
<p>Hello, {{ userName }}!</p>

绑定动态属性

<!-- 绑定属性 -->
<p v-bind:id="dynamicId"></p>
<p :id="dynamicId"></p>
<p v-bind:id></p> <!-- 等效于 v-bind:id="id"，下同 -->
<p :id></p><!-- 绑定多个属性 -->
<!--
const multiplyAttributes = {id: 'myId',class: 'myClass',style: 'background-color:green'
};
-->
<div v-bind="multiplyAttributes"></div><!-- 绑定参数 -->
<a v-bind:href="url"></a>
<a :href="url"></a><!-- 条件指令 -->
<div v-if="display"></div>
<div v-show="display"></div><div v-if="type === 'A'"></div>
<div v-else-if="type === 'B'"></div>
<div v-else></div><!-- 绑定事件 -->
<div v-on:click="clickFunction"></div>
<div @click="clickFunction"></div><!-- 绑定动态参数/事件 -->
<a v-bind:[dynamicAttributeName]="url"></a>
<a :[dynamicAttributeName]="url"></a>
<div v-on:[dynamicEventName]="functionName"></div>
<div @[dynamicEventName]="functionName"></div><!-- 修饰符 -->
<div @submit.prevent="submitFunction"></div> <!-- 调用event.preventDefault() --><!-- 绑定样式类 -->
<!--
const isActive = ref(true);
// 当isActive为真时，渲染为 <div class="active"></div> 。
-->
<div :class="{ active:isActive }"></div><!-- 列表渲染 -->
<li v-for="item in items">{{ item.name }}
</li>
<li v-for="(item,index) in items">{{ index }} {{ item.name }}
</li>
<span v-for="n in 10"> {{ n }} </span> <!-- 渲染1..10。 --><MyComponent v=for="item in items" :key="item.id" />
<MyComponent v-for="(index,item) in items" :key="item.id" :index="index" :item="item" />

声明响应状态并发布

<script setup>
import { ref } from 'vue';
const count = ref(0);function increaseCount() {count.value++;
}
</script>

组件

注册组件

<script setup>
import MyComponent from './MyComponent.vue';
</script>

声明属性

<script setup>
defineProps(['foo']);
defineProps({name: String
});
</script>

监听属性变化

<script setup>
const props = defineProps(['foo']);
watchEffect(() => { console.log(props.foo); });
</script>

声明自定义事件

<script setup>
const emit = defineEmits(['foo', 'bar']);function fire() {emit('foo');
}
</script>

定义模型

<script setup>
const first = defineModel(first');
const second = defineModel(second');
</script><template>
<input type="text" v-model="first" />
<input type="text" v-model="second" />
</template>

模型实际上是双向的ref。每个v-model只包含一个简单的状态，并非整个组件整体状态的聚合。组件的整体状态由多个v-model组成。

响应状态ref、属性props、模型model的区别

响应状态用于单向输出，负责控制界面状态。属性用于单向输入，负责向组件传递信息。模型用于双向绑定，用于向组件传递信息，并且这个信息也要同步输出到界面的情况。

插槽

插槽是模板中的动态部分，其内容根据组件标签的innerHTML动态替换。假设有下面的组件

<!-- FancyButton -->
<template><button class="fancy"><slot></slot></button>
</template>

我们给出组件的使用示例和实际渲染结果。

<FancyButton>Haha</FancyButton>

<button class="fancy">Haha
</button>

组件可以包含多个插槽，此时要为插槽分配名字。

<template><slot name="header"></slot><slot name="body"></slot>
</template>

在使用这种组件时，需要通过<template>标签绑定对应插槽。

<div><MyComponent><template v-slot:header>header line</template><template #body> <!-- #是v-slot:的缩写 -->body content</template></MyComponent>
</div>

非本地属性

组件可以将自己的属性提供给下级组件使用。

<script setup>
import { ref, provide } from 'vue';const count = ref(0);
function increase() {count.value++;
}provide('count', {count,increase
});
</script>

<script setup>
import { inject } from 'vue';const { count, increase } = inject('count');</script>

如果不希望下级组件修改属性，可以通过readonly方法提供只读属性。

<script setup>
import { ref, readonly, provide } from 'vue';
const count = ref(0);
provide('count', readonly(count));
</script>

定义和使用组合式函数

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue';export function useMouse() {const x = ref(0);const y = ref(0);function update(event) {x.value = event.pageX;y.value = event.pageY;}onMounted(() => window.addEventListener('mousemove', update));onUnmounted(() => window.removeEventListener('mousemove', update));return {x, y};
};

<script setup>
import { useMouse } from './mouse.js';const { x, y } = useMouse();
</script>

import { ref } from 'vue';export function useFetch(url) {const data = ref(null);const error = ref(null);fetch(url).then((res) => res.json()).then((json) => (data.value = json)).catch((err) => (error.value = err));return { data, error };
}