Vue 零碎記憶2

0422發表於2018-07-30
Vue

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）

相關文章