# vue学习

**Repository Path**: liangchengjava/vueStudy

## Basic Information

- **Project Name**: vue学习
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue学习

#### 时间：2019-08-15 19:08:09  
更改实战Demo 由于之前没学到v-model与value组合实现复选框功能 自己添加了点击事件  画蛇添足

v-model与value组合使用时多个勾选框都绑定到同个数组类型的数据， 
value的值在数组当中，就会选中这一项。这一过程也是双向的,在勾选时,value的值也会自动push
这个数组中,在取消勾选时，数组也会自动删除这个value


#### 时间：2019-08-15 19:16:10  
v-model单选框案例


#### 时间:2019-08-15  23:21:08
v-model 复选框/下拉选择框demo  
v-model .lazy .number .trim修饰符  
.lazy：失焦或按回车时才更新数据
.number：把String类型数字转换为number
.trim：过滤输入首尾的空格

#### 时间 2019-08-16 19:23:10
新增注册组件  
组件属性
单项数据流
数据验证
组件通信Demo

#### 时间：2019-08-17 14:18:10
##### 父子通信
1. 新增v-model子组件向父组件通信 
2. v-model表单双向数据绑定

##### 非父子通信
1. 中央事件通信

##### 时间：2019-08-20 19:14:31
###### 新增slot内容分发Demo
1. 作用域
2. 单个slot使用
3. 具名slot使用
4. 作用域插槽
5. 访问slot
###### 新增组件高级用法
1. 内联模板
2. 动态组件
3. 异步组件
4. 组件递归
###### 新增第七章组件实战Demo
书籍案例BUG：  
在监听器中监听父组件value并进行修改子组件value 会导致重复修改  
```javascript
    //启动监听 当子组件的数据发生变更  去更改父组件数据
    watch: {
        //函数中的value 就是当前发生变更的childNum
        childNum: function (value) {
            //传递数据到父组件也就是v-model绑定的数据
            this.$emit('input', value);

        }
        //书本这段代码有问题   只需要判断第一次进来的即可
        // value: function (val) {
        //     console.log('value:'+val);
        //     this.updateValue(val);
        // }
    }
```
1. 在Demo上继续提升  可更改最大值 最小值 和 指定增加减小值
2. 增加键盘事件 按上下键 分别增加1和减小1


##### 时间 2019-08-21 16:54:59
新建标签页组件Demo  
优化了一个性能问题   
###### 问题：书籍Demo在子组件pane生命周期钩子中进行更新父组件数组导致每次有多少个子组件 就会进行几次更新数据  
优化：在父组件tabs生命周期钩子中进行数组更新 只需要进行一次就行

```java
//在子组件生命周期钩子进行数组更新  总共遍历了组件个数n*2次
//做了组件个数n次数组的清空与添加
```
![avatar](img/1566378237052.png)   
![avatar](img/1566378315915.png)   
![avatar](img/1566378494509.png)  
 
```java
//现在把数组更新放到父组件当中 只需要进行2次遍历子组件  1次数组的清空与添加操作
```
![avatar](img/1566378826532.png)