Vue.js（八）

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>