## 開始 start ``` component 組成的，構成的 template 模版 methods 方法 watch 監聽，觀察 prop 維持，支持 ```   [TOC] ***** ## 全局注冊 Vue記得`V`需要大寫我們把需要的東西封裝進去就成了一個組件 template 是一個模版下面封裝了一個button ``` //這是一個全局組成組件 Vue.component('button-counter',{ data: function( ) { return{ count : 0 } }, template:'<button v-on:click = "count++">{{ count }} 個 </button>' }) ``` 我們可以通過new Vue 創建的Vue根實例把組件作為自定義元素來使用 因為組件是可復用的 Vue 實例，所以它們與`new Vue`接收相同的選項，例如`data`、`computed`、`watch`、`methods`以及生命周期鉤子等。僅有的例外是像`el`這樣根實例特有的選項。 ``` <div id='app'> <button-counter></button-counter> </div> new Vue({ el: '#app'}) 這里的el就是Element ``` 另一種注冊方法 通過全局API `Vue.extend ()` ***示例*** ``` // 注冊 var MyComponent = Vue.extend({ template: '<div>A custom component!</div>' }); // 注冊 Vue.component('my-component', MyComponent); var vm = new Vue({ el: '#example', data: { } }) ``` 用法：使用基礎 Vue 構造器，創建一個“子類”。參數是一個`包含組件選項的對象`。 `data`選項是特例，需要注意 - 在`Vue.extend()`中它必須是`函數`。 組件你可以復用任何次數不限，你每用一次組件，就會有一個它的新**實例**被創建 ## 局部注冊 類似于JavaScript的定義一個對象，不需要全局注冊，僅僅在其作用域中可用的組件 ``` var ComponentA = {自定義} var ComponentB = {自定義} //然后在`componets`中定義你需要用到的 new Vue({ el:'#app' componets:{ 'componets-a' = ComponetsA, 'componets-b' = ComponetsB } }) ``` 注意，**局部注冊的組件在子組件中*無法訪問***。 ## 模塊系統 模塊系統中的局部注冊方法在局部注冊這些組件之前，你需要預先導入每個需要用到的組件。例如，在假想的`ComponentB.js`或`ComponentB.vue`文件中： ``` import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... } ``` 現在A和C都能在B中應用了 ### ??data必須是一個函數 我們定義一個組件的時候`data`并不會直接提供一個對象給我們。因為他需要復用每使用一次就會創建一個新實例出來從而不會干擾到其他組件。每個實例可以維護一份被返回對象的獨立的拷貝 ``` data: function () { return { count: 0 } } ``` ### DOM 模板解析注意事項 像`<ul>、<ol>、<table>、<select>`這樣的元素里允許包含的元素有限制，而另一些像`<option>`這樣的元素只能出現在某些特定元素的內部。 例如： ~~~ table> <my-row>...</my-row> </table> ~~~ 自定義組件`<my-row>`會被當作無效的內容，因此會導致錯誤的渲染結果。變通的方案是使用特殊的`is`特性： ~~~ <table> <tr is="my-row"></tr> </table> ~~~ **應當注意，如果使用來自以下來源之一的字符串模板，則沒有這些限制：** * `<script type="text/x-template">` * `JavaScript`內聯模板字符串 * `.vue`組件 因此，請盡可能使用字符串模板。 ## Prop書寫規范   ## Prop向子組件傳遞數據 `Prop`使你可以在組件中注冊一些自定義特性當一個值傳入`Prop`時它就變成了那個組件實例的一個屬性，一個組件可以擁有任意數量的`Prop` ``` Vue.component('blog-post', { props: ['title'], template: '<p> {{ title }} </p>' }) <blog-post title></blog-post> ``` 假如 `data` 中有一個數組你想渲染每一個組件 ``` new Vue({ el: '#app', data:{ posts: { { id: 1, title: 'you' } { id: 2, title: 'he'} { id: 3, title: 'she'} } } }) //初體驗中有使用到過一次 <blog-post v-for = 'post in posts' v-bind:key = 'post.id' v-bind:title = 'post.title'> ... </blog-post> ``` 使用`v-bind`來做render是非常有用的 當組件越來越復雜時為每一個相關信息定義一個prop會變得很麻煩 ``` <blog-post v-bind:post = 'post'></blog-post> template:' <div class='blog-post'> <h3>{{ post.title }}</h3> <div v-html = 'post.content'></div> </div> ' ``` **每個組件必須只有一個根元素**你可以將模板的內容包裹在一個父元素內 ``` <div class ='blog-post'> <h3>{{ title }}</h3> <div v-html='content'></div> </div. ``` 這是wacth監聽事件以及computed的使用 原本跟著慕課網敲的但是報錯不知道為哈子他可以單括號輸出我就不行他`{ msg }` 我`{{ msg }}`；當你在`new Vue`外聲明變量時你里面調用如果只修改外面變量輸出內容是不會改變的；你需要觸發到`new Vue`里的this.msg才會進行改變 ``` <div id="app" > {{msg1}} </div> var arr = 'nice' var app = new Vue({ el:'#app', data:{ msg:'hellow' }, watch:{ msg:function(newval,oldval){ console.log('newval' + newval); console.log('oldval' + oldval); } }, computed:{ msg1:function(){ return this.msg + arr } } }) ``` watch通常只監聽一個事件，而computed是可以監聽多個的但是需要在`new Vue`里才能，外頭聲明的變量不會作出改變 ## 動態Prop ~~~ <div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div> ~~~ 你也可以使用 v-bind 的縮寫語法： ~~~ <child?:my-message="parentMsg"></child> ~~~ **`（重要）`**如果你想把一個`對象`的所有`屬性`作為 prop 進行傳遞，可以使用不帶任何參數的`v-bind`(即用 v-bind 而不是 v-bind:prop-name)。例如，已知一個`todo`對象： ~~~ todo: { text: 'Learn Vue', isComplete: false } ~~~ 然后： ~~~ <todo-item?v-bind="todo"></todo-item> ~~~ 將等價于： ~~~ <todo-item v-bind:text="todo.text" v-bind:is-complete="todo.isComplete" ></todo-item> ~~~ ## Prop類型 目前為止，我們只看到字符串數組形式展示的 props： `props: ['title', 'likes', 'isPublished', 'commentIds', 'author']` 通常，你會希望每個 prop 都對應指定類型的值。在這些場景中，你可以將 props 展示為對象，其中每個屬性的名稱和值，分別包含 prop 名稱和類型： ``` props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object } ``` ## Prop驗證 為了指定 prop 驗證，你需要將`props`的值定義為一個帶有驗證接收條件的對象，而不是一個由字符串構成的數組。例如： ``` Vue.component('my-component', { props: { // 基本類型(base type)的檢查（`null` 表示接受所有類型） propA: Number, // 多種可能的類型 propB: [String, Number], // 必須傳遞，且 String 類型 propC: { type: String, required: true }, // Number 類型，有一個默認值 propD: { type: Number, default: 100 }, // Object 類型，有一個默認值 propE: { type: Object, // Object/Array 類型， // 默認必須返回一個工廠函數 default: function () { return { message: 'hello' } } }, // 自定義驗證函數 propF: { validator: function (value) { // 值必須是這些字符串中的一個 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } }) ``` 當 prop 驗證失敗，（如果使用的是開發構建版本，）Vue 就會在控制臺拋出警告。