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）