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

組件的使用，，，，，，，，，

todolist的刪除功能

在vue中，父組件向子組件傳值是通過屬性的形式進行值的傳遞

子組件數據的刪除，要從父組件里把渲染子組件的數據刪除，子組件才不會顯示

實現子組件和父組件的通信模式---發布訂閱模式

：index="index"? 循環的下標

props：["content","index"]? 意味著子組件可以從父組件接收到content和index下標兩個屬性

當子組件被點擊時，需要通知父組件對子組件數據進行刪除

this.$emit('delete', this.index) 觸發delete自定義事件

?$emit向外觸發了事件，子組件向外部進行了發布，

傳遞組件index的值，this.index獲取當前組件的下標值

父組件在模版創建子組件的時候監聽子組件向外觸發delete事件，

父組件監聽到子組件delete事件后，執行一個handleDelete函數

在父組件Vue實例methods中寫handleDelete方法，alert（‘delete’）

父組件可以接受到子組件傳過來的下標參數

將父組件里面list對應下標的內容刪除

this.list.splice(index,1) 刪除對應下標內容的一項

組件與實例

每一個vue的組件也是vue的一個實例

每一個vue項目都是由千千萬萬個vue實例組成

大的vue實例template=''模版為空，vue實例會對應一個根實例，找到掛載點root? ?el:"#root"

id="root"標簽下所有內容當做這個大vue實例模版使用

todolist組件拆分

Vue.component? //全局組件

template //模版

var TodoItem = {template:'<li>item</li>'}? //局部組件

<todo-item></todo-item>無法直接調用局部組件

需要在vue實例注冊定義一個components：{'todo-item'=TodoItem}

v-for循環局部組件?

對todo-item傳參? :content="item"

接受屬性：? ?props:['content']? ? 小組件接收外部傳來的叫content的屬性

todolist功能開發

input框輸入的內容點擊提交后，內容會顯示在ul的li標簽中

首先對input框內容進行處理 v-model="inputValue"

在vue實例里定義一個數據data 對象inputValue:' ' 雙向綁定

data定義一個空數組list[]

li標簽用v-for循環 li標簽的內容用插值表達式

在button上綁定點擊事件

定義handleclick函數

this.list.push(this.inputValue)往數組里面添加數據（數據是input框的內容）

輸入內容后希望input框回到清空狀態

this.inputValue= ' ' input框的值為空

v-if?

vue實例內定義一個數據show：true(默認值)

加進在顯示標簽<div v-if= "show">內

當show是true的時候 div的值才存在 為false的時候 div不在頁面上存在

對按鈕進行綁定<button@click="handleClick">toggle</button>

handleClick事件函數定義在methods方法內，this.show=！this.show（取反）

v-show（性能更佳 不會反復創建清除）

v-show="show"同樣也能做到上述效果；但是dom結構變化不同

當v-if對應數據項值是false的時候，會將整個<div>標簽移除

當v-show對應數據項值是false的時候，<div>標簽會被隱藏（display：none），而不會被清除

v-for

數據項內定義列表[]，在頁面上循環展示列表數據 展示在<ul>中

<li>標簽

<li v-for="item of list"? :key="">{{item}}</li>

循環list數據項 每次循環對應的循環項放到item變量 最后輸出item這個變量

使用v-for時加一個key屬性，提升渲染效率，key值要求每一項都不相同

<li v-for="(item,index) of list"? :key="">{{index}}</li>

如果頻繁對列表進行變更時不建議使用index作為key值

vue中的計算屬性和偵聽器

<input v-model="firstName"/>

<input v-model="lastName"/>兩個雙向數據綁定輸入框

<div>{{fullName}}</div>輸出文本 fullName是一個計算屬性

fullName變量是通過firstName和lastName計算而成的變量

計算屬性在vue實例配置對象里面寫入computed對象

在里面定義fullName：function(){} 對應的函數 返回 return this.firstName+' ' +this.lastName這個數據

好處：firstName和lastName這兩個值沒變化的時候，fullName會繼續采用之前的緩存值，至于當firstName和lastName其中一個值變化的時候fullName才會重新進行計算。

偵聽器

data內定義一個變量count：0（默認值）

當上述文本任一變化時，計算屬性重新計算后，count值會+1

在vue實例內定義一個偵聽器watch

首先，監聽firstName的變化：若firstName發生改變，那么this.count ++? ?count的值+1

同時，監聽lastName的變化：若lastName發生改變，那么this.count ++???count的值+1

更簡便的監聽方法是直接監聽fullName

屬性綁定和雙向數據綁定

title="內容"? HTML的屬性? 當鼠標放在頁面時會出現的提示語

希望提示語可變 不是固定的

那就將title寫在vue實例中

屬性綁定：v-bind:title="title"? ?數據項的title和上面屬性title進行數據綁定

""引號內的內容不再是字符串，而是一個表達式

在編碼時冒號(:)一般表示v-bind： 所以 編碼簡寫成:title

雙向數據綁定

<input? :value="content"/> 改變的是input框內的值 content值沒有發生改變

<input? v-model="content"/>? input框值變化的時候 數據也變化 content值也變化

1.引入vue.js寫在<script></script>內

<script src="./vue.js"></script>

2.模版寫在掛載點內，vue實例內

3.數據、事件、方法

{{ }}插值表達式

v-text="" 輸出轉譯的標簽 <h1>hello</h1>

v-html=""輸出未轉譯的標簽 hello

給標簽綁定事件 事件監聽 用于監聽DOM事件 v-on 簡寫符號是@

點擊事件? v-on:click="handleclick函數"? ? ?一般用@click

函數在methods方法中定義

在vue里對數據改變 可以不改變dom 改變實例的數據

點擊函數改變? ?頁面也改變this.content = ""

每一個vue的組件都是一個vue的實例<==>每一個vue實例都是一個vue組件

在一個vue項目中 都有多個vue實例組成

每一個實例包含自己的props、data、template、methods等

一般每個vue實例都有一個自己的模板 template，對于一個根實例 如果沒有，就會去找掛載點。

舉例子：

會把root下的所有Dom標簽當做模板

偵聽器指的是 監控某個數據/計算屬性是否發生變化 一旦發生變化 就可以在偵聽器里面寫一些業務邏輯。

computed 計算屬性

一個屬性由另一個屬性計算而來 如果fistName和lastName都沒改變 會利用緩存值。

只有其中一個發生改變 才會重新計算 然后改變。

注冊自定義組件 Vue.component(' xx-xxx', {

? template: '<li></li>'

})?

實現功能：?在 input 框里輸入信息，放進下方的列表項

原理： 每次輸入的信息放進 data 數組，利用數據雙向綁定

在 <li v-for="item">{{item}}</li>? 里進行渲染

v-if 和 v-show 的異同

都能實現顯示隱藏的切換

區別 v-if? 會將標簽從 dom 樹里移除 （銷毀dom 重新創建），而 v-show不會（只修改display）

計算屬性{{xx}}

computed: {

? ? xx : function() {

? ? ? ?return this.x1 + ' '? + this.x2

? ? }

}

-----------------------------------

偵聽器 x1的值改變時觸發

watch: {

? ?x1: function(){

? ? ? this.count++

? }

}

v-text , v-html 類似于{{}}

v- 可以簡寫為 @，v-click 就是 @click

什么是掛載點：

即? new Vue({ el:"#xxx"})? 對應標簽的標簽 id="xxx"，vue 只會去處理掛載點內部的內容

html 模板寫在掛載點內，也可以寫在 template 屬性里：

即 new Vue({ template:'<xx>x...<xx>'})?

Vue2 安裝

保存到文件夾中命名vue.js

https://v2.cn.vuejs.org/v2/guide/installation.html

在head部分新建script標簽引入vue.js庫 （不在body中引入是為了防止抖屏）

上面的div標簽稱為vue實例的掛載點

El指的是Vue實例與哪一個節點綁定

局部組件調用需要做一個聲明

通過vue.component定義的組件稱為全局組件

實現V-bind數據項的綁定

掛載點：

? ? ? vue實例的里面el屬性對應的id節點，vue只會處理掛載點里面的內容

模版：

? ? ? ? 指掛載點里面的內容

寫法：

1)：寫在掛載點里面

2)：使用template屬性寫在vue的實例里面

掛載點，模版，實例之間的關系：

? ? ? ?在vue的實例里面指定一個掛載點，然后寫上模版，vue就會自動結合

模版和數據生成最終想展示的內容并放在掛載點里面