输入技术胖视频1-4季总记不太住的模板的使用，templatecomponent 的注册、传值、父子组件methods中的 $eventnextTick 使用是在 哪一步前，哪一步后？内置组件slot的使用输出代码代码收录在GitHub, 2 34文件夹下面，本文代码笔记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中写的，不常用，不管它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> } }}$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>