# Vue教程

**Repository Path**: GD03290506/Vue

## Basic Information

- **Project Name**: Vue教程
- **Description**: 渐进式JavaScript 框架(Vue练习)
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-27
- **Last Updated**: 2022-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 笔记

## 脚手架结构：

	|-- public
	|   |-- favicon.ico      页签图标
	|   |-- index.html       主页面
	|-- src（工程中每个案例文件夹的名字变为src即可执行）
	    |-- App.vue          汇总所有组件
	    |-- main.js  		 入口文件
	    |-- assets			 存放静态资源
	    |   |-- logo.png
	    |-- components		 存放组件
	        |-- School.vue
	        |-- Student.vue
	|-- .gitignore           git版本控制忽略的配置
	|-- babel.config.js		 babel的配置文件
	|-- package-lock.json	 应用包配置文件
	|-- package.json  		 包版本控制文件
	|-- README.md			 应用描述文件（改工程中为脚手架笔记）

## 关于不同版本的Vue:
   - (1).Vue.js是完整版的Vue，包含核心功能+模板解析器

   - (2).Vue.runtime..xxx.js没有模板解析器,所以不能使用- -template配置项，需要使用
      	
      	render函数接受到createElement函数去指定类容

## vue.config.js配置文件

> 使用vue inspect > output.js可以查看vue脚手架下的默认配置
>
> 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh/config/

​      	

## ref属性

1.被用来给元素或者子组件注册引用信息（id的代替者）

2.应用在html标签上获取真实DOM元素，应用在组件标签上是组件实例对象（vc）

3.使用方式

​		打标识：<h1 v-text="msg" ref="title"></h1> 或者<school ref="sch" />

​		获取：this.$refs.title

## 配置props

​		功能：让组件接受外部传过来的数据

​		(1) 传递数据： 

​					<demo name="XXX"/>

​		(2)接受数据：

​				第一种方式（只接受）

​				

```
		props:['name','age','sex']	
```

​				第二种方式（限制类型）

​				

```vue
		props:{
            name:String,
            age: Number,
            sex: String
        }
```

​				第三种方式（接受的同时，对类型进行限制,默认值的指定,必要性的限定）

```vue
		props:{
            name: {
                type: String,  //name的类型是字符串
                required: true,  //name是必传的
            },
            age: {
                type: Number,
                default: 50, //默认值
            },
            sex: {
                type: String,
                required: true,
            },
        },
```

备注：props是只读的，vue底层会监视你对props的修改，如果进行了修改，就会发出警告，若业务需求要改，			请赋值一份props的内容到data中一份，然后修改data中的数据

## mixin(混入)

​		功能：可以把多个组件公用的配置提取成一个混入对象

​		第一步：定义混合

```
export const mixin = { //export暴露
    methods: {
        showName(){
            alert(this.name)
        }
    }

}
```

​		第二步：引入混合

```
import {mixin} from './mixin'
```

​		第三步：使用混入

- 全局混入：

```
main.js
import {mixin} from './mixin'
/* 全局配置混合 */
Vue.mixin(mixin)
```

- 局部混入

```
import {mixin} from '../mixin.js'

    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                age:16
            }
        },
        mixins:[mixin]
    }
```

## 插件

功能：用于增强vue

本质：包含install方法的一个对象，install的第一个参数是vue,第二个参数是插件使用者传递的数据

定义插件：

```vue
export default{
    install(Vue,options){
        console.log('@@@install',Vue);
        /* 配置全局过滤器 */
		Vue.filter('myslices',function(value){
			return value.slice(0,4)
		})
        /* 定义混合 */
        Vue.mixin({
            data() {
                return {
                    x:100,
                    y:200

                }
            },
        })
        /*给Vue原型上添加一个方法（vm。vc就都能用了）*/
        Vue.prototype.hello = () =>{
            alert('你好啊')
        }
    }
}

```

使用插件：

```
/* 使用插件 */
Vue.use(plugins);
```

## scoped样式

作用：让样式在局部生效，防止冲突

写法：

```css
<style scoped>
    .demo{
       background-color: red;
    }
</style>
```

## 组件化编码流程

<1>.实现动态组件：抽取组件，使用组件实现静态页面效果

<2>.展示动态数据：

​				(1).数据的类型，名称是什么？

​				(2).数据保存在那个组件？

<3>.交互-从绑定事件监听开始

## nanoid 生成为唯一id

## 总结TodoList案例

1.组件化编码流程

​	(1)、拆分静态组件:组件按照功能点拆分，命名不要与html有冲突

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

   - 一个组件在用：放在组件自生即可
   - 一些组件在用：放在他们共同的父组件上<span style="color:red;">（状态提升）</span>

​    (3)、实现交互，从绑定事件开始

2.props适用于：

​	父组件 ==> 子组件 通信

​	子组件 ==> 父组件 （要求父先给子一个函数）

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

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

## webStorage（浏览器的本地存储）

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

​	2.浏览器通过window.sessionStorage 和 window.localStorage属性来实现本地缓存机制

​	3.相关API

​			(1)、XXXStorage.setItem('key','value')

​					该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值

​			(2)、XXXStorage.getItem('key')

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

​			(3)、XXXStorage.removeItem('key')

​					该方法接受一个键名，作为为参数，把该键值对从存储中移除

​			(4)、localStorage.clear()

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

​	4、备注

​			(1)、sessionStorage 存储的内容会随着浏览器的关闭而消失

​			(2)、localStorage 需要手动清除才会消失

​			(3)、如果XXXStorage.getItem('key')，如果key对应的值获取不到，就会返回null

​			(4)、JSON.parse(null) 的返回还是null

## 组件的自定义事件

​	1.一种组件见的通信方式，适用于：<span  style="color:red;font-size:20px;">父组件===>子组件''</span>

​	2.使用场景：A是父组件，B是子组件，B给A传数据，那么就要在A中给B绑定自定义事件(<span style="color:red;">事件的回调在A中</span>)

​	3.绑定自定义事件

- 第一种方式，在父组件中：

```
<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
```



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

```
<Demo ref="student"/>
.....
mounted(){
    //先用ref获取组件实例对象（VC）,在给组件实例对象绑定自定义事件
    // this.$refs.student.$on('atguigu',this.getStudentName)
    // this.$refs.student.$once('atguigu',this.getStudentName) //只触发一次事件
 }
```

- 若想让事件触发一次，可使用once修饰符,或$once

  4.触发自定义事件：

```
			//触发student组件实例身上的atguigu事件
            this.$emit('atguigu',this.name)  //$emit触发自定义事件
            this.$emit('demo',this.name)
```

​	   5.解绑自定义事件：

```
			this.$off('atguigu'); //适用于解绑一个自定义事件
            // this.$off(['atguigu','demo']); //适用于解绑一个自定义事件
            // this.$off();//所有自定义事件都被解绑
```

​		6.组件上也可以绑定原生的DOM事件，需要使用native修饰符

​		7.注意：通过this.$ref.xxx.$on('atguigu',回调)绑定自定义事件时，回调<span style="color:red;">要么配置在methods中，要么用箭头函数</span>，否则this指向会出问题

## 全局事件总线（globalEventBus）

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

​	2.安装全局事件总线：

```
new Vue({
	.....
  beforeCreate() {  //改生命周期函数执行时，页面还没解析
    Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
  },
}).$mount('#app')
```

​	3.使用事件总线：

​		1.接受数据：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

```
methods:{
	demo(data){.....}
},
mmounted(){
	this.$bus.$on('xxx', this.demo)
}
```

​		2.提供数据：

```
this.$bus.$emit('xxx', 数据);
```