第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

todolist的刪除功能

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

子組件數(shù)據(jù)的刪除，要從父組件里把渲染子組件的數(shù)據(jù)刪除，子組件才不會(huì)顯示

實(shí)現(xiàn)子組件和父組件的通信模式---發(fā)布訂閱模式

：index="index"? 循環(huán)的下標(biāo)

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

當(dāng)子組件被點(diǎn)擊時(shí)，需要通知父組件對(duì)子組件數(shù)據(jù)進(jìn)行刪除

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

?$emit向外觸發(fā)了事件，子組件向外部進(jìn)行了發(fā)布，

傳遞組件index的值，this.index獲取當(dāng)前組件的下標(biāo)值

父組件在模版創(chuàng)建子組件的時(shí)候監(jiān)聽子組件向外觸發(fā)delete事件，

父組件監(jiān)聽到子組件delete事件后，執(zhí)行一個(gè)handleDelete函數(shù)

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

父組件可以接受到子組件傳過來的下標(biāo)參數(shù)

將父組件里面list對(duì)應(yīng)下標(biāo)的內(nèi)容刪除

this.list.splice(index,1) 刪除對(duì)應(yīng)下標(biāo)內(nèi)容的一項(xiàng)

組件與實(shí)例

每一個(gè)vue的組件也是vue的一個(gè)實(shí)例

每一個(gè)vue項(xiàng)目都是由千千萬萬個(gè)vue實(shí)例組成

大的vue實(shí)例template=''模版為空，vue實(shí)例會(huì)對(duì)應(yīng)一個(gè)根實(shí)例，找到掛載點(diǎn)root? ?el:"#root"

id="root"標(biāo)簽下所有內(nèi)容當(dāng)做這個(gè)大vue實(shí)例模版使用

todolist組件拆分

Vue.component? //全局組件

template //模版

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

<todo-item></todo-item>無法直接調(diào)用局部組件

需要在vue實(shí)例注冊(cè)定義一個(gè)components：{'todo-item'=TodoItem}

v-for循環(huán)局部組件?

對(duì)todo-item傳參? :content="item"

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

todolist功能開發(fā)

input框輸入的內(nèi)容點(diǎn)擊提交后，內(nèi)容會(huì)顯示在ul的li標(biāo)簽中

首先對(duì)input框內(nèi)容進(jìn)行處理 v-model="inputValue"

在vue實(shí)例里定義一個(gè)數(shù)據(jù)data 對(duì)象inputValue:' ' 雙向綁定

data定義一個(gè)空數(shù)組list[]

li標(biāo)簽用v-for循環(huán) li標(biāo)簽的內(nèi)容用插值表達(dá)式

在button上綁定點(diǎn)擊事件

定義handleclick函數(shù)

this.list.push(this.inputValue)往數(shù)組里面添加數(shù)據(jù)（數(shù)據(jù)是input框的內(nèi)容）

輸入內(nèi)容后希望input框回到清空狀態(tài)

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

v-if?

vue實(shí)例內(nèi)定義一個(gè)數(shù)據(jù)show：true(默認(rèn)值)

加進(jìn)在顯示標(biāo)簽<div v-if= "show">內(nèi)

當(dāng)show是true的時(shí)候 div的值才存在 為false的時(shí)候 div不在頁面上存在

對(duì)按鈕進(jìn)行綁定<button@click="handleClick">toggle</button>

handleClick事件函數(shù)定義在methods方法內(nèi)，this.show=！this.show（取反）

v-show（性能更佳 不會(huì)反復(fù)創(chuàng)建清除）

v-show="show"同樣也能做到上述效果；但是dom結(jié)構(gòu)變化不同

當(dāng)v-if對(duì)應(yīng)數(shù)據(jù)項(xiàng)值是false的時(shí)候，會(huì)將整個(gè)<div>標(biāo)簽移除

當(dāng)v-show對(duì)應(yīng)數(shù)據(jù)項(xiàng)值是false的時(shí)候，<div>標(biāo)簽會(huì)被隱藏（display：none），而不會(huì)被清除

v-for

數(shù)據(jù)項(xiàng)內(nèi)定義列表[]，在頁面上循環(huán)展示列表數(shù)據(jù) 展示在<ul>中

<li>標(biāo)簽

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

循環(huán)list數(shù)據(jù)項(xiàng) 每次循環(huán)對(duì)應(yīng)的循環(huán)項(xiàng)放到item變量 最后輸出item這個(gè)變量

使用v-for時(shí)加一個(gè)key屬性，提升渲染效率，key值要求每一項(xiàng)都不相同

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

如果頻繁對(duì)列表進(jìn)行變更時(shí)不建議使用index作為key值

vue中的計(jì)算屬性和偵聽器

<input v-model="firstName"/>

<input v-model="lastName"/>兩個(gè)雙向數(shù)據(jù)綁定輸入框

<div>{{fullName}}</div>輸出文本 fullName是一個(gè)計(jì)算屬性

fullName變量是通過firstName和lastName計(jì)算而成的變量

計(jì)算屬性在vue實(shí)例配置對(duì)象里面寫入computed對(duì)象

在里面定義fullName：function(){} 對(duì)應(yīng)的函數(shù) 返回 return this.firstName+' ' +this.lastName這個(gè)數(shù)據(jù)

好處：firstName和lastName這兩個(gè)值沒變化的時(shí)候，fullName會(huì)繼續(xù)采用之前的緩存值，至于當(dāng)firstName和lastName其中一個(gè)值變化的時(shí)候fullName才會(huì)重新進(jìn)行計(jì)算。

偵聽器

data內(nèi)定義一個(gè)變量count：0（默認(rèn)值）

當(dāng)上述文本任一變化時(shí)，計(jì)算屬性重新計(jì)算后，count值會(huì)+1

在vue實(shí)例內(nèi)定義一個(gè)偵聽器watch

首先，監(jiān)聽firstName的變化：若firstName發(fā)生改變，那么this.count ++? ?count的值+1

同時(shí)，監(jiān)聽lastName的變化：若lastName發(fā)生改變，那么this.count ++???count的值+1

更簡便的監(jiān)聽方法是直接監(jiān)聽fullName

屬性綁定和雙向數(shù)據(jù)綁定

title="內(nèi)容"? HTML的屬性? 當(dāng)鼠標(biāo)放在頁面時(shí)會(huì)出現(xiàn)的提示語

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

那就將title寫在vue實(shí)例中

屬性綁定：v-bind:title="title"? ?數(shù)據(jù)項(xiàng)的title和上面屬性title進(jìn)行數(shù)據(jù)綁定

""引號(hào)內(nèi)的內(nèi)容不再是字符串，而是一個(gè)表達(dá)式

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

雙向數(shù)據(jù)綁定

<input? :value="content"/> 改變的是input框內(nèi)的值 content值沒有發(fā)生改變

<input? v-model="content"/>? input框值變化的時(shí)候 數(shù)據(jù)也變化 content值也變化

1.引入vue.js寫在<script></script>內(nèi)

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

2.模版寫在掛載點(diǎn)內(nèi)，vue實(shí)例內(nèi)

3.數(shù)據(jù)、事件、方法

{{ }}插值表達(dá)式

v-text="" 輸出轉(zhuǎn)譯的標(biāo)簽 <h1>hello</h1>

v-html=""輸出未轉(zhuǎn)譯的標(biāo)簽 hello

給標(biāo)簽綁定事件 事件監(jiān)聽 用于監(jiān)聽DOM事件 v-on 簡寫符號(hào)是@

點(diǎn)擊事件? v-on:click="handleclick函數(shù)"? ? ?一般用@click

函數(shù)在methods方法中定義

在vue里對(duì)數(shù)據(jù)改變 可以不改變dom 改變實(shí)例的數(shù)據(jù)

點(diǎn)擊函數(shù)改變? ?頁面也改變this.content = ""

每一個(gè)vue的組件都是一個(gè)vue的實(shí)例<==>每一個(gè)vue實(shí)例都是一個(gè)vue組件

在一個(gè)vue項(xiàng)目中 都有多個(gè)vue實(shí)例組成

每一個(gè)實(shí)例包含自己的props、data、template、methods等

一般每個(gè)vue實(shí)例都有一個(gè)自己的模板 template，對(duì)于一個(gè)根實(shí)例 如果沒有，就會(huì)去找掛載點(diǎn)。

舉例子：

會(huì)把root下的所有Dom標(biāo)簽當(dāng)做模板

偵聽器指的是 監(jiān)控某個(gè)數(shù)據(jù)/計(jì)算屬性是否發(fā)生變化 一旦發(fā)生變化 就可以在偵聽器里面寫一些業(yè)務(wù)邏輯。

computed 計(jì)算屬性

一個(gè)屬性由另一個(gè)屬性計(jì)算而來 如果fistName和lastName都沒改變 會(huì)利用緩存值。

只有其中一個(gè)發(fā)生改變 才會(huì)重新計(jì)算 然后改變。

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

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

})?

實(shí)現(xiàn)功能：?在 input 框里輸入信息，放進(jìn)下方的列表項(xiàng)

原理： 每次輸入的信息放進(jìn) data 數(shù)組，利用數(shù)據(jù)雙向綁定

在 <li v-for="item">{{item}}</li>? 里進(jìn)行渲染

v-if 和 v-show 的異同

都能實(shí)現(xiàn)顯示隱藏的切換

區(qū)別 v-if? 會(huì)將標(biāo)簽從 dom 樹里移除 （銷毀dom 重新創(chuàng)建），而 v-show不會(huì)（只修改display）

計(jì)算屬性{{xx}}

computed: {

? ? xx : function() {

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

? ? }

}

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

偵聽器 x1的值改變時(shí)觸發(fā)

watch: {

? ?x1: function(){

? ? ? this.count++

? }

}

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

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

什么是掛載點(diǎn)：

即? new Vue({ el:"#xxx"})? 對(duì)應(yīng)標(biāo)簽的標(biāo)簽 id="xxx"，vue 只會(huì)去處理掛載點(diǎn)內(nèi)部的內(nèi)容

html 模板寫在掛載點(diǎn)內(nèi)，也可以寫在 template 屬性里：

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

Vue2 安裝

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

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

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

上面的div標(biāo)簽稱為vue實(shí)例的掛載點(diǎn)

El指的是Vue實(shí)例與哪一個(gè)節(jié)點(diǎn)綁定

局部組件調(diào)用需要做一個(gè)聲明

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

實(shí)現(xiàn)V-bind數(shù)據(jù)項(xiàng)的綁定

掛載點(diǎn)：

? ? ? vue實(shí)例的里面el屬性對(duì)應(yīng)的id節(jié)點(diǎn)，vue只會(huì)處理掛載點(diǎn)里面的內(nèi)容

模版：

? ? ? ? 指掛載點(diǎn)里面的內(nèi)容

寫法：

1)：寫在掛載點(diǎn)里面

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

掛載點(diǎn)，模版，實(shí)例之間的關(guān)系：

? ? ? ?在vue的實(shí)例里面指定一個(gè)掛載點(diǎn)，然后寫上模版，vue就會(huì)自動(dòng)結(jié)合

模版和數(shù)據(jù)生成最終想展示的內(nèi)容并放在掛載點(diǎn)里面