欢迎光临我的博客[http://poetize.cn]，前端使用Vue2，聊天室使用Vue3，后台使用Spring Boot
ES6
var：变量值可以改变，没有if和for块级作用域（可以通过闭包函数作用域解决）
let：变量值可以改变，有if和for块级作用域
const：变量值不变
JS函数
普通函数：
1）声明函数：function funcName(){};
2）函数表达式：var add = function(){};
匿名函数：
1）变量赋值：直接通过 name() 进行调用。
var add = function (a,b){
console.log(a + b);
}
add(1,2);
2）自执行函数：使用小括号进行包裹匿名函数，在小括号后面加小括号进行调用。
(function (){
console.log(1)
})()
JS高阶函数
for(let i in list)：i代表下标
for(let item of list)：item代表元素
函数式编程：
filter / map / reduce
nums.filter(function(n){return}) //过滤
nums.map(function(n){return}) //遍历处理
//initialValue可选，如果数组为空且未提供initialValue，将抛出TypeError异常。
nums.reduce(function(previousValue,n){return previousValue + n}, initialValue) //汇总
箭头函数：=>
组件化开发（无论全局组件还是局部组件都需要在new Vue挂载的实例下才能使用）
1. 创建一个组件构造器：const cpnc = Vue.extend({template:`<div></div>`})
2. 注册组件：
全局组件：
Vue.component("my-cpn", cpnc) //原生写法
Vue.component("my-cpn", {template:`<div></div>`}) //语法糖简写
局部组件：
const app = new Vue({
el:"#app",
data:{},
components:{
"my-cpn":{template:`<p>你好</p>`}
}
})
3. 使用组件：<my-cpn></my-cpn>
父子组件（1是父组件，2是子组件）：
const cpnc2 = Vue.extend({
template:`<div></div>`
})
const cpnc1 = Vue.extend({
template:`<div><cpnc2></cpnc2></div>`,
components:{"cpnc2":cpnc2}
})
Vue.component("cpnc1", cpnc1)
父传子（Vue对象中的数据传到子组件中）（通过props进行数据绑定）：
Vue.component("my-cpn", {
data:function(){ //一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝（不是同一个对象）
return {
count: 0
}
},
template:`<button @click="increment">{{ name }}</button>`,
props:['name'], //方式一
props:{ //方式二
name:String, //类型限制
age :[Number,Object], //多种类型限制
address:{
type:String, //类型限制
default:'', //字符串默认值
default(){return []}, //对象或者数组默认值（必须是函数形式）
required:true
}
}
methods:{
increment(){},
decrement(){}
}
})
父组件使用：
<my-cpn :name="name"></my-cpn>：绑定父组件name变量
<my-cpn name="name"></my-cpn>：绑定name字符串
子传父（子组件中的数据传到Vue对象中）（通过$emit进行自定义事件绑定）：
const app = new Vue({
el: "#app",
data: {
name: "ld",
password: "aaa"
},
methods: {
cpnclick(item) {
alert(item);
}
},
components: {
"ld": {
template: `
<div>
<button v-for="item in cate" @click="btnclick(item)">
{{item.name}}
</button>
</div>`,
data() {
return {cate: [{id: "l", name: "sara"}, {id: "d", name: "ld"}]}
},
methods: {
btnclick(item) {
//发射事件：自定义事件
this.$emit('item-click', item)
}
}
}
}
})
父组件使用（绑定父组件cpnclick方法）：
<div id="app">
<ld @item-click="cpnclick"></ld>
</div>
父访问子：
this.$children[0]：获取子组件对象
this.$refs.ld：获取子组件对象（需要在组件上添加属性：<cpn ref="ld"/>）
访问根组件：$root
$event：代表原生事件对象
$event.targer.value
<button @click="fun('data', $event)">
Submit
</button>
methods: {
fun: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault()
}
alert(message)
}
}
slot 插槽
模板中预留插槽：
<slot>默认值</slot>
自定义标签中添加内容：
<spn>自定义内容</spn>
具名插槽（可以添加多个插槽）：
<slot name="left">默认值</slot>
<slot name="right">默认值</slot>
<spn>
<span slot="left">自定义值</span>
<span slot="left">自定义值</span>
</spn>
作用域插槽：
<slot :data="data">默认数据处理：{{ data }}</slot>
<spn>
<template slot-scope="slot">自定义值处理：{{ slot.data }}</template>
</spn>
