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）