技術胖1-4季視訊複習— (讀文筆記第2期)

Vue · 發表 2019-02-15 18:23:19

摘要：輸入技術胖視訊1-4季總記不太住的模板的使用，template component 的註冊、傳值、父子元件 methods中的 $event nextTick 使用是在哪一步前，哪一步後？內建元件slot的使用 ...

輸入

技術胖視訊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季視訊複習— (讀文筆記第2期)

輸入

總記不太住的

輸出

程式碼

筆記

您可能也會喜歡…