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>