Vue 零碎记忆2

1：基本使用

组件不仅仅是要把模板的内容进行复用， 更重要的是组件之间要进行通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数， 子组件接收到后根据参数的不同来渲染不同的内容或者执行操作。

2：父传子

 props的值可以是两种，一种是字符串数组，一种是对象。
 props是单项数据流

静态数据
<div id="app">

<my-component warning-text="提示信息" ></my-component >

</div>
<script>

Vue.component('my-component', {
    props: ['warningText'],
    template: '<div>{{ warningText }}</div>'
});
var app = new Vue({
    el: '#app'
})

</script>
动态数据
<div id="app">

<my-component  :message="parentMessage " ></my-component >

</div>
<script>

Vue.component('my-component', {
    props: ['message '],
    template: '<div>{{ message }}</div>'
});
var app = new Vue({
    el: '#app',
data: {
    parentMessage: ''
}
})

</script>
注意： 如果你要直接传递数字、布尔值、数组、对象，而不使用v-bind，传递的仅仅是字符串
<div id="app">

<my-component  message="[1, 2, 3]" ></my-component >
<my-component  :message="[1, 2, 3]" ></my-component >

</div>
<script>

Vue.component('my-component', {
    props: ['message '],
    template: '<div>{{ message.length }}</div>'
});
var app = new Vue({
    el: '#app',
})

</script>
同一个组件使用了两次，不同的是第二个使用的是v-bind， 渲染后的结果，第一个是7， 第二个是3
3： 数据校验？

Vue.component('my-component', {

props:
    {
        propA：Number // 必须是数字类型
         propB: [String, Number] // 必须是字符串或者数字类型
         propC: { // 布尔值， 如果没有定义，默认值就是true
             type: Boolean,
             default: true     
         }, 
         propD: { // 数字，而且是必传的
            type: Number,
            required: true
        },
        propE: { // 如果是一个数组或者对象， 默认值必须是一个函数来返回。                                  
            type: Array,
            default: function () {
                return [];
            }
        }, 
    }

})
3：子传父

3.1：自定义事件  

<div id="app">

<p>总数：{{ total }}</p>
<my-component @increase="handleGetTotal "></my-component>
<my-component @reduce="handleGetTotal "></my-component>

</div>
<script>

Vue.component('my-component', {
    template: '
        <div>
            <button @click="handleIncrease"></button>
            <button @click="handleReduce"></button>
        </div>
    ',
    data: function () {
        return {
            counter: 0
        }
    },
    methods: {
       handleIncrease : function () {
                    this.counter++;
                    this.$emit('increase', this.counter);
                },
                handleReduce : function () {
                    this.counter--;
                    this.$emit('reduce', this.counter);
                }
    }
});

var app = new Vue({
    el: '#app',
    data: {
        total: 0;
    },
    methods: {
        handleGetTotal: function (total) {
            this.total = total;
        }
    }
 })

</script>
注意：$emit()方法的第一个参数是自定义事件的名称。

3.2: v-model 

<div id="app">

<p>总数：{{ total }}</p>
<my-component  v-model="total"></my-component>

</div>
<script>
Vue.component('my-component', {

    template: '
        <div>
            <button @click="handClick">+1</button>
        </div>
    ',
    data: function () {
        return {
            counter: 0
        }
    },
    methods: {
       handClick : function () {
                    this.counter++;
                    this.$emit('input', this.counter);
                }
    }
});

var app = new Vue({
    el: '#app',
    data: {
        total: 0;
    }
 })

</script>
注意： $emit 的事件名是特殊的input

 3.3： 父链和子组件索引
    this.$parent 
    this.children 来访问父组件或者子组件           

4：webpack?

模块化、组件化、CSS预编译等概念已经成了经常讨论的话题了。
4.1：gulp和webpack比较？
    gulp处理的代码仍然是你写的代码，只是局部变量名被替换 , 一些语法做了转换而已，整体的内容并没有改变。、
    webpack打包后的代码已经不是你写的代码了，其中夹杂了很多webpack自身的模块处理代码。
4.2：认识webpack？
    在webpack的世界里，一张图片、一个css甚至一个字体都会被称之为一个模块。webpack就是用来处理模块间的依赖关系的，并且将它们进行打包。
4.3： webpack配置？
    npm install webpack --save-dev
    npm install webpack-dev-server --save-dev [主要的作用是启动一个服务、接口代理以及热更新等]

{

"script": {
    "dev": "webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"
}

}
注意： 一般在局域网下，需要其他同事访问的时候可以这样配置， 否则默认的127.0.0.1就可以了。

 4.4：webpack的核心？
    入口(Entry)、出口(Output)、加载器(Loders)、插件（Plugins）