vue 3
一、Vue
https://v2.cn.vuejs.org/v2/cookbook/#top
1、如何学习vue
2、学习vue时遇到不会的方法，就看vue官方文档中的api
3、vue官方整理的比较好用的包
![]()
览器默认发送请求获取页签图标
shift强制刷新浏览器，可以查看这个请求的接口信息
4、vue模版解析
先有容器，再有实例
5、1个vue实例不能同时接管2个容器（不可以多容器对应1个例）
1个容器也不能对应多个实例
容器和vue实例只能一一对应
6.容器中模版，插值语法：{{内容}}，内容只能为js表达式、js语句、js代码
二、组件之间实现使用 v-model 实现双向绑定（语法糖）
1、父组件传值进来，子组件输入框修改时，通过 emit 触发更新
父组件变量也同步更新 —— 双向绑定完成
在自定义组件中，可以通过v-model实现双向绑定。需要注意的是，Vue 3 中的v-model默认会绑定到modelValue属性，并监听update:modelValue事件。
父组件：
<template>
<ChildComponent v-model="title" />
<p>父组件：{{ title }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const title = ref('初始标题')
</script>
子组件：
<template>
<input :value="modelValue" @input="onInput" />
</template>
<script setup lang="ts">
const props = defineProps<{
modelValue: string
}>()
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void
}>()
function onInput(e: Event) {
emit('update:modelValue', (e.target as HTMLInputElement).value)
}
</script>
三、Vue 2 监听子组件自定义事件
子组件 Student.vue
<template>
<button @click="sendEvent">触发事件</button>
</template>
<script>
export default {
methods: {
sendEvent() {
// 触发自定义事件 'atguigu'并传值'张三'
this.$emit('atguigu', '张三')
}
}
}
</script>
父组件 Parent.vue
<template>
<Student ref="student" />
</template>
<script>
export default {
methods: {
getStudentName(name) {
alert('收到学生名字：' + name)
}
},
mounted() {
// 通过 $refs 拿到子组件实例，监听子组件的 'atguigu' 事件
this.$refs.student.$on('atguigu', this.getStudentName)
}
}
</script>
四、Vue3组件自定义事件，通过模板的 @事件名="回调函数" 方式监听
子组件 Child.vue
<template>
<button @click="sendEvent">点击发送事件</button>
</template>
<script setup>
import { defineEmits } from 'vue'
// 定义要发出的事件名
const emit = defineEmits(['atguigu'])
function sendEvent() {
emit('atguigu', '张三')
}
</script>
父组件 Parent.vue
<template>
<Child @atguigu="getStudentName" />
</template>
<script setup>
function getStudentName(name) {
alert('收到学生名字：' + name)
}
</script>
总结：Vue3取消了$on事件监听，改为在模板中通过@享件名绑定监听函数。
子组件使用defineEmits定义事件，并通过emit（享件名'，参数）触发事件。
父组件在模板直接绑定监听函数，更简洁、清晰。
五、全局状态管理Vue3（如：Pinia）
当组件之间层级很深或是跨组件通信，可以使用状态管理工具。
// useUserStore.ts
export const useUserStore = defineStore('user', {
state: () => ({
username: '张三'
}),
actions: {
updateName(name: string) {
this.username = name
}
}
})
<!-- 子组件调用修改 -->
<script setup>
const userStore = useUserStore()
userStore.updateName('李四')
</script>
总结：适合多个组件共享全局状态（比如用户信息、主题、权限等）
六、const{proxy}=getCurrentInstance()
1、main.js入口文件
/* 引入apis 管理请求接口 */
import apis from "@/apis/apis.js"
/* 定义全局配置使用 */
app.config.globalProperties.$apis = apis
2、页面
<script setup>
import { getCurrentInstance } from 'vue'
const {proxy} = getCurrentInstance()
const handleLogin = async() => {
console.log(loginForm)
const res = await proxy.$apis.getMenu(loginForm)
console.log("res的数据为", res);
// 修改展示菜单数据
store.updateMenuList(res.menuList)
store.state.token = res.token
// 根据权限添加路由配置
store.addRoutes(router)
router.push('/home')
}
</script>
七、路由
八、new Vue({})-Vue实例data是对象
1、传统的全局 Vue 实例写法（不使用构建工具）
<html>
<head>
<meta charset="UTF-8" />
<title>传统的全局 Vue 实例写法 </title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
// data就是vm中的_data
const vm = new Vue({
el: '#root',
data: {
name: '尚硅谷',
address: '宏福科技园'
}
})
</script>
2、单文件组件（SFC）写法（*.vue）依赖构建工具（如 Vue CLI 或 Vite）来编译。
<script>
export default {
name: 'School',
data() {
return {
name: '尚硅谷atguigu',
address: '北京',
}
}
}
</script>
九、watch监听（vue2和vue3的不同写法）
1、在 Vue 2 和 Vue 3 中，watch 的功能都是监听响应式数据的变化并执行相应逻辑，但两者的写法和使用场景有所不同。
（1）vue2在 options API （选项式API）中使用：
export default { data() { return { count: 0, user: { name: 'Alice' } } }, watch: { count(newVal, oldVal) { console.log('count changed:', newVal, oldVal) }, // 监听对象要用 deep user: { handler(newVal) { console.log('user changed:', newVal) }, deep: true } } }