持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
13.可变参数：
function sum(...num){
console.log(num)一个数组，显示了所有参数。
arguments：function 自带的参数，也是一个数组，显示的传入所有参数。
}
sum(1,2,3,4,5,6,7,8)
14.高阶函数：
map(n=>{}):对数组所有值进行操作改变。
filter(n=>{}):过滤，判断数组中哪些需要的重新传入新数组。(回调函数必须传回 true或false filter(n=>{ return n>0 (即 return true 或 false) }))
reduce((preValue,n)=>{},0):对数组进行汇总。（两个参数，第一个是一个回调函数，第二个是一个初始默认值。 preValue是上一次计算得到的值，n是数组当前的循环的值。）
如需累加reduce((preValue,n)=>{return preValue + n},0)
15.事件委托：
<div id="box">
<input type="button" id="add" value="添加" />
<input type="button" id="remove" value="删除" />
<input type="button" id="move" value="移动" />
<input type="button" id="select" value="选择" />
</div>
window.onload = function(){
var oBox = document.getElementById("box");
oBox.onclick = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == 'input'){
switch(target.id){
case 'add' :
alert('添加');
break;
case 'remove' :
alert('删除');
break;
case 'move' :
alert('移动');
break;
case 'select' :
alert('选择');
break;
}
}
}
}
在同一个父级元素中，几个相同的div或标签，需要n个事件，这是运用它父级的事件，判断返回事件的目标节点，我们成为事件源，并执行事件，这样可以优化性能.
原理：每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。
16.v-model修饰符：(是 v-bind:value='value' 和 v-on:input='inputZhi')
-
v-model.lazy:懒加载 在input中只会在失去焦点或敲回车才会修改数据。
-
v-model.number: v-model一般赋值都是string类型 加上 .number 可以让数据赋值时为number类型(不需要数据转换)。
-
v-model.trim:清除数据左右的空格。
17.组件传值（父组件给子组件传值）：
引用的组件上传入值：
<cpn :cinfom='p_cinfom'></cpn>
组件的模板上调用值：
conts cpn={
template:`<div>{{cinfom}}</div>`,//也可以是id等标识（<template id='zujian'></template>）
// 方法一：
props:['cinfom'],
// 方法二：
props:{
cinfom:{
type:Array,//如果是数组或对象，必须是一个函数
default(){return []},
required:true//必传
}
}
}
//父组件或页面的参数配置
data(){
p_cinfom:[],
}
components:{
cpn:cpn
}
18.子组件向父组件传递参数（使用自定义事件传递的）：
<cpn @itemclick='cpnclick'></cpn>
this.$emit('itemclick',{weiyi: 44}) :Vue组件向父级传递事件。
this.triggerEvent('getSystemInfo', { weiyi: 44 }, {}) 小程序向父级传递事件
//父组件的参数配置
data(){
p_cinfom:[],
},
components:{
cpn:cpn
},
methods:{
cpnclick(obj){
console.log('cpnclick',obj)
},
}
19.watch:(监听data数据的变化情况)
data(){
return{
zhi:'1'
}
},
watch:{
zhi(newValue,oldValue){
}
}
20.父子组件的访问
父访子： refs
1.this.$chilren[x].方法（属性）
2.refs:($refs是对象类型，默认是空对象)
1.<cpn ref='aaa'></cpn>: this.$refs.aaa (vue获取组件实例)
2.this.selectComponent('#id') (微信小程序获取组件的实例)
3.<cpn ref='aaa'></cpn>：aaa(ref){ 组件实例=ref } (支付宝小程序获取组件实例)
子访父： $parent(不建议使用，组件独立性变弱了，复用性不强，和父组件的耦合度太高了)
this.$parent
访问根组件：(访问的是最外层的vue实例)
this.$root
21.solt插槽： Vue(微信小程序)：
组件里 <cpn></cpn>：<slot name='aa'></solt>
页面使用：<cpn><view solt='aaa'></view></cpn>
如果插槽没有name,那么它会将页面中所有的DOM放入插槽。 插槽里面的方法，实在该页面使用，不是在组件添加。
只存在于vue：
组件之scope 属性，组件如何给slot组件传数据？(作用域插槽)
解释：在子组件中使用插槽，父组件使用子组件，并使用替换插槽，但是父组件的数据是子组件的，这里需要将子组件的数据传递到父组件。
data(){ return{ arr:[1,2,3] } }
组件里 <cpn></cpn>：<slot name="list" :list="arr"><slot>
页面使用：
<cpn>
<template slot="list" scope="solt">(或：<template slot-scope="solt">)
<!--注意，solt.xxx这个字段要和父组件内传的字段一致-->
<div v-for='item in solt.list '></div>
</template>
</cpn >
22.模块化：
js里：
var A=(function(){
const obj={}
let name='向';
obj.name=name;
return obj（导出）
})()
console.log(A.name)（导入，引入文件js）
CommonJs:
module.exports={（导出）
flage:false,
test(){
}
}
var {flage，test} = require('文件地址')（导入）
// 这个需要底层的支撑(nodeJs里面可以)
es6:
const name='1',
const cpn={
name:'1';
}
export default {cpn,name} //(导出）//export default cpn
//export {name,cpn}
<script type='module'>//(js添加type，使得进行模块开发)
import cpn_1 from '文件地址'（导入）
//import {name,cpn} from '文件地址' => （import * as cpn_1 from '文件地址'）可以直接导入所有方法，不用写多个
</script>
//export default 导出时，import导入可以自己命名
23.npm 安装使用 vue:
vue安装成功会存在两个版本：
1.runtime-omly -->代码不能有template（相当于template）无法编译；
2.runtime-compiler -->代码可以有template
报错解决（无法编译）：
webpack.config.js 配置：
resolve:{
//alias别名
alias:{
'vue$':'vue/dist/vue.esm.js'//将vue指向具体得文件夹（默认是vue/dist/vue.runtime.js）
}
},
24.this.$nextTick:
<div ref="msgDiv">{{msg}}</div>
this.$refs.msgDiv.innerHTML
页面渲染了{{msg}},修改msg,然后获取节点的innerHTML，此时获取的旧的innerHTML，
需要调用方法this.$nextTick(()=>{}),他是当DOM更新后会执行的，可以获取新的innerHTML
