| 各种分类 | 对应词汇 | 相应描述 |
|---|---|---|
| Sass编译插件 | Live Sass Compiler | vscode编译sass的插件 |
| sass文件后缀名 | .scss | sass文件的后缀名之一。在该文件中，可以写花括号{}和分号 |
| .sass | sass文件的后缀名之一。在该文件中，不能写花括号{}和分号 | |
| sass修饰符 | & | 修饰符，表示上层标签。如下: |
| sass变量 | $ | 使用sass，可以用来定义css变量（变量名可自定义），语法如下： |
| lighten() | 颜色变量相关的功能函数，可以把颜色变浅 | |
| darken() | 颜色变量相关的功能函数，可以把颜色变深 | |
| @import | 关键字，可以用来引入css变量 | |
| @mixin | 关键字，用来定义混入的内容 | |
| @include | 关键字，用来引入@mixin定义的混入 | |
| @content | 关键字。当引入mixin时，@include花括号中的内容可以用该关键字代替 | |
| Vue实例（应用）相关 | Vue.createApp() | 创建vue实例（应用），参数可以决定根组件如何渲染 |
| mount(){} | 该方法可以将vue实例，挂载在dom元素上 | |
| template | 模板，用来定义该vue应用的展示内容。 | |
| data(){} | 用来定义数据 | |
| {{}} | 插值表达式。 1、可以用来将变量渲染到dom结构中。用于起始标签与闭合标签之间 2、{{}}中间可以写js表达式 | |
| $data | vue实例的属性，可以用来操作data中定义的数据 | |
| methods:{} | 里面可以书写方法（函数） | |
| computed:{} | 计算属性，当计算属性依赖的内容发生变更时，才会重新执行计算 | |
| watch:{} | 监听器，可以监听数据的改变，做异步操作 | |
| Vue样式相关 | :class | v-bind:class的简写形式，为元素绑定动态类名 |
| $attrs | 可以用来获取父组件绑定在子组件身上的属性（None-Props属性） | |
| :style | v-bind:style的简写形式，为元素绑定动态的行内样式 | |
| Vue常见指令 | v-on | 绑定事件。 1、“v-on:”可以简写成@ 2、可以使用“@[变量名]”，绑定动态事件。即，具体绑定哪个事件，由“变量名”决定 3、事件处理函数中，可以使用事件对象event 4、事件处理函数中，如果想传递多个参数，可以使用$event指代事件对象 |
| v-if | 条件渲染：通过控制dom结构的存在与否来实现区块的显示和隐藏 三者可以组合使用 | |
| v-else-if | 在与不在来实现区块的显示和隐藏三者可以组合使用 | |
| v-else | 在与不在来实现区块的显示和隐藏三者可以组合使用 | |
| v-show | 条件渲染：通过控制元素的display属性来控制区块的显示和隐藏 | |
| v-for | 列表渲染：用来循环数组、对象 为了提高性能，可以使用:key（前面没有出现:key,要不要考虑加上）为元素绑定唯一的key值 | |
| v-model | 1、表单中的内容与data方法中的变量，进行双向数据绑定 2、复选框，可以通过true-value、false-value属性指定选中、没选中时显示的值（不常用） 3、v-model可以使用.lazy修饰符，减少数据的变化频率（不常用） 4、v-model可以使用.number修饰符将数据转换成数字（不常用） 5、v-model可以使用.trim修饰符去除数据首尾的空格 | |
| v-bind | 1、可以将标签/组件上的某个属性与数据变量进行绑定。 2、“v-bind:”可以简写成“:” 3、可以使用“:[变量名]”，绑定动态属性。即，具体绑定哪个属性，由“变量名”决定 | |
| v-html | 识别变量中的html标签；将变量中的html结构解析成dom结构 | |
| v-once | 标签/组件只渲染一次；渲染一次后，如果数据变化，标签/组件的内容不会跟随变化 | |
| Vue事件修饰符 | .prevent | 阻止默认事件 |
| .stop | 阻止事件冒泡 | |
| .self | 只有操作自身时，才会触发自身上的事件（常用于点击事件，即只有点击自己时，才会触发自身上绑定的点击事件） | |
| .capture | 把事件的运营模式变成捕获（不常用） | |
| .once | 事件只执行一次 | |
| .passive | 提升事件性能，常用于滚动事件scroll（不常用） | |
| Vue按键修饰符 | .enter | 触发事件的按键是enter键，才会真正触发事件 类似的按键修饰符还有.tab、.delete、.esc、.up、.down、.left、.right、.ctrl（不常用） |
| 鼠标修饰符 | .left | 只有点击鼠标左键，才会触发事件。类似的鼠标修饰符还有.middle、.right（不常用） |
| 精确修饰符 | .exact | 精确的按住指定键，才会触发事件（不常用） |
| Vue dom相关 | ref | 标签、组件设置该属性后，可以通过“this.$refs.xxx”的形式获取到该标签的dom节点、该组件的引用 |
| 创建组件 | app.component() | 定义全局组件，其中“app”是保存Vue实例的变量 |
| components:{} | 注册局部组件 | |
| 组件之间传值 | props | 父组件调用子组件时，可以通过标签属性的形式给子组件传值。 子组件内部通过props属性接收传过来的值。 子组件接收值时，可以进行校验： type用来校验数据类型 default用来设置默认值 require用来设置必填 |
| None-Props | 父组件给子组件传递内容的时候，子组件不通过props接收。此时vue底层会把传递过来的属性，放在子组件最外层元素上，将其变成子组件的一个属性 | |
| inheritAttrs | 用来设置子组件是否继承父组件传递过来的None-props属性 | |
| $emit | 子组件通过$emit方法触发自定义事件，利用该事件可以给父组件传值 | |
| emits | 声明组件会向外触发什么事件。通过emits属性我们就能知道该组件会向外触发什么事件 | |
| v-model | 父子组件之间可以通过v-model实现双向数据绑定，子组件接收到的数据可以用modelValue表示 父组件要通过v-model给子组件绑定数据（选学绑定多个数据） | |
| 动态组件 | < component/> | 定义动态组件。具体显示哪个组件，由“:is”属性的值决定 |
| < keep-alive>< /keep-alive> | 缓存标签。包裹动态组件后，可以保留上一个组件中的内容 | |
| 异步组件 | Vue.defineAsyncComponent() | 该方法可以创建异步组件（了解即可） |
| 依赖、注入 | provide | 祖先组件，通过provide，可以向子孙组件注入依赖 孙子组件，通过inject，可以在可用的注入内容中搜索需要使用的内容 二者配合，可以实现祖先组件向子孙组件传值（一次性的） |
| inject | 祖先组件，通过provide，可以向子孙组件注入依赖 孙子组件，通过inject，可以在可用的注入内容中搜索需要使用的内容 二者配合，可以实现祖先组件向子孙组件传值（一次性的） | |
| vue的设计模式 | mvvm | m代表model，指代数据 v代表view，指代视图 vm代表viewModel，指代视图数据连接层 |
| vm | 自定义的变量名，用来接收app.mount()的返回值，代表vue应用的根组件。利用该变量，可以使用vm.$data直接访问、操作根组件上的数据 | |
| vue生命周期函数 | beforeCreate(){} | 在实例生成之前，会自动执行该函数 |
| created(){} | 在实例生成之后，会自动执行该函数 | |
| beforeMount(){} | 在组件内容被渲染到页面之前，会自动执行该函数 | |
| mounted(){} | 组件内容被渲染到页面后，会自动执行该函数 | |
| beforeUpdate(){} | 当data中的数据发生变化时会自动执行该函数 | |
| updated(){} | 当data中的数据发生变化，同时页面完成更新后，会自动执行的函数 | |
| beforeUnmount(){} | 当Vue应用失效时，会自动执行该函数 | |
| unmounted(){} | 当Vue应用失效后，同时dom完全销毁之后，自动执行的函数 | |
| vue实例的方法 | unmount() | 销毁vue应用 |
| 插槽 | < slot>< /slot> | 插槽。父组件可以利用插槽往子组件中传入dom结构 |
| name | 定义插槽的名字(具名插槽）。 父组件要使用“v-slot:插槽名”指定为哪个插槽传递内容 “v-slot:插槽名”可以简写成“#插槽名” | |
| < template>< /template> | 占位符 | |
| v-slot | 父组件利用v-slot可以接收到子组件绑定到插槽上的数据 | |
| 标签、组件的过渡与动画（标签和组件统称为元素） | < transition>< /transition> | 用来定义元素的动画效果，本身是一个组件 |
| .v-enter-from | 元素准备入场时的默认类名 | |
| .v-enter-to | 元素入场之后的默认类名 | |
| .v-enter-active | 元素入场过程中的默认类名 | |
| .v-leave-from | 元素准备离场时的默认类名 | |
| .v-leave-to | 元素已经离场后的默认类名 | |
| .v-leave-active | 元素离场过程中的默认类名 | |
| name | 通过给组件设置name属性，可以统一修改元素做动画时的类名 | |
| .enter-from-class | 单独设置元素准备入场时的类名 | |
| .enter-active-class | 单独设置元素入场的过程中的类名 | |
| .enter-to-class | 单独设置元素入场之后的类名 | |
| .leave-from-class | 单独设置元素准备出场时的类名 | |
| .leave-active-class | 单独设置元素出场过程中的类名 | |
| .leave-to-class | 单独设置元素出场之后的类名 | |
| type | 当元素既有过渡又有动画，并且二者时间不一致时，使用type属性，可以指定以哪一个时间为准 | |
| :duration | 设置过渡、动画的时间，单位是毫秒 | |
| :css | 设置是否使用css动画 | |
| @before-enter | 元素准备入场时的钩子 | |
| @enter | 元素入场过程中的钩子 | |
| @after-enter | 元素入场结束时的钩子 | |
| @before-leave | 元素准备出场时的钩子 | |
| @leave | 元素出场过程中的钩子 | |
| @leave-after | 元素出场结束时的钩子 | |
| mode | 设置多个单元素之间状态切换时，可以采取的模式： out-in：先隐藏，再进来 in-out：先进来，再隐藏 | |
| appear | 设置初次显示的元素，也有动画效果 | |
| 列表动画 | 用来定义列表动画。使用该组件包裹的一组元素，当元素新增或减少时，可以设置动画效果。 动画的相关效果可以设置在默认类名v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active、v-leave-to下 | |
| .v-move | 列表元素移动过程中的，默认的类名 | |
| mixin混入 | mixins | 定义局部的混入 |
| app.mixin() | 定义全局的混入 | |
| $options | 可以通过该属性，获取vue应用中的自定义属性 | |
| app.config.optionMergeStragies | 为自定义选项定义合并策略 | |
| 自定义指令directive | app.directive() | 定义全局自定义指令 使用指令时，直接在元素上写上“v-指令名”即可 自定义指令时，也可以使用mounted、updated等生命周期函数 |
| directives:{} | 引入局部指令 | |
| binding | 获取指令上的相关信息 | |
| teleport传送门 | < teleport>< /teleport> | 传送门，用来将包裹的内容，传送到to属性对应的dom元素下 |
| to | ||
| render函数（选学） | render(){} | 渲染函数，返回虚拟dom，用来生成dom结构 |
| $slots | 用来获取插槽的相关内容 | |
| plugin插件 | install(){} | 定义插件时，会执行的方法 |
| app.use() | 使用插件 | |
| app.provide() | 注入全局依赖 | |
| app.config.globalProperties | 扩展全局属性 | |
| $watch | vue实例的方法，用来监听数据 | |
| composition API | setup(){} | 实例被完全初始化之前执行的函数 可以使用this.$options.setup()获取setup函数中的返回值 |
| ref() | 将基础类型的数据，转成响应式 配合ref属性，可用于获取dom节点 | |
| reactive() | 将非基础型的数据，转成响应式 | |
| readonly() | 将响应式数据转成只读数据 | |
| toRefs() | 从响应式对象中解构出具备响应式的数据 | |
| toRef() | 可以从响应式数据中解构出不存在的数据，并且解构出来的值是响应式的 | |
| context | setup函数的第二个参数，可以用来获取到None-Props属性、插槽，以及emit方法 | |
| computed() | 用来定义计算属性，里面可以写get、set方法 | |
| watch() | 监听器，可以让其监一个或多个数据的变化 | |
| immediate | 配置watch监听器，让其变成非惰性 | |
| watchEffect() | 监听器，会自动检测自己内部的代码，如果自己内部代码的某些依赖变化了，watchEffect方法就会自动执行 | |
| provide() | 祖先组件，通过provide，向子孙组件注入依赖 | |
| inject() | 孙子组件，通过inject，可以使用父组件传过来的值 | |
| useStore() | 用来获取store，从而操作vuex中的数据 | |
| composition API中的生命周期函数 | onBeforeMount(){} | vue实例即将挂载到页面上的时候执行，等价于beforeMount |
| onMounted(){} | vue实例挂载到页面上之后执行，等价于mounted | |
| onBeforeUpdate(){} | 当数据发生变化时执行，等价于beforeUpdate | |
| onUpdate(){} | 当数据发生变化，同时页面完成更新后，会自动执行，等价于updated | |
| onBeforeUnMount(){} | 组件从页面移除之前，会自动执行该函数，等价于beforeUnMount | |
| onUnmounted(){} | 组件从页面移除之后，自动执行的函数，等价于unmounted | |
| onRenderTracked(){} | 每次渲染之后，收集依赖的时候会自动执行的函数 | |
| onRenderTriggered(){} | 每次重新渲染被触发的时候，自动执行的函数 | |
| 使用vue脚手架安装项目 | node -v | 查看node版本 |
| npm -v | 查看npm版本 | |
| nrm | 用来切换npm下载源： 安装指令：npm install nrm -gnpm install nrm -g 可以使用nrm ls，查看有哪些源 使用nrm use XXX 切换下载源 | |
| @vue/cli | vue较新版本的脚手架，用来创建vue项目： 1、使用npm install -g @vue/cli安装脚手架 2、执行vue create XXX，创建项目，项目名是XXX 3、执行cd XXX，进入项目 4、执行npm run serve 启动项目 备注： 如果之前安装过老版本的脚手架工具，可以使用npm uninstall vue-cli -g指令卸载一下 | |
| 路由 | createRouter() | 创建路由 |
| path | 配置路由路径 | |
| name | 配置路由的名字 | |
| component | 配置路由对应的组件 | |
| router-link | 跳转路由的标签，具体跳到哪，可以用to属性来定义 | |
| router-view | 负责展示当前路由对应的组件内容 | |
| import | 异步加载路由 | |
| vuex | createStore() | 创建vuex，管理全局数据 |
| state | 用来创建全局数据可以通过this.$store.state.xxx获取具体的数据 | |
| actions | 定义action | |
| dispatch | 派发action | |
| mutations | 定义mutation | |
| commit | 提交一个commit，触发一个mutation 在action中使用：this.commit(xxx) 在mutation中使用：this.$store.commit(xxx) | |
| modules | 对store进行局部拆分 | |
| 发送ajax请求 | axios | 插件，用来发送ajax请求: npm install axios --save 通过get方法，发送get请求 通过post方法，发送post请求 |
| 插件 | Vetur | vscode开发vue项目时，语法提示插件 |
看看还少啥，可以留言到下方哦。
今日寄语：
学着看淡一些事情，才是对自己最好的保护。
