技術胖1-4季視頻複習— (看視頻筆記)

輸入

技術胖視頻1-4季

總記不太住的

1. 模板的使用，template
2. component 的註冊、傳值、父子組件
3. methods中的 $event
4. nextTick 使用是在 哪一步前，哪一步後？
5. 內置組件slot的使用

輸出

代碼

代碼收錄在GitHub, 2 34文件夾下面，本文代碼

筆記

1. template 使用
   三種寫法
   哪三種寫法？
   1.直接在實例裏面寫的

   var app = new Vue({
       el: '#app',
       data: {
           cents: 20000
       },
       template: '<div>{{ cents }}</div>'
   })

   2.使用id綁定template 完了在data中定義的，最經常使用

   注意，若是有template，只渲染template裏面的東西
   template裏面必需要有 div p 這些html外層標籤，渲染的時候，會去掉 template, 若是 <template> 文字</template>，要是html代碼段 <template><div>balabala</div></template

   <div id="app">
       <template id="test">
           <div>
               {{ cents }}
           </div>
       </template>
   </div>
   
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               cents: 20000
           },
           template: '#test'
       })
   </script>

   3.在script中寫的，不經常使用，無論它

2. component使用複習
   註冊，全局註冊、局部註冊

   注意：
   全局註冊，不須要在 vue 實例中components 中聲明
   局部註冊須要, components: {a: a}

   //全局註冊
   Vue.component('bus', {
       template: `<div>這是汽車組件</div>`
   })
   var app = new Vue({
       el: '#app',
       data: {
           cents: 20000
       }
   })
   // 局部註冊
   var bus = {
       template: `<div> 這是局部組件測試</div>`
   }
   var app = new Vue({
       el: '#app',
       data: {
           cents: 20000
       },
       components: {
           bus: bus
       }
   })

   如何向組件傳值, props的使用

   var bus = {
       template: `<div> 這是組件傳值測試 {{ objp.name }} 今年 {{ objp.age }}</div>
       `,
       props: ['objp']
   }
   var app = new Vue({
       el: '#app',
       data: {
           obj: {
               name: '遲不子',
               age: 18
           }
       },
       components: {
           bus: bus
       }
   })

   父子組件,
   首先， 如何在實例中使用單個組件， 使用全局或者局部註冊法
   如何在組件使用組件？
   template: '#id'
   意思，模板是找 id的template

   // 全局註冊孩子組件
   // 或者使用變量定義， 用 component 引入
   Vue.component('child',{
       template:`<div> 我仍是個寶寶</div>`
   })
   //或者局部註冊
   var parent = {
       template: `
       <div>
           <p>
               這是組件傳值測試 {{ objp.name }} 今年 {{ objp.age }}
           </p>
           <child></child>
       </div>
       `,
       props: ['objp'],
       components: {
           child: {
               template: `<div> 我仍是個寶寶</div>`
           }
       }
   }

3. $event 和調用順序有關係嗎？

   沒有
   是鼠標事件屬性
   target 是實際點擊元素， <span>
   currentTarget 是綁定click 事件的元素   sapn外面的div
   
   ```
   <div id="app">
       <div @click="handle(33, $event)">
           <span>點擊一</span>
        </div>
       <div @click="handle2( $event, 44)">點擊二</div>
   </div>
   ```

4.nextTick 和 created mounted updated 順序？ 還沒弄清楚，待續

在執行， vm.person = "lisi" 後
只執行了 updated
沒有執行 nextTick？

```
var vm = new Vue({
    el: '#app',
    data: {
        person: 'zhangsan'
    },
    created: function(){
        console.log("created", this.person);
    },
    mounted: function(){
        console.log("mounted", this.person);
    },
    updated: function(){
        console.log("updated", this.person);
    }
})
// vm.age = "29";
vm.$nextTick(function(){
    console.log('執行nextTick', this.person);
})
```

5.slot 的使用

參考博客：https://www.w3cplus.com/vue/v...

幾種狀況：
1，若是父組件未向模板中分發內容（插入內容），則顯示插槽中默認內容（前提是slot中設置了默認內容）

意思是組件裏爲空， 好比 <alert></alert>
template （組件）渲染成html， 是渲染template 中默認內容


2,父組件給模板分發了內容，則分發的內容會替換slot標籤

意思是, 組件裏面中有東西, 會替換 slot 標籤中的內容，而模板中，不是slot的部分，不會被替換，還在
<alert>
    <div>組件插入內容</div>
</alert>


3, 除此以外，假設模板中未設置插槽，父組件依舊向其分發了內容，但最終任何分發的內容都不會顯示。

意思是，模板中沒插槽，template 沒slot, 父組件中仍然有 東西
組件向模板發的東西不會顯示


按照插的不一樣有幾種
1, slot 只有一處，只能往這一處插，不能往別地方插，不用名字
2, 命名插槽，slot 有多處，咱們經過slot的name來區分不一樣的 插槽內容，而後往裏面插東西
3, 做用域插槽，無論暫時用不到


這篇文章主要學習和了解了Vue中的插槽<slot>。
是一個空殼子，它顯示與否以及怎麼顯示徹底是由父組件來控制。不過，插槽顯示的位置由子組件自身決定，slot寫在組件template的哪塊，父組件傳過來的模板未來就顯示在哪塊  


```
<div id="app">
    <alert>
        <div slot="header">自定義頭部內容</div>
        <div slot="middle">自定義中部內容</div>
    </alert>
</div>

<template id="alert">
    <div>
        <p>我是測試用的alert模板內容</p>
         <slot name="header">模板頭部內容</slot>
         <slot name="middle">模板中部內容</slot>
    </div>
</template>

<script type="text/javascript">
    Vue.component('alert', {
        template: '#alert',
    })

    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            handle: function(num, e) {
                console.log(num, e);
                console.log(e.target);
                console.log(e.currentTarget);
            },
            handle2: function(e, num) {
                console.log(e, num);
            }
        }
    })
</script>
```