汕头市网站建设公司网站页面分类
Vue 3 是当下最流行的前端框架之一，其主要特点是性能更好、体积更小、更易于维护。下面是 Vue 3 的一些重要知识点和代码示例：
- 创建 Vue 实例
import { createApp } from 'vue'const app = createApp({data() {return {message: 'Hello, Vue 3!'}}
})app.mount('#app')
2.组件
import { defineComponent } from 'vue'export default defineComponent({props: {title: {type: String,required: true}},data() {return {message: 'Hello, Vue 3!'}},methods: {handleClick() {console.log('Button clicked')}},template: `<div><h1>{{ title }}</h1><p>{{ message }}</p><button @click="handleClick">Click me</button></div>`
})
3.生命周期钩子函数
import { onMounted, onUpdated, onUnmounted } from 'vue'export default {setup() {onMounted(() => {console.log('Component mounted')})onUpdated(() => {console.log('Component updated')})onUnmounted(() => {console.log('Component unmounted')})}
}
4.模板引用和插槽
<template><div><h1 ref="titleRef">{{ title }}</h1><slot></slot></div>
</template><script>
export default {props: {title: {type: String,required: true}},mounted() {// 操作模板引用console.log(this.$refs.titleRef)}
}
</script>
5.响应式数据
import { reactive } from 'vue'export default {setup() {const state = reactive({message: 'Hello, Vue 3!'})return {state}}
}
6.生命周期函数
import { onMounted, onUpdated, onUnmounted } from 'vue'export default {setup() {onMounted(() => {console.log('Component mounted')})onUpdated(() => {console.log('Component updated')})onUnmounted(() => {console.log('Component unmounted')})}
}
7.组件通信
// 父组件
<template><div><child :message="message" @update-message="updateMessage" /></div>
</template><script>
import Child from './Child.vue'export default {components: {Child},data() {return {message: 'Hello, Vue 3!'}},methods: {updateMessage(newMessage) {this.message = newMessage}}
}
</script>// 子组件
<template><div><p>{{ message }}</p><button @click="handleClick">Update message</button></div>
</template><script>
import { defineEmits, defineProps } from 'vue'export default {props: defineProps({message: {type: String,required: true}}),emits: defineEmits(['update-message']),methods: {handleClick() {this.$emit('update-message', 'New message')}}
}
</script>
这些是 Vue 3 的一些重要知识点和代码示例，但不仅限于此。作为一个全面的前端框架，Vue 3 还有许多其他功能和工具，可以让您编写出更好的 Web 应用程序。