脚手架文件结构
在源码目录中创建如下结构：
- App.vue：是所有组件的父组件 - main.js: 是整个项目的入口 - assets：用于存放静态资源文件 - components：用于存放Vue功能组件 - views：用于存放Vue视图组件 - router：用于存放vue-router配置
关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别: (1).vue.js是完整版的Vue，包含:核心功能+模板解析器。 (2).vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。 2.因为vue.runtime.xxxjs没有模板解析器，所以不能使用template配置项，需要使用 render函数接收到的createElement函数去指定具体内容。
ref属性
1.被用来给元素或子组件注册引用信息(id的替代者) 2.应用在htm1标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识:<h1 ref="xxx">.....</h1> 或<School ref="xxx"></School> 获取:this.$refs.xxx
配置项props
功能:让组件接收外部传过来的数据
(1)传递数据: <Demo name="xxx"/> (2).接收数据: 第一种方式(只接收): props:['name'] 第二种方式(限制类型): props:{ name:Number } 第三种方式(限制类型、限制必要性、指定默认值): props:{ name:{ type:String，//类型 required:true，//必要性 default:老王//默认值 } } 备注:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，
插件
功能:用于增强Vue 本质:包含instal1方法的一 个对象，instal1的第一个参 数是Vue,第二个以后的参数是插件使用者传递的数据。 定义插件: 对象.install = function (Vue, options) { // 1.添加全局过滤器 Vue . filter(....) // 2.添加全局指令 Vue . directive(....) // 3.配置全局混入(合) Vue . mixin(....) // 4.添加实例方法 Vue . prototype . $myMethod = function () {...} Vue . prototype . $myProperty = xxxx 使用插件: Vue.use()
scoped样式
1.作用：让样式在局部生效，防止冲突 2.写法：<style scoped>
总结TodoList案例
参考代码
1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆分，命名不要与html元素冲突。 (2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用, 还是一 些组件在用: 1).一个组件在用:放在组件自身即可。 2).一些组件在用: 放在他们共同的父组件.上(状态提升)。 (3).实现交互:从绑定事件开始。 2. props适用于: (1).父组件==>子组件通信 (2).子组件==>父组件通信(要求父先给子-一个函数) 3.使用v-modelI时要切记: v-model绑定的值不能是props传过来的值，因为props是不可以修改的! 4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
webStorage（本地存储和会话技术）
1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样) 2.浏览器端通过WindowsessionStorage和WindowlocalStorage属性来实现本地存储机制。 3.相关API: 1.xxxxxStorage.setItem('key','value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。 2.xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名对应的值。 3.xxxxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。 4.*xxxxStorage.clear() 该方法会清空存储中的所有数据。 4.备注: 1.SessionStorage存储的内容会随着浏览器窗口关闭而消失。 2.LocalStoraae存储的内容，需要手动清除才会消失。 3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null 4.JSON.parse(null)的结果依然是null
组件的自定义事件
##组件的自定义事件 1.一种组件间通信的方式，适用于:子组件==>父组件 2.使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。 3.绑定自定义事件: 1.第一种方式，在父组件中:<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/> 2.第二种方式，在父组件中: <Demo ref="demo"/> ..... mounted(){ this.$refs.xxx.$on('atguigu',this.test) 3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。 4.触发自定义事件:this.$emit('atguigu,数据) 5.解绑自定义事件this.$off('atguigu') 6.组件上也可以绑定原生DOM事件，需要使用native修饰符。 7.注意:通过this.$refs.xxx.$on(atguigu，回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!
全局事件总线(GlobalEventBus)
##全局事件总线(GlobalEventBus) 1.一种组件间通信的方式，适用于任意组件间通信。 2.安装全局事件总线: new Vue({ beforeCreate(){ Vue.prototype.$bus=this//安装全局事件总线，$bus就是当前应用的vm}， }) 3.使用事件总线: 1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。 methods(){ demo(data){......}} mounted(){ this.$bus.$on('xxxx',this.demo) 2.提供数据:this.$bus.$emit(xxxx,数据) 4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件
消息订阅与发布(pubsub)
npm i pubsub-js
##消息订阅与发布(pubsub) 1.一种组件间通信的方式，适用于任意组件间通信。 2.使用步骤: 1.安装pubsub:npm i pubsub-js 2.引入: import pubsub from 'pubsub-js' 3.接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods(){ demo(data){......}} .... mounted(){ this.pid=pubsub.subscribe(xxxthisdemo)//订阅消息 I 4.提供数据:pubsub.publish('xxx,数据) 5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅
现在我学习过的，组件间的通讯
父传>子 1. props ，
子>传父 ：1.自定义组件，2.props ，前提是父组件给子组件一个回调函数
兄弟组件互传 1.全局事件总线 2.用第三方库的，消息发布与订阅
过渡动画(插件：Animate.css在vue中的使用)
vue中Animate.css的安装和使用
安装：
npm install animate.css --save //或者 yarn add animate.css
引入
在main.js全局引入
import animate from 'animate.css' // npm install animate.css --save安装，在引入 Vue.use(animate)
选择你要的样式
打开官网Animate.css
具体使用
1>基本的使用就是在过度元素上使用对应的name属性
<transition-group name="fadeLeft" tag="ul"> <li v-for="item in items" v-bind:key="item"> {{ item }} </li> </transition-group>
2>使用不同的载入载出动画
第一种：使用custom-classes-transition,需要在不同的载入,载出动画上加-enter和-leave后缀
<transition name="custom-classes-transition" enter-active-class="bounceLeft-enter" leave-active-class="bounceRight-leave" > <p v-if="show">hello</p> </transition>
第二种：使用in/out类名在动画名后面加上In或者Out
<transition name="bounce" enter-active-class="bounceInLeft" leave-active-class="bounceOutRight" > <p v-if="show">hello</p> </transition>
案例：
<template> <transition appear name="animate__animated animate__bounce" enter-active-class="animate__backInLeft" leave-active-class="animate__backOutDown" > <div > <button @click="isShow = !isShow">显示/隐藏</button> <h1 v-show="isShow" >你好啊!</h1> </div> </transition> </template>
过渡动画总结
写法: 1.准备好样式: ·元素进入的样式: 1v-enter:进入的起点 2.v-enter-active:进入过程中 3.v-enter-to:进入的终点 .元素离开的样式: 1v-leave:离开的起点 2v-leave-active离开过程中 3.v-leave-to:离开的终点 2.使用<transition>包裹要过度的元素，并配置name属性: <transition name="hello"> <h1v-show="isShow">你好啊!</h1> </transition> 3.备注:若有多个元素需要过度，则需要使用:<transition-group>，且每个元素都要指定key值。
vue脚手架配置代理
方法一: 在vueconfigjs中添加如下配置: devServer:{ proxy:"http://localhost:5000 说明: 1.优点:配置简单，请求资源时直接发给前端(8080)即可。 2.缺点:不能配置多个代理，不能灵活的控制请求是否走代理。 3.工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)
方法二 编写vueconfigjs配置具体代理规则: module.exports={ devServer:{ proxy:{ '/api1':{//匹配所有以/api1"开头的请求路径 target:'http://localhost:5000',// 代理目标的基础路径 changeOrigin: true, pathRewrite:{'^/api1':''}}， '/api2':{//匹配所有以/api2开头的请求路径 target:'http://localhost:5001',//代理目标的基础路径 changeOrigin: true, pathRewrite:{'^/api2':''} } }}/* changeOrigin设置为true日，服务器收到的请求头中的host为:localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为:localhost:8080 changeOrigin默认值为true*/ 说明: 1.优点:可以配置多个代理，且可以灵活的控制请求是否走代理。 2.缺点:配置略微繁琐，请求资源时必须加前缀。
slot 插槽
1. 默认插槽
2. 命名插槽
3. 作用域插槽
vuex 是什么
- 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应
用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方
式，且适用于任意组件间通信。
安装Vuex
npm i vuex //vuex4 npm i vuex@3 //vuex3 ===================================== vuex2中、要用vuex3版本 Vuex3中、要用vuex4版本 2022年2月后，默认自动安装vuex4版本
配置：
//该文件用于创建Vuex中最为核心的store //引入vue import Vue from 'vue' //引入Vuex import vuex from 'vuex' Vue.use(vuex); //准备action-用于响应组件中的动作 const action={} //准备mutations-用于操作数据（state） const mutations={} //准备state-用于存储数据 const state={} //创建并暴露store export default new vuex.Store({ action, mutations, state })
引入：
............ //引入store import store from './store' ............. //创建vue的实例对象----（vm） new Vue({ el:'#app', render:h=>h(App), store })
使用：
//该文件用于创建Vuex中最为核心的store //引入vue import Vue from 'vue' //引入Vuex import vuex from 'vuex' Vue.use(vuex); //准备action-用于响应组件中的动作 const actions= { //响应组件中加的动作 jia(context,value){ console.log('action被调用了') context.commit('JIA',value) }, } //准备mutations-用于操作数据（state） const mutations={ //执行加 JIA(state,value){ console.log('mutations中的JIA被调用了') state.sum += value }, } //准备state-用于存储数据 const state={ sum:0, //当前和 } //创建并暴露store export default new vuex.Store({ actions, mutations, state })
组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch（'action中的方法名'，数据）或 $store.commit('mutations中的方法名，数据')
