一、环境配置：1. npm create vue@latest #安装vue 3.5.13 2. cd projectDir 3. npm install # 安装vue 4. npm run dev # 运行：其实运行的是src/package.json 中的vite命令，和在控制台直接输入vite的效果相同 5. npm run build # 打包 上线版本二、基础学习： 1. 选项式API:常用的，组合式API:单页项目推荐使用 2. 定义数据时要使用ref(): 触发组件的重新渲染、数据的深层响应性(要使用.value的方式取值)要使对象本身具有深层响应性要使用reactive()，只能用于集合类型，不能用于原始数据类型，建议使用ref作为响应式的主要api。 3. attributes:v-html: 在当前标签中插入html，并渲染v-bind:id(等于:id): 动态绑定id属性，支持同名简写：v-bind:id / :id 表示动态变量的名是idv-if: 更高的切换开销v-show: 更高的初始渲染开销v-for: 不建议v-if 和 v-for 同时使用，但是v-if的优先级要高于v-for，最佳实践：加一个template标签使用v-for，然后在子标签中使用v-if。推荐给v-for提供一个:key属性。v-on:click(等于@click): 监听DOM事件事件修饰符：@click.once、@click.strop(停止事件传递)@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。按键修饰符：@keyup.enter:回车键抬起时执行，.enter/.tab/.delete (捕获“Delete”和“Backspace”两个按键)/.esc/.space/.up/.down/.left/.right/.ctrl/.alt/.shift/.meta<input @keyup.alt.enter="clear" /><!-- Alt + Enter -->v-model: 数据双向绑定 4. await nextTick() //等待DOM更新完成 5. 计算属性:与函数的区别是计算属性有缓存，函数则在每次重新渲染时都会执行，因此计算属性要比函数快计算发生的值不应该被更改，可以认为计算属性是其他数据的一个快照，更改快照是没有意义的，建议修改原数据，以产生新的计算属性const publishedBooks = computed(() => {return auth.value.books.length > 0 ? 'Yes' : 'No'}) 6. v-bind:class(:class): 特殊增强功能，可以使用对象{active:isActive,box:true}isActive==true 渲染结果：class="active box" isActive==false 渲染结果：class="box" 7. 生命周期：onMounted、onUpdated、onUnmounted...... 8. 侦听器: watch// let count = ref({count: 0})// 侦听对象属性变化watch(()=>count.value.count, async (newCount, oldCount) => {console.log(newCount)console.log(oldCount)})或watch(count, async (newCount, oldCount) => {console.log(newCount)//newCount == oldCount console.log(oldCount)//newCount == oldCount }, {deep: true}) // deep true 9. 获取dom元素：<input ref="my_input" type="text" />/*获取dom元素、也适用获取组件*/const inputElement = useTemplateRef('my_input')onMounted(()=>{inputElement.value.focus() //聚焦 })10. 组件：组件命名必须使用大驼峰格式，使用时在DOM 中可以使用<my-component>调用1. 子组件获取父组件中的数据可以使用attribute传值的方式，子组件通过props接收，prop接收数据的命名使用小驼峰2. 子组件调用父函数1. 父组件定义函数function logParentMessage() {console.log(messages.value)}2. 调用组件时定义事件属性<DemoComponent :data="messages" @parentMethod="logParentMessage"/><!--@parentMethod-->3. 在子组件中声明触发的事件：类似props的接收const emit = defineEmits({parentMethod:{type: Function,required: true}})4. 在子组件的事件中使用emit调用接收到的父组件中的事件属性<button @click="$emit('parentMethod')">调用父组件中的方法</button> 或function callParentMethod(){emit("parentMethod","param");}<button @click="callParentMethod">调用父组件中的方法</button>3. 父组件访问子组件数据：1. 使用子组件调用父组件的函数，然后把子组件的数据作为参数传递给父组件，但是该方法是子组件的事件驱动2. ref获取：const child = ref(null) // 获取子组件对象，常量名的定义要和 组件调用时ref的值相等child.value.childMessage // childMessage为子组件的数据<DemoComponent ref="child" :data="messages" @parentMethod="logParentMessage">这是插槽内容：这是子组件</DemoComponent>// 在子组件中导出数据变量 defineExpose({childMessage,})4. 父组件调用子组件函数：和父组件访问子组件数据类似，只要把子组件函数在defineExpose中导出即可(上面3.2)5. 插槽: slot 类型于div标签中的内容6. 单向绑定：prop接收数据时数据变量使用小驼峰，在父组件中传递是使用my-data的格式，因为dom是不区别大小写的，要形成这种良好习惯。不建议且不应该在子组件中修改父组件传递过来的数据，如果确实有需要则应该在子组件中copy一个新变量。如果传递的是对象，那么在子组件中修改对象的属性，那么父组件中对象的属性也已经改变了，但是不会通知到父组件重新渲染，在父组件中nextTick渲染中会使用子组件修改后的数据。这种情况建议不要传递数组或对象，或者通过10.2调用父组件的函数实现。7. 组件数据的双向绑定v-model示例一：父组件：const countModel = ref(10) // 定义数据<demo-component v-model="countModel"></demo-component> // 绑定v-model ***注意语法子组件：const model = defineModel()// 修改值const changeModel = () => {model.value = model.value + 1console.log('changeModel',model.value)}// 显示<div>子组件中显示v-model的值：{{ model }}</div> 示例二：父组件：const bookTitle = ref("this is book title")<div>父组件的title:{{bookTitle}}</div><demo-component v-model:title="bookTitle" v-model="countModel"></demo-component> // 绑定v-model ***注意语法子组件：const title = defineModel('title')子组件的title:<input v-model="title" />8. 插槽：1. <slot>Submit(默认值)</slot>2. 具名插槽：子组件插槽出口：<slot name="header"></slot><slot name="footer"></slot>父组件需要定义v-slot:<childCompont><template v-slot:header><!--简写为#header--><!-- header 插槽的内容放这里 --></template></childCompont>3. 条件插槽：子组件：<div v-if="$slots.header" class="card-header"><slot name="header" /></div>9. 依赖注入：用于解决深层子组件使用较远祖先组件中部分数据的问题1. 祖先组件注入数据：import {createApp, provide, ref} from "vue"/*为后代组件提供数据*/provide("appVueData", ref("This data from App.vue"))2. 深层子组件使用数据const appVueData = inject("appVueData", "default value")3. 如果要更改祖先组件的数据，应该在祖先组件注入更新方法，然后在较远子组件中调用更新方法4. 如果禁止较远子组件更改数据，要用readonly 包装 提供的数据5. 如果使用依赖注入的方式，建议使用一个文件维护key，避免key名冲突
