# test1

**Repository Path**: lsjstore/test1

## Basic Information

- **Project Name**: test1
- **Description**: Vue2学习内容和一些案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-31
- **Last Updated**: 2022-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



vue create xxxx

## 启动项目

npm run serve

## 配置淘宝镜像

npm config set registry https://registry.npm.taobao.org

## Vue 脚手架隐藏了所有的 webpack 相关的配置，查看具体的 webpack

npx vue inspect > output.js

## 关于不同版本的 Vue:

    1.vue.js与vue.runtime.xxx.js的区别：
      (1). vue.js是完整版的Vue, 包含：核心功能+模板解释器
      (2). vue.runtime.xxx.js是运行版的Vue,只包含：核心功能，没有模板解释器
    2. 因为vue.runtime.xxx.js没有模板解释器，所以不能使用template配置项，
        需要使用render函数接受到createElement函数去指定具体内容

## ref 属性

    1.被用来给元素或者子组件注册引用信息(id 的替代者)
    
    2.应用在 html 标签上获取的是真实 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的修改，如果进行了修改，就会发出警告。若业务需求需要改，那么请复制props的内容到data中一份，然后去修改data中复制的数据。

## mixin(混合 or 混入)

    功能:把多个组件共用的配置提取成一个混入对象
    使用方式：
      第一步定义混合
        mixin.js
        {
          data(){
    
          },
          methods:{
    
          }


        }
      第二步使用混入
        (1). 全局混入： Vue.mixin(xxx)
        (2). 局部混入： mixins:['xxx']

## 插件

    功能：用于增强Vue
    本质：包含install方法的一个对象，install的第一个参数是Vue,第二个参数是插件使用者传递的数据
    定义插件：
        对象.install = function(Vue, options){
          // 1. 添加全局过滤器
          Vue.filter(...)
          // 2. 添加全局命令
          Vue.directive(...)
          // 3. 配置全局混入(合)
          Vue.mixin(...)
        }
    使用插件： Vue.use()

## scoped 样式

    功能：让样式在局部生效，防止冲突
    用法：<style scoped></style>

## 总结 TodoList 案例

1. 组件化编码流程：

   (1).拆分静态组件：组件要按照功能点拆分，命名不要与 html 元素冲突。

   (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

   1).一个组件在用：放在组件自身即可。

   2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。

   (3).实现交互：从绑定事件开始。

2. props 适用于：

   (1).父组件 ==> 子组件 通信

   (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用 v-model 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！

4. props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但不推荐这样做。

## webStorage

1. 存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3. 相关 API：

   1. `xxxxxStorage.setItem('key', 'value');`
      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

   2. `xxxxxStorage.getItem('person');`

      该方法接受一个键名作为参数，返回键名对应的值。

   3. `xxxxxStorage.removeItem('key');`

      该方法接受一个键名作为参数，并把该键名从存储中删除。

   4. ` xxxxxStorage.clear()`

      该方法会清空存储中的所有数据。

4. 备注：

   1. SessionStorage 存储的内容会随着浏览器窗口关闭而消失。
   2. LocalStorage 存储的内容，需要手动清除才会消失。
   3. `xxxxxStorage.getItem(xxx)`如果 xxx 对应的 value 获取不到，那么 getItem 的返回值是 null。
   4. `JSON.parse(null)`的结果依然是 null。

总结：

组件的自定义事件：

一种组件间通信的方式，适用于：==子组件 > 父组件

使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（事件的回调在 A 中）

绑定自定义事件：

第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

第二种方式，在父组件中：

<Demo ref="demo"/>
...
mounted(){
    this.$refs.demo.$on('atguigu',data)
}

## 全局事件总线

### 1、一种组件间的通信方式，适用于任意组件间的通信

### 2、在 main.js 中安装全局事件总线

beforeCreate(){
Vue.prototype.$bus=this
}

### 3.使用事件总线

(1).接收数据：A 组件想要接收数据需要 A 组件给$bus 绑定自定义事件,并调用回调函数，回调写在 A 组件内
export default {
    methods(){
        demo(data){...}
    }
    ...
    mounted() {
        this.$bus.$on('xxx',this.demo)
}
}
(2).发送数据：this.$bus.$emit('xxx',data)

### 4.最好在 beforeDestroy 钩子中，用$off 去解绑当前组件所用到的事件

## 消息订阅与发布(pubsub)

1.一种组件间的通信的方式，适用于任意组件间通信

2.使用步骤

1.安装 pubsub: npm i pubsub-js

2.引入： import pubsub from 'pubsub-js'

3.接收数据：A 组件想接收数据，则在 A 组件中订阅消息，订阅的回调留在 A 自身

```js

      mounted(){
          //消息订阅
        this.pid = pubsub.subscribe('xxx',(messageName,param1)=>{
          ...
        })
      }

```

4.提供数据的组件：pubsub.publish('xxx',数据)

5.  最好在 beforeDestroy 钩子中，用 PubSub.unsubscripe(pid)去取消订阅

## 总结

### $nextTick

 1.语法：this.$nextTick(回调函数)

 2.作用：在下一次 DOM 更新结束后执行其指定的回调

 3.什么时候用：当改变数据后，要基于更新后的新 DOM 进行某些操作时，要在 nextTick 所指定的回调函数中执行

### Vue脚手架配置代理服务器：

- 方法一：在`vue.config.js`中添加如下配置：

  ```js
  devServer:{
      proxy:"http://localhost:5000"
  }
  ```

  说明：

1. 优点：配置简单，请求资源时直接发给前端即可
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

- 方法二：

  ```js
  devServer:{
  	proxy:{
  		'/api1': { // 匹配所有以 '/api1'开头的请求路径
          	target: 'http://localhost:5000',// 代理目标的基础路径
          	changeOrigin: true,
          	pathRewrite: {'^/api1': ''}
        	},
        	'/api2': { // 匹配所有以 '/api2'开头的请求路径
          	target: 'http://localhost:5001',// 代理目标的基础路径
          	changeOrigin: true,
          	pathRewrite: {'^/api2': ''}
        	}
  
  	}
  }
  ```

  

  说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理
2. 缺点：配置略微繁琐，请求资源时必须加前缀

## 插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 <strong style="color:red">父组件 ===> 子组件</strong> 。

2. 分类：默认插槽、具名插槽、作用域插槽

3. 使用方式：

   1. 默认插槽：

      ```vue
      父组件中：
              <Category>
                 <div>html结构1</div>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot>插槽默认内容...</slot>
                  </div>
              </template>
      ```

   2. 具名插槽：

      ```vue
      父组件中：
              <Category>
                  <template slot="center">
                    <div>html结构1</div>
                  </template>
      
                  <template v-slot:footer>
                     <div>html结构2</div>
                  </template>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot name="center">插槽默认内容...</slot>
                     <slot name="footer">插槽默认内容...</slot>
                  </div>
              </template>
      ```

   3. 作用域插槽：

      1. 理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      2. 具体编码：

      3. 父组件中：
         		
         		<Category>
            			<template slot-scope="scopeData">
            				<!-- 生成的是h4标题 -->
            				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
            			</template>
            		</Category>
         子组件中：

         
         ```js
             <script>
                 export default {
                     name:'Category',
                     props:['title'],
                     //数据在子组件自身
                     data() {
                         return {
                             games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                         }
                     },
                 }
             </script>
         ```

## Vuex

### 1.概念

​		在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

### 2.何时使用？

​	多个组件需要共享数据时

### 3.搭建vuex环境

1. 创建文件：src/store/index.js

```js
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'

//应用Vuex插件
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {}

//准备mutations--用于操作数据(state)
const mutations ={}

//准备state--用于存储数据
const state = {}

//导出store
export default new Vuex.Store({
  actions:actions,
  mutations:mutations,
  state:state,

})
```

2.在main.js中创建vm时传入store配置项

```js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'

Vue.config.productionTip = false
Vue.use(Vuex)

new Vue({
  el:"#app",
  //将App加载到容器中
  render: h => h(App),
  store:store,
  beforeCreate(){
    Vue.prototype.$bus=this //安装全局总线
  }
})
```

###    4.基本使用

1. 初始化数据、配置```actions```、配置```mutations```，操作文件```store.js```

   ```js
   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
   
   const actions = {
       //响应组件中加的动作
   	jia(context,value){
   		// console.log('actions中的jia被调用了',miniStore,value)
   		context.commit('JIA',value)
   	},
   }
   
   const mutations = {
       //执行加
   	JIA(state,value){
   		// console.log('mutations中的JIA被调用了',state,value)
   		state.sum += value
   	}
   }
   
   //初始化数据
   const state = {
      sum:0
   }
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
   })
   ```

2. 组件中读取vuex中的数据：```$store.state.sum```

3. 组件中修改vuex中的数据：```$store.dispatch('action中的方法名',数据)``` 或 ```$store.commit('mutations中的方法名',数据)```

   >  备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写```dispatch```，直接编写```commit```

### 5.getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2. 在```store.js```中追加```getters```配置

   ```js
   ......
   
   const getters = {
   	bigSum(state){
   		return state.sum * 10
   	}
   }
   
   //创建并暴露store
   export default new Vuex.Store({
   	......
   	getters
   })
   ```

3. 组件中读取数据：```$store.getters.bigSum```

### 6.四个map方法的使用

1. **mapState方法**：用于帮助我们映射state中数据为计算属性

   ```js
   computed:{
       //借助mapState生成计算属性，从state中读取数据（对象写法）
       ...mapState({sum:'sum',school:'school',subject:'subject'})
       //借助mapState生成计算属性，从state中读取数据（数组写法）
       ...mapState(['sum','school','subject'])
   
   }
   ```

  2**.mapGetters方法**：用于帮助我们映射getters中的数据为计算属性

```js
computed:{
    //借助mapGetters生成计算属性（对象写法）
    ...mapGetters({ bigSum: 'bigSum' }),
    ...mapGetters(['bigSum']),
}
```

​	3.**mapActions方法**：用于帮助我们生成与actions对话的方法，即：包含$store.dispath(xxx)的函数

```js
methods: {
    // incrementOdd() {
    //   this.$store.dispatch('addOdd', this.num)
    // },
    // incrementWait() {
    //   this.$store.dispatch('addWait', this.num)
    // },
    //使用mapActions生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    ...mapActions({ incrementOdd: 'addOdd', incrementWait: 'addWait' }),

    // ...mapActions(['jiaOdd','jiaWait'])
  },
```

4.**mapMutations方法：**用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

```js
 methods: {
    // increment() {
    //   this.$store.commit('ADD', this.num)
    // },
    // decrement() {
    //   this.$store.commit('SUB', this.num)
    // },
    //使用mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    // ...mapMutations({ increment: 'ADD', decrement: 'SUB' }),
    //使用mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)要和方法名一致
    ...mapMutations(['ADD', 'SUB']),
 }
```

> 备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时需要传递好参数，否则参数是事件对象



## 路由

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key是路径，value是组件。

### 1.基本使用

1. 安装vue-router，命令：```npm i vue-router```  vue2需要安装vue-router@3

2. 应用插件：```Vue.use(VueRouter)```

3. 编写router配置项:

   ```js
   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router
   
   ```

   

4. 实现切换（active-class可配置高亮样式）

   ```js
   <router-link active-class="active" to="./about">About</router-link>
   ```

   

5. 指定展示位置

   ```js
   <router-view></router-view>
   ```

   

### 2.几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
2. 通过切换，'隐藏'了自己的路由属性，默认是被销毁的，需要的时候再去挂载
3. 每个组件都有自己的$router属性，里面存储着自己的路由信息
4. 整个应用只有一个router,可以通过组件的$router属性获取到

### 3.多级路由

1. 配置路由规则，使用children配置项：

   ```js
    routes:[
       {
         path:'/about',
         component:About
       },
       {
         path:'/home',
         component:Home,
         children:[
           {
             path:'news',
             component:News
           },
           {
             path:'message',
             component:Message
           }
           
         ]
       }
     ]
   ```

   2.跳转

```js
<router-link to="./home/news">News</router-link>
```

### 4.路由的query参数

1. 传递参数

   ```js
   //跳转并携带query参数，to的字符串写法
   <router-link :to='./home/message/detail?id=666&title=你好'>跳转</router-link>
   
   //跳转并携带query参数，to的对象写法
   <router-link :to='{
   	path:'./home/message/detail',
       query:{
           id:666,
           title:'你好'
       }
   }'>跳转</router-link>
   ```

   

2.接收参数

```js
$router.query.id
$router.query.title
```

### 5.命名路由

1.作用：可以简化路由的跳转

2.如何使用

​	1.给路由命名：

​		

```js
{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}
```

2.简化跳转

```js
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>
```

### 6.路由的params参数

1. 配置路由，声明接收params参数

   ```js
   {
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符声明接收params参数
   					component:Detail
   				}
   			]
   		}
   	]
   }
   ```

2. 传递参数

   ```vue
   <!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link>
   				
   <!-- 跳转并携带params参数，to的对象写法 -->
   <router-link 
   	:to="{
   		name:'xiangqing',
   		params:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>
   ```

   > 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

  3.接收参数：

​		

```js
$route.params.id
$route.params.title
```