基础语法学习

2021-05-07
1、学习了filter、map、reduce三个高阶函数的使用
filter：arr.filter(function(n){ return boolean; }),遍历数组每一个值，可对该值进行过滤，必须return一个boolean值，最终返回新的数组
map: arr.map(function(n){ return n*1+2 }),遍历数组每一个值，可对数组内的值重新计算赋值，最终返回新的数组
reduce：arr.reduce(function(preValue,n){ return preValue+n; },initial),
	用于数组值汇总计算，preValue默认为0(可使用initial参数指定初始值)，每一次遍历计算的值会赋予preValue，最终返回总值
2、学习了v-model数据双向绑定
v-model原理：通过:v-bind属性绑定和v-on事件监听实现双向绑定
v-model结合radio：v-model绑定值代替以前的name属性实现互斥选中，并通过绑定的值直接拿到选中的value
v-model结合checkbox：单选时：通过v-model绑定boolean值决定是否选中，多选时：绑定数组，双向绑定数组的值获取减少
v-model结合select:v-model绑定在select标签，单选时：绑定的值为字符类型，多选时：绑定的值为数组类型

2021-05-09
1、学习了值绑定语法，在表单中，很多值都是后端数据，所以需要用v-for去绑定值（参考09-v-mode的使用=》v-mode的值绑定）
2、学习了v-mode的修饰符：
lazy:只有按下回车键或失去焦点才会数据双向绑定
number:只能输入数值有效，其余值在失去焦点后会清空
trim:空格会在失去焦点时自动去除
3、组件化开发的使用，分为3个步骤：
	1、创建组件构造器Vue.extend({template:'html代码'})
	2、注册组件（分为全局组件和局部组件），区别为全局组件可在多个Vue的实例中使用，局部组件只能在注册组件所属的Vue中使用
		全局组件注册：Vue.component('组件名','构造器');
		局部组件注册：new Vue({el:'#app',components:{'组件名':'构造器'}})

2021-05-10
1、学习了父组件和子组件的基本使用：在父组件中注册子组件，子组件只能在父组件的作用域范围内使用
2、学习了组件的分离语法：
	1、使用<script type='text/x-template' id="template对应绑定的id">HTML代码</script>
	2、使用<template id="template对应绑定的id">HTML代码</template>
3、学习了组件的语法糖，可省去创建组件构造器Vue.extend()，直接在Vue.conpoment("cpn",{template:'html代码或者分离语法的id'})
4、组件中的数据存放使用data，data必须是一个函数类型的，为什么组件的data必须是函数呢？
	解答：如果组件的data不是函数类型而是对象的情况，就会引起别的组件调用共用数据的情况，在第一个调用组件的地方修改了data的值之后，
		第二个，第三个调用组件的地方都会同步进行修改，因此data被设计成函数类型，每次调用都会返回初始化的对象定义数据
5、父子组件中的通信：
	1、父组件往子组件传递数据：使用组件中的props关键字，定义对象、数组、String等类型的变量接收父组件传输过来的值，
		只需要在标签中使用v-bind绑定对应的变量就可以拿到数据，props定义变量的时候还可以限制父组件传输过来的类型，
		设置默认值等、注意数组及对象默认值必须是函数类型，也可以自定义验证，详细请见《05-组件通信-父组件往子组件传递数据.html》
	2、子组件往父组件传递数据：在子组件中使用$emit("event",obj)发射事件，然后在使用子组件的标签中监听该事件，
		父组件时间监听中的方法，获取子组件传输的数据。
	
2021-05-16
1、学习了watch属性监听事件：和data、methods同级定义，可监听data定义的属性值改变
	watch:{
		属性名(newValue,oldVlue){
			默认有两个参数：newValue为属性改变后的值，oldValue为原有值
		}
	}
2、父子组件中的访问：
	1、父组件访问子组件有$children和$refs
		$children:获取为子组件的数组，可用下标指定获取对应子组件对象，对象中包含data、methods等等
		$refs:默认为空，需子组件标签使用时定义ref="key"，再通过this.refs.key获取对应的子组件对象
	2、子组件访问父组件及根组件
		$parent:子组件直接通过this.$parent获取对应的父级组件对象
		$root:子组件直接通过this.$root获取对应的根据组件对象（也就是Vue实例）

2021-05-17
1、学习了slot插槽的基本使用，在模板中定义slot标签，可定义默认html元素，父组件调用时刻在组件标签中定义元素覆盖原有模板定义元素
	slot可定义name属性，代表唯一标识、在模板中使用可指定slot="name"覆盖指定的插槽内元素
2、组件作用域：组件的作用域为各自的实例中，例如父组件中使用子组件，使用data属性，获取的一定是当前父属性实例的值
			    不会获取子组件的值，子组件的值只有在子组件定义的模板中生效，各自在各自实例中体现作用域
3、slot插槽作用域，使用slot插槽作用域的根本原因为：父组件在调用子组件模板进行使用时，希望使用原有子组件的数据换一种形式展示
	这个时候，我们可以在子组件模板中定义属性（任意命名），父组件使用模板时，在标签中定义slot-scope="自定义"达到数据映射
	在使用vue的取值语法通过《自定义.模板定义属性》拿到数据，再按照想要的展示方式覆盖子组件模板插槽定义的元素
4、前端ES6的模块化语法
	1、在使用ES6模块化语法必须在script引用标签中加入type="module",浏览器才会认定该js为模块化
	2、导出的方式有:导出对象(export obj{})、函数(export function showInfo(){})、
				      类(export class Person{})、默认命名{export default 变量名}
	   需要注意的是：模块化里面只能有一个export default 值
	3、导入的方式有：
			正常导入：import {导出的变量名、导出的变量名...} from '需要引入导出值得js路径'
			全量导入：import * as mz(自定义) from '需要引入导出值得js路径'  --可导出引入js的所有导出值
			默认值导入：import xxx(自定义) from '需要引入导出值得js路径'
		
2021-05-18
1、webpack模块化大宝，webpack为了可以正常运行必须依赖node环境，node环境为了可以正常执行很多代码，必须包含各种依赖的包，
	所以需要用到npm工具，npm可以管理node需要用到的所有依赖包