亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

組件與實例的關系：

每一個組件其實都是一個Vue實例，所以，在Vue實例里面的方法屬性在組件里面同樣可以書寫并使用。

組件拆分toodlist案例組件：

概念：頁面上的某一大部分，將此大部分拆為多個小部分。?

【下端開始，模擬todsolist案例的拆分組件化分析】-拆分

組件定義(全局組件)：Vue.component('組件名'，{ 內部})。

1.1在組件內部的 template屬性中寫：組件的模板。

1.2在模板標簽內用屬性綁定可以傳值，在組件內部的props屬性內接受傳值(可以為數組方式)

? ?2.組件定義(局部組件)：var name={內部}

調用，局部組件使用，需要在：掛載點的模板Vue實例里面的components屬性里面聲明，組件的模板：組件名稱。

運用數據綁定 v-model，事件 @click，循環指令 v-for，三個結合使用。

1. 實例中的數據：將數據顯示在模板上

   1.1：{{插值表達式}}

   1.2：v-text指令：后面跟顯示內容（會將標簽內容轉義）

   1.3：v-html指令：后面跟顯示內容（不會將標簽內容轉義）

   
   

2. 事件：v-on:事件類型，在Vue實例里面的methods里面寫事件處理函數

   【注意：v-on:可以簡寫為@】

3. 方法：

   在Vue實例里面的methods屬性里面寫事件處理方法的函數

   
   

1. v-if指令（控制存在與否）

2. v-show指令（控制顯示與否）

   上訴兩個指令一樣即v-if="屬性名"或v-show="屬性名"，在dom元素內設定，都是通過對事件的判斷，根據true或者false來展示或者隱藏目標。

區別在于，v-if是將dom元素徹底移除再添加，v-show是給元素設置行內的display樣式隱藏了元素。

? ? ? 3.v-for指令? （循環）

v-for="屬性/ (itme.index)? of或in? 對應的實例內屬性名" :key="index"。這里面的屬性有多個值且都是必填，第一個表示循環的每個值，第二個表示循環當前值的索引，of或者in都可以，list與Vue實例里面一致。后面:key="屬性"是可選參數【前面括號里面的index和后面的:key都是為了解決循環數據有重復的問題，所以一般時可以省略】

1. 計算屬性computed：在Vue實例里面的computed屬性內，用屬性名：一個函數來實現兩個屬性的計算，【注意兩個屬性是this.屬性名，并用return返回。另外這樣的數據返回顯示不會重新計算，除非this.屬性的值改變了】

   

2. 偵聽器watch：??在Vue實例里面的watch屬性里，用被監聽屬性名：一個函數，在函數內用this.屬性名，進行操作達到偵聽目的。

   
   

1.屬性綁定：v-bind:建立綁定關系，之后在實例data里面賦值。此時標簽里面的title就是字符串模式，所以可以拼接。

《注意：v-bind:可以縮寫為:》

2.雙向數據綁定v-model：如圖對應的conts顯示值已經綁定

1.掛載點：這個標簽的id與Vue實例里面el屬性對應的id一致，我們稱這個標簽為掛載點。（Vue實例只會處理掛載點里面的內容）

2.模板：掛載點里面的所有標簽/屬性的內容我們稱為模板，（但是模板不光能寫在掛載點里面，也可以寫在Vue實例里面的template屬性里面。）

3.實例：指定了掛載點，里面有模板，就是創建了一個實例。

1. 通過id名來綁定，Vue實例與虛擬DOM之間的聯系。

2. Vue實例內存在兩個重要的屬性，el 和 data.? el:指定綁定的id名。data具體的綁定事件，例如頁面顯示，渲染樣式等...
   

父組件向子組件傳值是通過屬性的形式傳遞的。

子組件想要刪除 一定是在父組件里面刪除 子組件向父組件通信 發布訂閱的模式；

?每一個組件都是一個實例 一個項目是千千萬萬個實例組成

每一個實例都有一個模板 如果沒有模板會用掛載點當做模板

組件是可以傳遞參數的

? ?

這個時候 頁面存在 如果是false? 那么 show內容就是空了；

這樣就實現了 點擊顯示 點擊不顯示；

show ：設置css為none；v-if 是刪除網頁的dom；

循環展示數據 v-for

使用索引（也不是最好的選擇，存在問題）：

compted :計算（一個屬性通過其他屬性計算出來的）計算性能比較高 依賴的數據沒有變化時候 使用緩存 如果變化了會使用變化的；

偵聽器：計算輸入的字符個數

或者針對fullname進行監聽也是可以的；

? ?

<div?id="root">
????姓:<input?v-model="firstName"/>
????名:<input?v-model="lastName"/>
????<div>{{fullName}}</div>??????????//計算
????<div>{{count}}</div>????????????//偵聽改變
</div>

<script>
????new?Vue()({
????????el:"#root",?
????????data:{
????????????firstName:'',
????????????lastName:'',
????????????count:0
????????},
????????computed:{????????????????????//計算屬性
????????????fullName:function(){
????????????????return?this.firstName?+?'?'?+?this.lastName
????????????}
????????},
????????watch:{????????????????????//偵聽器
????????????fullName:function(){
????????????????this.count?++
????????????}
????????}
????})
</script>