Vue2基础知识整理

1.Vue:渐进式的Javascript框架，渐进式指的就是Vue“可以被逐步集成”，意思就是既可以整个项目使用Vue框架，也可以在其中某个页面使用Vue框架。vite就是一个类似于webpack的自动化脚手架工具。Vue2使用选项式API风格，Vue3使用组合式API风格。
2.node.js是一个基于Chrome V8引擎的Javascript运行环境，是由C++书写的。
3.创建Vue项目的命令是npm init vue@latest
4.typescipt是js的超集，支持ES语法，能够解决js类型错误的问题，也被叫为静态类型检查器，方便后期维护。es是写在文档里的js,ts是静态类型检测的js。
5.项目目录
.vscode vscode 配置文件
nude_modules Vue项目的运行依赖文件夹
public 资源文件夹（浏览器图标）
src 源码文件夹
.gitignore git忽略文件
index.html html入口文件
package.json 信息描述文件
README.md 注释文件
vite.config.js Vue配置文件
6.模板语法：Mustache语法指的就是双大括号语法
7.属性绑定：:class=“name”,如果绑定的属性是null或undefined,则此属性被移除。可以动态绑定多个属性，可以是自定义属性。
8.条件渲染：v-if, v-else, v-else-if, v-show; 频繁的渲染建议用v-show
9.列表渲染：v-for；:key可以使得改变顺序的时候不用重新渲染
10.事件处理：使用@监听DOM事件，在事件触发时执行对应的Javascript。分为内联事件处理器（直接写在后面）和方法事件处理器（后面写的是方法名）。
11.事件传参：可以获取到event事件；已经有参数的情况下需要用$event获取event对象。
12.事件修饰符：.prevent:阻止默认事件；.stop:阻止事件冒泡
13.数组变化检测：分为变更方法和替换一个数组两种方法
14.计算属性：就是把模板语法的复杂逻辑放到计算属性里，防止模板语法过于臃肿。计算属性会基于其响应式依赖被缓存。
15.class绑定：除了绑定字符串外还可以绑定对象和数组。数组和对象嵌套时，只能是数组嵌套对象。
16.Style绑定：和class绑定差不多
17.SDK：软件开发工具
18.侦听器：响应式数据发生变化时可以被侦听到,函数名必须与侦听的数据名保持一致
watch:{
message(newValue,oldValue){
}
}
19.表达输入绑定 v-model
修饰符 .number 只要数字 .trim 去掉空格 .lazy 输入完再响应
20.模板引用：其实就是操作DOM 通过ref获取到DOM元素，通过this.$ref.name获取到这个元素
21.组件组成：最大的功能就是可复用性, .vue文件是单文件组件，一个组件必须有template, 组件使用分为三步，引入组件，注入组件和显示组件。style中的scope的作用就是让当前样式只在当前组件中生效
22.组件嵌套关系：组件之中可以套组件
23.组件注册方式：分为全局注册和局部注册，全局注册再main.js中注册
24.组件传递数据：组件与组件之间通过props传递数据，props传递数据从父级传到子级，props传递函数时可以通过函数带的参数实现数据从子传到父。此外，props是只读的

props:[“title”]
props校验：
props:{
title:{
type:String
}
}
25.组件事件：使用$emit方法触发自定义事件，实现数据子传父
26.透传属性：class,style,id
禁用属性 export default { inheritAttrs:false }
27插槽：
v-slot:name(可以简写为#) 可以设置带名字的插槽
28.组件的生命周期：创建期（beforeCreate,created）、挂载期(beforeMount,mounted)、更新期(beforeupdate,updated)、销毁期(beforeUnmount,unmounted)
29.动态组件：组件来回切换

30.组件保持存活：



31.异步组件：defineAsyncComponent
import { defineAsyncComponent } from “vue”
import A from “./components/A.vue”
const B = defineAsyncComponent(()=>
import(“./components/B.vue”)
)
32.依赖注入：
provide:{
message:“爷爷的财产”
}
inject:[“message”]