脚手架文件结构

在源码目录中创建如下结构：

- 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中的方法名，数据')

Vue学习笔记与常用操作（一）