# vue_test

**Repository Path**: cat-brother-vegetable/vue_test

## Basic Information

- **Project Name**: vue_test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-21
- **Last Updated**: 2021-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#笔记

## 启动终端cmd： npm run serve

## 脚手架文件结构
  |—— node_modules
  |—— public文件
  |   |—— favicon.ico : 页签图标
  |   |—— index.html : 主页面
  |
  |—— src文件
  |   |—— assets文件 : 存放静态资源
  |       |—— logo.png
  |   |—— component文件 : 存放组件
  |       |—— xxx.vue
  |   |—— App.vue : 汇总所有的组件  
  |   |—— main.js : 入口文件
  |
  |—— .gitignore ：git版本管制忽略的配置
  |—— .babel.config.js ：babel的配置文件
  |—— .package-lock.json ：包版本控制文件
  |—— .package.json ：应用包配置文件
  |—— .README.md ：应用描述文件

## 关于不同版本的vue
    1. vue.js是完整版的vue，包含核心功能+模板解析器
    2. vue.runtime.xxx.js是运行版的vue，只包含核心功能，不包含模板解析器，所以不能使用template，
    而是用render函数接受到的createElement函数去指定具体的内容
    3. 原版的render函数：
      render(createElement){
        return createElement('h1','你好啊')
      }
      简写：
      render:createElement = {}
      再写成箭头函数：
      render: h => h()

## vue.config.js配置文件
  1. 使用终端指令： vue inspect > output.js可以查看vue脚手脚的默认配置
  2. 使用 vue.config.js可以对脚手架进行个性化定制

## 文件暴露 export
  1. 默认暴露：export default{} ，引入方式：import 组件名 from '文件所在路径'
  eg:  const obj = {}
       export default obj
       
  eg:  export default{}

  2. 分别暴露：export ，引入方式：import {名字} from '文件所在路径'

  3. 统一暴露：在最后写 export{名字} ，

## vue.config.js 配置文件
    1. 使用vue inspect > output.js可以查看vue脚手架的默认配置
    2. 使用vue.config.js可以对脚手架进行个性化定制

## ref属性 功能类似id属性
    1. 被用来给元素的子组件注册引用信息（id属性的代替者）
    2. 应用在html的标签上获取的是真实的dom元素，应用在组件标签上获取的是组件实例对象（vc）
    3. 使用方法：
        1. 打标识：
            <html标签 ref="xxx"/>
            <h1 ref="title">....</h1>
            <School ref="sch"></School>
        2. 获取方式：
            this.$refs.xxx

## 接收外部数据配置项 props
  1. 功能：让组件接收外部传入的数据，优先级比data高
  2. 数据传入用法：<Student name="小明",sex="男"/>  在组件标签中传入需要用到的数据
  3. 数据接收用法：添加配置项props
    1.只接收数据： props:['name','sex']
    2.限制接收类型： props:{name:String}
    3.限制类型，限制必要性，指定默认值：props:{name:{type:String,required:true,default:'张三'}}

  4. props是只读的，vue底层会检测我们对props的修改，如果修改了会发出警告，需要修改的话，需要复制props的内容到data中，然后去修改data

##  mixin混入
  1. 功能：可以把多个组件共用的配置提取出成一个混入对象
  
  2. 先创建一个js文件，const mixinxx = {里面写的就是提取出来的共同都有的配置}（需要暴露出来 export）
  
  3. 在需要用到的组件里面引入这个js文件 ，通过import引入

  4. 在写与data平级的配置项mixins:[mixinxx],是一个数组

  5. 当混合配置的数据/方法等与组件发生冲突的时候，以组件的数据/方法为主，除挂载函数以外，挂载函数是都会触发

  6. 全局配置：在main.js中通过import引入混合.js文件，然后通过Vue.mixin(xxx)调用
  
## 插件 install
  1. 功能：用于增强vue，我们之前所写的全局过滤器，全局自定义指令，全局混入等都可以写在plugins.js这个文件里面

  2. 本质是一个对象：
  obj.install = function(vue,options){

  }

  3. 在main.js里面使用插件： Vue.use(插件名)

## style标签中添加scoped
  1. 使样式只局部使用，防止样式冲突
  2. 用法： <style scoped>，默认用的是css语言
  3. <style lang="css">  或 <style lang="less"> 指定样式语言

## TodoList案例总结1
  1. 组件化编码流程：
    （1）拆分静态组件：组件要按照功能点拆分，命名时不要与html已有标签相同
    （2）实现动态组件：考虑好数据存放的位置。如果数据只有一个组件再用则直接存放在这个组件里，如果多个组件都在用，则放在多个组件共同的父组件上（静态提升）
  
  2. props数据接收适用于：
    （1）父组件----子组件 通信
    （2）子组件----父组件 通信（父组件需要先传递一个函数给子组件）

  3. 使用v-model时需要注意：所绑定的值不能是props里接收的值（props只读不修改），可以是computed的值

## 浏览器本地缓存
  1. 缓存的内容是字符串，一般5MB大小，读不到的数据是null
  2. 两种方式：
    （1）localStorage 方式存储的数据，即使关闭浏览器再重开，数据也依旧还保存着。
    （2）sessionStorage 方式存储的数据，关闭浏览器就会清除
	
  3. xxxStorage.setItem('key','value')   //向浏览器保存一个数据
  
   xxxStorage.getItem('key')   //读取一个数据
	 
	 xxxStorage.removeItem('key')   //删除一个数据
	 
	 xxxStorage.claer()   //清除所有数据
	 
## 组件的自定义事件
  1. 组件的自定义事件是 子组件--->与父组件 之间通信的一种方式。

  2. 使用方式： 在父组件中给子组件通过 v-on:xxx="回调函数" 或 @xxx=“回调函数” 绑定自定义事件xxx（给谁绑定自定义事件就在谁的组件中去触发），在子组件中通过this.$emit('xxx')触发自定义事件xxx，可以在后面传参数，父组件中的回调函数会接收到它传的参数。
  
  3. 解绑自定义事件：（给谁绑定自定义事件就在谁的组件中去解绑），通过 this.$off('xxx')解绑自定义事件，多个事件解绑需要用数组包装起来。

  4. 也可以通过给子组件添加ref="namexxx"属性，然后可以通过 this.$refs.namexxx.$on('xxx',回调函数) 给子组件绑定自定义事件，回调函数要么在methods中配置，要么写成箭头函数，否则this的指向会出问题。

  5. 在给子组件绑定原生事件时需要加一个 native 修饰符

## 父组件与子组件之间的通信
  1. 可以通过父组件给子组件传递数据/函数，然后子组件通过props接收使用，再通过从父组件那里接收到的函数传回数据。

  2. 可以通过父组件给子组件绑定自定义事件和一个回调函数，在子组件那里触发自定义事件，在父组件的回调函数那里接收数据

## 全局事件总线 （组件通信，任意）
  1.使用于任意组件之间的通信，可以实现兄弟组件之间的通信

  2.安装全局事件总线：
    在main.js 中 new Vue{... beforeCreate(){ Vue.prototype.$bus = this } ...}，在数据监测和数据代理之前的beforeCreate生命周期函数中创建。

    因为vue的原型函数中添加了一个bus，所以vm和vc实例对象都能访问获取的到bus

  3.使用全局事件总线：
    1.接收数据：A组件想要接收数据，则在A组件中给￥bus绑定自定义事件，回调函数在A自身上
      methods:{
        dome(){.....}
      },
      mounted(){
        this.$bus.$on('自定义事件名xxx',回调函数dome)
      }

    2.触发绑定的自定义事件，提供数据：
      this.$bus.$emit('xxx',数据)

  4. 最好在beforeDestroy生命函数中解绑当前组件所绑定的事件

## 消息订阅 （组件通信 任意）
  1. 适用任意组件之间的通信

  2. 通过终端下载第三方库 npm i pubsub-js
     通过 import pubsub from 'pubsub-js' 引入

  3. 订阅消息：接收数据
     在挂载前订阅消息，指定消息的id，在销毁时关闭消息订阅时需要用到id，回调函数（1）写成箭头函数，（2）写在methods中
     mounted(){
       this.pubId = pubsub.subscribe('消息事件名',回调函数（参数1：消息事件名，参数2：数据）)

       this.pubId = pubsub.subscribe('消息事件名',this.dome)
     }
     methods:{
       dome(msgname.data){

       }
     }

  4. 发生消息：提供数据
     pubsub.publish('消息事件名'，数据data)

  5. 在实例对象销毁前把订阅消息关闭
     beforeDetory(){
       pubsub.unsubscribe(pudId)
     }

## Vue封装的动画
  1. 作用：在插入，更新，移除dom元素的时候实现一个动画
  2. 先在style标签中准备好样式
    1. v-enter：进入的起点； v-enter-to：进入的终点； v-enter-active：进入的过程；
    2.  v-leave：离开的起点； v-leave-to：离开的终点； v-leave-active：离开的过程；
    3. 默认是v-...,配置了name属性则用xxx-...
  
  3. 使用<transition>包装要过度的元素，配置name属性

  4. 多个元素使用则用<transition-group>包装
 
## 插槽 slot
  1. 作用：可以让父组件在子组件指定位置插入html结构，也是组件间一种通信方式

  2. 插槽分类： 默认插槽，具名插槽，作用域插槽
     默认插槽：在子组件指定位置写<slot></slot>标签，在父组件插入html结构，就会放在slot标签所在的位置

     具名插槽：添加了name属性，指定插槽的名字，在插入html结构时可以指定要插在那个slot当中。

     作用域插槽：当数据在子组件当中，而父组件想要访问子组件的数据时，子组件需要给slot标签绑定要传递的数据yyy，而父组件需要使用template标签包裹要插入的html结果，并在template标签指定scope=“xxx”，然后通过xxx.yyy访问子组件里面的数据

## Vuex （集中管理状态/数据 ， 组件通信，任意）
  1. vuex是 专门在 vue 中实现集中式状态/数据 管理的一个vue插件，对vue中多组件共享状态/数据进行管理，也是组件间通信的一种方式，适用任意组件之间

  2. 什么时候使用vuex：多个组件共享同一个状态/数据时，来自不同组件的行为需要变更同一个状态/数据时

  3. 搭建vuex环境：
     1. 终端安装vuex库： npm i vuex
     2. 创建store文档，创建index.js来写store
     3. 在index.js中引入vue，vuex，使用vuex插件，new 一个Vuex.store对象和要用到的全局对象actions（响应组件），mutations（处理数据操作），state（存放数据）等
     4. main.js中vm实例对象添加store属性，这样vm，vc身上都有store属性
     5.组件vc通过 this.$store.state.xx 获取vuex中的数据

  4. vuex工作原理：
    组件通过this.dispatch()与vuex中的actions通信，而actions里面的函数通过context.commit与mutations通信，mutations修改完数据后，页面也会同时刷新

  5. vuex常用对象属性
    1. actions  响应组件函数  通过.commit和mutations通信
    2. mutations  处理数据操作  
    3. state  存储数据
    4. getters  对state中存储的数据进行加工

  6. vuex提供的一些函数方法：组件需要通过import {mapState,....,...}from 'vuex' 引入
    1. 获取vuex中state中的数据：mapState({key:'value'})   / mapState(['value']) 

    2. 获取vuex中getters中的数据：mapGetters({key:'value'})  / mapGetters(['value'])

    3. 与vuex中actions通信：mapActions()，使用方法同上，会自动调用dispatch

    4. 与vuex中mutations通信：mapMutations()，使用方法同上，会自动调用commit

  7. 在组件中computed属性中想要获取vux中的是数据，计算属性名与vuex中获取的数据同名时可以写成数组形式，vuex提供的函数是一个对象，需要写成 ...mapState(计算属性名：'vuex中的数据名'),...mapGetters()

  8. 在组件中method属性中与actions或者mutations通信，可以写成 ...mapActions({方法名：'vuex中actions中的方法名',...}), ...mapMutations(),函数所需参数需要在调用到这个方法时就传入，否则就是默认参数---鼠标点击事件

## 路由 route
  1. 什么是路由： 一个路由就是一组（key，value）映射关系，key为路径，value可以是函数也可以是组件
  2. 后端路由：服务器接收到一个请求，根据请求路径找到对应函数，返回响应数据
  3. 前端路由：当浏览器的路径发生改变时，路径对应的组件就会显示
  
  4. vue-router 是vue的一个插件，专门用来实现SPA（单页面）应用的，通过终端 npm i vue-router 下载

  5. SPA 是单页面应用，整个应用只有一个完整的页面，点击导航中的连接不会刷新页面，只会做到页面的局部刷新，数据需要通过ajax请求获取

## 路由配置 使用
  1. 通过终端下载： npm i vue-router
  2. 在main.js中引入这个库： import VueRouter from 'vue-router',通过Vue.use(VueRouter)使用该插件

  3. 配置路由：新建文件夹router，存放配置路由的index.js文件，在index.js文件中引入路由库，new一个路由实例对象，配置属性routee:[{path:'/组件的路由路径',component:组件名,children:[path...]},...],二级以后的路由路径不需要再写“/”，同时将需要用到的组件引入。

  4. 使用路由：在路由跳转的地方使用标签<router-link to="/组件的路由路径">（注意二级以后的路由路径需要加上父级的路径），在需要显示组件的地方使用标签<router-view>

  5. query携带带参数的路由路径：
    1. to的字符串写法：<router-link :to="`/组件的路由路径 ? 参数1=${xxx} & 参数2=${xxx}`">

    2. to的对象写法：<router-link :to="{path:'/组件的路由路径',query:{参数1:xxx,参数2:yyy}">

    3. 获取参数路由的参数：通过this.$route.query.xxx获取

  6. pargams携带参数的路由路径写法：
    1. 需要在配置路由路径的时候就占好参数位置 path:'路由路径/:参数1/:参数2'

    2. 通过to字符串写法传参 :to="/路径/参数1/参数2"

    3. 通过to的对象写法 :to="{name:'路由名字',pargams:{参数1：xxx,参数2：yyy}}"，必须与name一起配套使用

    4. 获取参数路由的参数：通过this.$route.pargams.xxx获取

  7. 命名路由：配置路由的时候添加一个name属性，name:'路由名字'，使用的时候需要用to的对象形式写 :to="{name:'路由名字'}"，可以简化代码

  8. 新建文件夹pages存放路由组件，而components文件存放普通组件

  9. <router-link>标签的replace属性：控制路由跳转时浏览器的记录模式，浏览器历史记录两种方式：默认是push追加记录，而replace是替换掉当前记录

  10. 编程式路由：不借助<router-link>标签实现路由跳转，而是通过：
    1. this.$router.push({name:'路由名字',query/pargams:{}})   //追加时路由跳转

    2. this.$router.replace({name:'路由名字',query/pargams:{}})    //替换式路由跳转

    3. this.$router.back()   //返回上一次
    4. this.$router.forward()   //前进
    5. this.$router.go()   //参数为正数则是前进几次，负数则是返回几次

  11. 缓存路由组件：路由路径在切换时组件是会被销毁的，如果不想组件被销毁，则使用<keep-alive include="不想被销毁的组件名字" （不写include属性的话则在这个里面的组件都不会被销毁）>包裹<router-view>

## 路由组件独有的两个生命周期函数
  1. activated(){} ：路由组件被激活时候触发
  2. deactivated(){} ：路由组件失活时候触发

  3. 当路由组件不想被销毁但又想执行一些定时器的内容，就可以写在这两个函数当中。

## 路由卫士 是否需要进行权限控制
  1. 全局配置前置路由卫士：在配置路由路径规则的时候不要直接暴露，在暴露之前通过router.beforeEach((to,from,next)=>{

  })

  参数含义： to要去到哪个路由路径，from从哪个路由路径来，next()是否放行（显示相应组件）

  2. 全局配置后置路由卫士：同样在暴露之前通过router.afterEach((to,from)=>{

  })

  3. 可以在配置路由路径的时候添加meta:{}属性，将需要判断权限控制时候的一些数据存进去，比如这个组件是否需要进行权限控制，可以在meta:{isAuto:true}写

  4. 独享路由卫士：在需要的组件里面配置一个独自享用的路由卫士，通过beforeEnter(to,from,next){}配置

  5. 组件内路由守卫：也是在需要的组件里面配置进去前的守卫和离开后的守卫，注意进入和离开都需要通过路径规则进入和离开。
  beforeRouteEnter(to,from,next){}   //通过路由规则进入该组件时调用
  beforeRouteLeave(to,from,next){}   //通过路由规则离开该组件时调用

## 路由的工作模式
  在配置路由路径的时候添加mode属性，决定路由的工作模式
  1. hash（哈希）模式：网页路径端口后带着‘/#/’，兼容性好，但有可能被其他app鉴定为不合法地址

  2. history模式：网页路径端口后不带着‘/#/’， 兼容性略差，应用部署上线需要后端人员支持，解决网页刷新404问题。

## vue项目打包 npm run build
  1. npm run serve 打开端口服务器

  2. npm run build 打包vue项目，生成html，css，js文件，方便后端实现项目上线，完成后会生成一个dist文件夹

## 搭建微型服务器 node express
  1. 新建文件夹：dome vscode打开
  2. 通过终端： npm init --- 回车 --- 然后取名字随便取:aiguigu_test_server  ---- 回车
  3. 安装express：npm i express
  4. 新建js文件： server.js
    const express = require('express')  //引入express

    const app = express()   //创建一个app服务实例对象

    app.use(express.static(__dirname+'/static'))  //使用插件，使用静态文件夹资源

    app.get('/起的路径名',(req,res)=>{
      res.send( {name:'菜菜',age:18 })  //给客户端放回数据
    })// 配置后端路由

    app.listen(5005,(err)=>{  //回调
      if(!err)
      { console.log('服务器开启成功')}
    })//开启端口监听 我开在5005端口

  5. 终端启动服务器： node server

  6. 新建文件夹：static,存放vue脚手架打包好的文件（在dist文件里面，复制过来）

  7. 如果前端路由的工作模式是hash，那么网页在刷新的时候数据就不会丢失
  如果前端路由的工作模式是history，那么网页在刷新的时候就会出现404错误，解决404问题：
    通过终端下载插件：npm i connect-history-api-fallback
    引入：const history  = require('connect-history-api-fallback')
    再使用静态资源插件之前引用：app.use(history())

## UI组件库 
   1. 移动端常用的UI组件库：Vant,Cube UI,Mint UI(自行查看官方文档使用方法)

   2. PC端常用的UI组件库：Element UI（饿了么团队打造）,IView UI

## Element UI（饿了么团队打造的UI组件库）