技术胖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>
```