資訊專欄INFORMATION COLUMN
摘要：組件是最強大的功能之一。組件可以擴展元素，封裝可重用的代碼。驗證組件可以為指定驗證要求。以下實例中子組件已經和它外部完全解耦了。它所做的只是觸發一個父組件關心的內部事件。實例如果你想在某個組件的根元素上監聽一個原生事件。
組件（Component）是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素，封裝可重用的代碼。
組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹
注冊一個全局組語法格式如下：
Vue.component(tagName, options)
tagName 為組件名，options 為配置選項。注冊后，我們可以使用以下方式來調用組件：
全局組件
所有實例都能用全局組件。
全局組件實例
注冊一個簡單的全局組件 runoob，并使用它：
局部組件
我們也可以在實例選項中注冊局部組件，這樣組件只能在這個實例中使用：
局部組件實例
注冊一個簡單的局部組件 runoob，并使用它：
Prop
prop 是父組件用來傳遞數據的一個自定義屬性。
父組件的數據需要通過 props 把數據傳給子組件，子組件需要顯式地用 props 選項聲明 "prop"：
Prop 實例
動態 Prop
類似于用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 動態綁定 props 的值到父組件的數據中。每當父組件的數據變化時，該變化也會傳導給子組件：
Prop 實例
以下實例中將 v-bind 指令將 todo 傳到每一個重復的組件中：
Prop 實例
注意: prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。
Prop 驗證
組件可以為 props 指定驗證要求。
prop 是一個對象而不是字符串數組時，它包含驗證要求：
Vue.component("example", {
props: {
// 基礎類型檢測 （`null` 意思是任何類型都可以）
propA: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數字，有默認值
propD: {
type: Number,
default: 100
},
// 數組／對象的默認值應當由一個工廠函數返回
propE: {
type: Object,
default: function () {
return { message: "hello" }
}
},
// 自定義驗證函數
propF: {
validator: function (value) {
return value > 10
}
}
}
})
type 可以是下面原生構造器：
String Number Boolean Function Object Array
type 也可以是一個自定義構造器，使用 instanceof 檢測。
自定義事件
父組件是使用 props 傳遞數據給子組件，但如果子組件要把數據傳遞回去，就需要使用自定義事件！
我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現了事件接口(Events interface)，即：
使用 $on(eventName) 監聽事件 使用 $emit(eventName) 觸發事件
另外，父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。
以下實例中子組件已經和它外部完全解耦了。它所做的只是觸發一個父組件關心的內部事件。
實例
{{ total }}
如果你想在某個組件的根元素上監聽一個原生事件?？梢允褂?.native 修飾 v-on 。例如：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/23023.html
摘要：函數式編程我在網上看了很多關于的函數式編程的教程，不過我感覺很多不是照抄的或者就是故弄玄虛。函數式編程幾分鐘就完事兒了，簡單的讓人發指。函數式編程理解這么多就夠了，再實用就可以看源碼了。 JS函數式編程 我在網上看了很多關于javascript的函數式編程的教程，不過我感覺很多不是照抄的或者就是故弄玄虛。js發展到今天越來越往瑜伽圈的風氣發展了，拿腔拿調裝13不好好說話，好像你講的東...
摘要：寫一個正則表達式來測試變量中是否包含字符串。用函數給出不使用字符，但和等價的正則表達式。第十四課標志全局匹配標志第二個常用的標志是全局匹配標志，用字母表示。寫出一個正則表達式來檢驗合法性。非捕獲組的主要用途是給一個組賦予量詞。 TRY REGEX 是一個交互式的正則表達式學習項目項目地址：https://github.com/callumacra...在線地址：http://tryre...
閱讀 3409·2021-10-11 11:06
閱讀 2191·2019-08-29 11:10
閱讀 1952·2019-08-26 18:18
閱讀 3260·2019-08-26 13:34
閱讀 1565·2019-08-23 16:45
閱讀 1044·2019-08-23 16:29
閱讀 2804·2019-08-23 13:11
閱讀 3233·2019-08-23 12:58
