Vue課程學習筆記 day06

2021-10-07 08:06:35 字數 2227 閱讀 5023

0、課調

1) 切屏速度較快

2) 知識點的過渡

3) 上課互動

4) 全域性作用域、區域性作用域、塊級作用域

全域性作用域(全域性變數):宣告在函式外部的變數,在其他任意地方都可以呼叫

不使用關鍵字var

區域性作用域(區域性變數):宣告在函式內部的變數,一般只有在函式內部訪問到

塊級作用域:在es6中,使用let、const宣告在{}內部的變數,只能在{}內訪問

function sayname()

if()

5) 看點諮詢精選

搜尋(日期選擇器)

刪除1、高階元件

1) 基本元件

1. 元件註冊

vue.component('xpf-div',

},props:['title']

})2. 元件的呼叫

理解:元件的定義實際上可以理解為函式的定義,元件的呼叫類似於函式的呼叫

函式呼叫的時候可以傳遞引數,元件可以使用屬性進行傳遞

注意:在呼叫xpf-alert元件的時候,傳遞乙個引數visible,值是乙個字串的false

在呼叫xpf-alert元件的時候,傳遞乙個引數visible,值是乙個布林值的false

在呼叫xpf-alert元件的時候,傳遞乙個引數visible,值是乙個數字的1

在呼叫xpf-alert元件的時候,傳遞乙個引數visible,值是乙個物件

在呼叫xpf-alert元件的時候,傳遞乙個引數visible,值是乙個陣列

2) 元件引數的型別宣告

如果期望接受的引數擁有指定的資料型別,可以通過物件的形式列出props中的屬性

props:

1. 元件的註冊

xpf-alert

template:`

hello vue}`,

props:

1、引數的宣告

props:

2、引數驗證

對於子元件(註冊的元件)呼叫時,引數是否必須傳遞,以及引數的資料型別,可以設定

props:,

// 期望接收到的visible是乙個布林型別

visible:boolean

}2. 元件的呼叫

錯誤**:

正確**:

由於true/false是關鍵字,會被瀏覽器解析為布林型別的值,所以可以通過v-bind直接繫結

`,methods:

},props:

})正確**一:(將props的變數放入data中)

vue.component('xpf-alert',}  --- }

更改title

`,methods:

},data()

},props:

})正確**二:(將props的變數放入computed中)

參考:3-單向資料流.html

案例:4) 自定義事件

父元件        <---      子元件

@***=''                 this.$emit('***')     

父元件通過@***=''監聽

子元件通過this.$emit('***'),通知父元件進行變數的修改

參考:4-案例.html

5) 插槽

子元件通過slot接收父元件傳遞過來的子模版(標籤)

1. 預設插槽

1、元件的定義

vue.component('xpf-alert',}

`,props:['title']

})2、元件的呼叫

注意:1. 瀏覽器在解析的時候,會將slot替換為h1標籤

警告 --> title

h1   -->  slot

2. 沒有包含乙個 元素,則該元件起始標籤和結束標籤之間的任何內容都會被拋棄

2. 具名插槽

在使用多個插槽,並且希望它們的位置不同時,可以使用具名插槽

1、元件的定義

vue.component('xpf-alert',}

`,props:['title']

})2、元件的呼叫刪除

注意:1. template內部的所有標籤都會被傳入相對應的插槽內部

2. v-slot只能繫結在template上

報錯:v-slot can only be used on components or

3. 沒有使用v-slot的template,其內部的所有內容會被傳入到預設插槽內

3. 作用域插槽

mysql 學習筆記 day06

檢視操作 create alter view name as select column name from table name 事物操作 原子性 一致性隔離性 永續性 create table class id int primary key auto increment,cz money de...

Vue基本語法day06

一.通訊機制 1.父傳子 1.1 通過屬性,父元件將資料傳遞給子元件 msg pmsg 1.2 子元件通過 props 配置項,指定一下要接收的資料 props msg 2.子傳父 2.1 父元件準備乙個方法 methods 2.2 通過自定義事件,將方法傳遞給子元件 子元件接收一下 fn pfn ...

前端學習 Day06

用標籤名作為選擇器,選中所有相應的元素 根據class的屬性來選擇元素,樣式定義為 classname 根據id名來選擇元素,樣式定義為 idname 選擇器 描述 attribute 選取帶有指定屬性的元素。12456 attribute value 選取帶有指定屬性和值的元素。6 attribu...