学习的课程地址：老杜Vue视频教程，Vue2，Vue3实战精讲，一套通关vue_哔哩哔哩_bilibili
1、vue程序初体验
2、vue核心技术(基础)
3、Vue组件化
前面参见：
3.7props配置
//子组件
<template>
<div>
<h3>品牌：{{brand}}</h3>
<h3>价格：{{price}}</h3>
<h3>颜色：{{color}}</h3>
</div>
</templat>
<script>
exprot default{
name:car,
//子组件接收
props:['brand','color','price']
}
</script>
//父组件 传值
<car brand='宝马' color='白色' price='100'></car>
<car brand='比亚迪' color='红色' price='200'></car>使用props配置可以接收其他组件传过来的数据，让组件的数据变为动态数据，三种接收方式：
（1）简单接收
props:['name','age','sex']
(2)接收时添加类型限制
props:{
name:String
age:Number
sex:String
}
(3)接收时添加类型限制，必要性限制，默认值
props：{
brand:{
type:String,
required:true
},
color:{
type:String,
default:''
},
price:{
type:Number,
required:true
}
}
上面是静态的使用场景，如果是动态的，prop 可以通过 v-bind 动态赋值
注意：在使用过程中，不要修改props中的数据，如果确有修改的需求，使用一个中转变量。
3.8在父组件中获取子组件
（1）两步：第一步：打标记，ref="car1"；第二步：获取子组件,this.$refs.car1
（2）拿到子组件，就可以拿到其上面的数据：this.$refs.car1.brand
（3）除了能够拿到组件，还可以拿到普通的DOM元素。
3.9mixins配置（混入）
（1）简单使用步骤：
a、目的抽取同样的代码片段到mixin.js；
b、导出export const mixin={}该代码；
c、在要使用的组件中导入import {mix1} from '../mixin.js'；
d、增加一个配置项 mixins:[mix1]
（2）当公共的js中有一个方法a，组件中也有一个同名的a，并不会产生覆盖效果，只执行组件中的a方法，即混入并不会破坏原组件的机构。
（3）对于八个钩子函数来说，有特殊的安排：
a、不会产生覆盖的问题；
b、两个地方的钩子都执行；
c、先执行mxins的生命周期函数，再去执行原汁原味的mounted;
(3)全局混入：在main.js中
import {mix1} from './mixin.js'
import {mix2} from './mixin.js'
import {mix2} from './mixin.js'
//全局混入
Vue.mixin(mix1)
Vue.mixin(mix2)
Vue.mixin(mix3)3.10plugins配置（插件）
（1）给Vue做功能增强的。插件是一个对象，对象中必须有install方法，这个方法会被自动调用。这个方法上的参数包括两部分：第一部分：Vue构造函数；第二部分：可以接收用户在使用这个插件时传过来的数据，参数个数无限制。
插件一般都放到一个plugins.js
（2）导入插件（main.js）
import {pluginObj} from './plugins.js'
(3)使用：插件的使用通常放在创建Vue实例之前
Vue.use(pluginObj,1,2,3,4)
3.11局部样式scoped
默认情况下，在Vue组件中定义的样式最终会汇总到一块，如果样式名一致，会导致冲突，冲突发生后，以后来加载的组件样式为准。引入scoped
另外Vue组件的style样式支持多种样式语言，例如：css、less、sass等。
<style scoped lang="less"></style>
使用less注意安装less-loader: npm i less-loader
App跟组件中的样式style不建议添加scoped，根组件的样式采用全局的样式。
3.12案例知识点
（1）兄弟（并列关系的）组件之间传递数据，目前所学的知识，只能将需要的数据定义到他们共同的父组件，通过props进行数据传递。因为Vue不让修改该props，所以可以在父组件定义修改的回调方法传给子组件，子组件用props接收。很巧妙！
（2）祖孙组件之间传递方法（因为不建议修改props，所以传方法）
//爷组件
<bugList :modifyResolvedCallback="modifyResolvedCallback"></bugList>
//父组件
<bugItem :modifyResolvedCallback="modifyResolvedCallback"></bugItem>
props:['modifyResolvedCallback']
//孙组件
props:['modifyResolvedCallback']
methods:{
medifyResolved(bugId){
this.modifyResolvedCallback(bugId)
}
}（3）当是checkbox表单时，它的checked的值就类似于其他表单value的值，可以直接使用v-model进行双向数据绑定，它的值是true绑定的值就是true，它的值是false绑定的值就是false。
（4）数组的reduce函数的妙用知识点参见：es6 中的 reduce()方法详解_es6的reduce适用场景
案例中的条件统计： this.bugList.reduce((a,b)=>{return a + (b.resolved ? 1 : 0)},0)
（5）通过v-model双向数据绑定一个计算属性，通过其getter和setter方法实现相关功能，下面例子是全选复选框的代码
//template
<th class="c1">全选<input type="checkbox" v-model="isAll"></th>
//script
computed:{
isAll:{
get(){//当下数组的长度与已经解决的数量相等且数组不为空时
return this.bugList.length===this.resolvedCount && this.bugList.length>0
},
set(val){//复选框的选择情况传给父组件的回调函数，在父组件修改数组的数据
this.selectAllCallbacke(val)
},
}
}（6）鼠标变成小手
cursor: pointer;属性值会将鼠标指针样式变为小手形状。pointer这个值是比较常用的，它表示该元素在鼠标悬停时像是一个可点击的链接或按钮。除了pointer之外，还有其他的cursor属性值可以用于不同的场景。- 例如
cursor: crosshair;会将鼠标指针变成十字线形状，通常用于表示精确的选择或定位；cursor: text;会将鼠标指针变成文本输入形状（通常是竖线形状），用于表示该区域可以进行文本输入等。
（7）如果后期给对象动态添加属性，并且需要这个属性是响应式的，请使用this.$set(bug,'editState',true)
（8）如何判断某个对象上是否具有某个属性需要用hasOwnProperty,如：bug.hasOwnProperty('editState')
（9）如何获取文本框，并让文本框获得焦点(因为vue只有方法代码执行完成后才进行渲染)：
方案一：在方法中启动一个任务（一般不用这个）
setTimeout(()=>{this.$refs.inputDesc.focus()},300)
方案二：使用Vue提供好的API(里面的回调函数会在下一次DOM全部渲染完毕后被调用)
this.$nextTick(function(){this.$refs.inutDesc.focus()})