3.8k words 3 mins.

# 1.slot 中默认内容 vue// App.vue<template> <div> <!-- 大写的组件名可写成小写用 - 相连 --> <my-slot-cpn></my-slot-cpn> <my-slot-cpn></my-slot-cpn> <my-slot-cpn></my-slot-cpn>...
3.3k words 3 mins.

先安装 mitt npmnpm install mitt# 1.App.vue App 与 eventbus.js 文件为根组件 下面 Home 与 About 例子都被引用 vue// App.vue<template> <div> <home/> <about/> </div></template><script> import Home from './Home.vue'; import About from...
3.2k words 3 mins.

# 1.Provide (对象) 提供数据 vue// App.vue <template> <div> <home></home> </div></template><script>import Home from "./Home.vue";export default { components: { Home, }, //provide 提供数据 provide:...
6.5k words 6 mins.

# 1. 不开启 deep 1. 不开启 deep 情况下 (默认 watch 只会监听数据本身，而内部数据改变不会监听) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta...
4.8k words 4 mins.

# 路由 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 前端路由：key 是路径，value 是组件。 # 基本使用 安装 vue-router，命令： npm i vue-router 应用插件： Vue.use(VueRouter) 编写 router 配置项: // 引入 VueRouterimport VueRouter from 'vue-router'// 引入 Luyou 组件import About from '../components/About'import...
3.7k words 3 mins.

# Vuex 概念 在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读 / 写），也是一种组件间通信的方式，且适用于任意组件间通信。 # 何时使用？ 多个组件需要共享数据时 # 搭建 vuex 环境 创建文件： src/store/index.js // 引入 Vue 核心库import Vue from 'vue'// 引入 Vueximport Vuex from 'vuex'// 应用 Vuex 插件Vue.use(Vuex)// 准备 actions 对象 ——...
1.3k words 1 mins.

# 插槽 作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于 <strong style="color:red"> 父组件 ===> 子组件 </strong> 。 分类：默认插槽、具名插槽、作用域插槽 # 默认插槽 vue父组件中： <Category> <div>html结构1</div> </Category>子组件中： <template>...
3.6k words 3 mins.

# webStorage 存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样） 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。 相关 API： xxxxxStorage.setItem('key',...
8.2k words 7 mins.

# MyHeader components/MyHeader vue<template> <div class="todo-header"> <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add" />...
1.7k words 2 mins.

# 脚手架文件结构 ├── node_modules ├── public│ ├── favicon.ico: 页签图标│ └── index.html: 主页面├── src│ ├── assets: 存放静态资源│ │ └── logo.png│ │── component: 存放组件│ │ └── HelloWorld.vue│ │── App.vue: 汇总所有组件│ │── main.js: 入口文件├── .gitignore: git版本管制忽略的配置├── babel.config.js: babel的配置文件├── package.json: 应用包配置文件 ├──...