輸入

技術胖視頻1-4季

總記不太住的

模板的使用，template

component 的注冊、傳值、父子組件

methods中的 $event

nextTick 使用是在 哪一步前，哪一步后？

內置組件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> ``` 新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的技术胖1-4季视频复习— (看视频笔记)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。