摘要:认识自定义指令 实现方式一:聚焦的默认实现 实现方式二:局部自定义指令 方式三:自定义全局指令 指令的生命周期 指令的参数和修饰符 自定义指令练习 时间格式化指令 main.js import { createApp } from 'vue' import App from './04_telepo
阅读全文
摘要:生命周期钩子 App.vue <template> <div> <button @click="increment">{{ counter }}</button> </div> </template> <script> import { onMounted, onUpdated, onUnmount
阅读全文
摘要:computed 01_computed的使用.vue <template> <div> <h2>{{ fullName }}</h2> <button @click="changeName">修改firstName</button> </div> </template> <script> impo
阅读全文
摘要:Options API的弊端 大组件的逻辑分散 认识Composition API setup函数的参数 setup函数的返回值 setup不可以使用this App.vue <template> <div> <home message="hahahaha" id="aaa" class="bbbb
阅读全文
摘要:认识Mixin Mixin的基本使用 Mixin的合并规则 全局混入Mixin extends import { createApp } from 'vue'; import App from './01_mixin和extends/App.vue'; // import App from './0
阅读全文
摘要:认识动画 Vue的transition动画 Transition组件的原理 过渡动画class class添加的时机和命名规则 过渡css动画 同时设置过渡和动画 显示的指定动画时间 过渡的模式mode 动态组件的切换 appear初次渲染 01_过渡动画的使用.vue <template> <di
阅读全文
摘要:切换组件案例 v-if显示不同的组件 动态组件的实现 动态组件的传值 认识keep-alive keep-alive属性 缓存组件的生命周期 App.vue <template> <div> <button v-for="item in tabs" :key="item" @click="itemC
阅读全文
摘要:认识插槽Slot 如何使用插槽slot? 插槽的基本使用 插槽的默认内容 多个插槽的效果 App.vue <template> <div> <my-slot-cpn> <button>我是按钮</button> </my-slot-cpn> <my-slot-cpn> 我是普通的文本 </my-sl
阅读全文
摘要:非父子组件的通信 Provide和Inject Provide和Inject基本使用 Provide和Inject函数的写法 处理响应式数据 A pp.vue <template> <div> <home></home> <button @click="addName">+name</button>
阅读全文
摘要:组件的通信 父子组件之间通信的方式 父组件传递给子组件 Props的数组用法 Props的对象用法 细节一:type的类型都可以是哪些呢? 细节二:对象类型的其他写法 细节三:Prop 的大小写命名 非Prop的Attribute 禁用Attribute继承和多根节点 App.vue <templa
阅读全文
摘要:认识组件的嵌套 组件的拆分 App.vue <template> <div> <Header></Header> <MyMain></MyMain> <Myooter></Myooter> </div> </template> <script> import Header from './Heade
阅读全文
摘要:Vue CLI脚手架 Vue CLI 安装和使用 npm install @vue/cli -g vue create 项目的过程 项目的目录结构 认识Vite Vite的构造 浏览器原生支持模块化 Vite的安装和使用 npm install vite –g # 全局安装 npm install
阅读全文