技術胖1-4季視訊複習— (讀文筆記第2期)
輸入
總記不太住的
- 模板的使用,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> ```