久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長(zhǎng)資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      Vue.js 學(xué)習(xí)之二:數(shù)據(jù)驅(qū)動(dòng)開(kāi)發(fā)

      Vue.js教程欄目介紹Vue.js學(xué)習(xí)之二的數(shù)據(jù)驅(qū)動(dòng)開(kāi)發(fā) 。

      Vue.js 學(xué)習(xí)之二:數(shù)據(jù)驅(qū)動(dòng)開(kāi)發(fā)

      在 Vue.js 框架中,與 HTML 頁(yè)面元素的交互方式?jīng)]有像原生 JavaScript 接口那么直接,它是通過(guò)先在 HTML 元素標(biāo)簽中嵌入一系列類(lèi)似于普通標(biāo)簽屬性的 Vue 指令屬性來(lái)綁定數(shù)據(jù),然后再通過(guò)在 JavaScript 代碼中修改這些被綁定的數(shù)據(jù)來(lái)修改頁(yè)面元素的顯示方式與內(nèi)容。在編程方法上,我們通常將這種用數(shù)據(jù)內(nèi)容的變化來(lái)驅(qū)動(dòng)整個(gè)程序業(yè)務(wù)運(yùn)作的方式稱(chēng)之為"數(shù)據(jù)驅(qū)動(dòng)開(kāi)發(fā)"。這部分筆記將記錄如何利用數(shù)據(jù)驅(qū)動(dòng)的開(kāi)發(fā)方式來(lái)完成數(shù)據(jù)綁定、事件響應(yīng),以實(shí)現(xiàn)控制頁(yè)面元素與 CSS 樣式等各項(xiàng)基本功能。

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

      在之前的01_sayHello程序中,我們現(xiàn)在<h1>標(biāo)簽中使用模版語(yǔ)法綁定了一個(gè)名稱(chēng)為sayHello的數(shù)據(jù),該模版語(yǔ)法實(shí)際上是v-text指令的語(yǔ)法糖。換句話(huà)說(shuō),該<h1>標(biāo)簽更規(guī)范的語(yǔ)法應(yīng)該是:

      <h1 v-text="sayHello"></h1>

      考慮到我們傳統(tǒng)上編寫(xiě) HTML 標(biāo)簽的習(xí)慣,使用{{ data_name }}這樣的模版標(biāo)記會(huì)是更讓人舒服的做法。當(dāng)然了,v-text指令設(shè)置的是當(dāng)前元素標(biāo)簽下面的文本內(nèi)容,如果要為標(biāo)簽本身的屬性綁定數(shù)據(jù),就得要使用v-bind指令,具體語(yǔ)法是在要設(shè)置的標(biāo)簽屬性名前面加上v-bind:前綴。例如,如果想為<img>標(biāo)簽的src屬性綁定數(shù)據(jù),就可以這樣做:

      <img v-bind:src="vueLogo" style="width:200px">

      另外,v-bind指令還有一個(gè)簡(jiǎn)寫(xiě)形式,只需要在要綁定數(shù)據(jù)的標(biāo)簽屬性名之前加一個(gè):前綴即可。在之前的01_sayHello程序中,我采用的就是這種形式。在頁(yè)面元素上綁定了數(shù)據(jù)之后,接下來(lái)就可以在相對(duì)應(yīng)的 JavaScript 腳本中創(chuàng)建 Vue 實(shí)例了,這就是我之前在01_sayHello程序的main.js文件中編寫(xiě)的內(nèi)容。這個(gè) Vue 實(shí)例對(duì)象中至少要定義以下兩個(gè)成員:

      • el成員:該成員用于設(shè)置當(dāng)前 Vue 實(shí)例所對(duì)應(yīng)的元素容器,這通常是一個(gè)<p>元素,某些情況也可以是 HTML5 提供的<header><footer>等容器類(lèi)標(biāo)簽。該成員的值可以是任何一個(gè)符合 CSS 選擇器語(yǔ)法的字符串,例如#ID.CLASSNAME等。
      • data成員:該成員用于設(shè)置頁(yè)面元素中綁定的數(shù)據(jù),它的值本身也是一個(gè) JSON 格式的對(duì)象,該對(duì)象的每個(gè)成員都對(duì)應(yīng)一個(gè)頁(yè)面元素中綁定的對(duì)象,例如在之前的01_sayHello程序中,我綁定了sayHellovueLogo這兩個(gè)數(shù)據(jù),就必須要在 Vue 對(duì)象的data成員中為為它們?cè)O(shè)置相應(yīng)的值。

      事件處理

      當(dāng)然,01_sayHello程序目前只是一個(gè)單向顯示數(shù)據(jù)的業(yè)務(wù)。如果想要讓其具備交互能力,還需要為頁(yè)面元素綁定事件。在 Vue.js 框架中,綁定事件首先要通過(guò)v-on指令來(lái)為目標(biāo)元素標(biāo)簽注冊(cè)事件處理函數(shù),例如如果我們想在01_sayHello程序用一個(gè)按鈕來(lái)控制<img>元素的顯示與否,可以將該程序的index.htm代碼修改如下:

      <!DOCTYPE html> <html lang="zh-cn"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <script defer="defer" src="../node_modules/vue/dist/vue.js"></script>     <script defer="defer" src="js/main.js"></script>     <title>你好,Vue.js</title> </head> <body>     <p id="app">         <h1> {{ sayHello }} </h1>         <!-- 上述模版語(yǔ)法背后真正的 Vue 語(yǔ)法:         <h1 v-text="sayHello"></h1>         -->         <img :src="vueLogo" v-show="isShow" style="width:200px">         <!-- 上述簡(jiǎn)寫(xiě)指令的完整 Vue 語(yǔ)法:         <img v-bind:src="vueLogo" style="width:200px">         -->         <input type="button" :value="isShow?'隱藏':'顯示'" @click="toggleShow" />         <!-- 上述簡(jiǎn)寫(xiě)指令的完整 Vue 語(yǔ)法:         <input type="button" v-bind:value="isShow?'隱藏':'顯示'" v-on:click="toggleShow" />         -->     </p> </body> </html>

      在這里,我主要做了如下修改:

      • 首先,在<img>標(biāo)簽中增加了一個(gè)v-show指令,該指令可用于綁定一個(gè)布爾類(lèi)型的數(shù)據(jù)(即這里的isShow),以此來(lái)決定是否顯示其所在的標(biāo)簽。
      • 然后,在頁(yè)面中新增了一個(gè)按鈕標(biāo)簽,并用v-bind指令設(shè)置了該標(biāo)簽的value屬性,該屬性的值是一個(gè)條件表達(dá)式,它將根據(jù)isShow的值顯示不同的文本。
      • 最后,用v-on指令(@是該指令v-on:前綴的簡(jiǎn)寫(xiě)形式)為新增的按鈕標(biāo)簽注冊(cè)了一個(gè)名為toggleShow的單擊事件處理函數(shù)。

      下面繼續(xù)來(lái)對(duì)main.js中的代碼進(jìn)行修改,具體如下:

      const app = new Vue({     el: '#app',     data:{         sayHello: '你好,Vue.js!',         vueLogo: 'img/logo.png',         isShow: true     },     methods:{         toggleShow: function() {             this.isShow = !this.isShow;         }     } });

      在這里,我主要做了如下修改:

      • 首先,在 Vue 對(duì)象的data成員中定義了之前綁定的布爾類(lèi)型數(shù)據(jù)isShow,并將其默認(rèn)值設(shè)置為 true。
      • 然后,為 Vue 對(duì)象新增了一個(gè)名為methods的成員。該成員用于設(shè)置頁(yè)面元素中注冊(cè)的事件處理函數(shù),它的值也是一個(gè) JSON 格式的對(duì)象。該對(duì)象的每個(gè)成員都對(duì)應(yīng)一個(gè)已在頁(yè)面元素中用v-on指令注冊(cè)的事件處理函數(shù)。在這里就是toggleShow,該函數(shù)每次調(diào)用都會(huì)將isShow的值取反。

      這樣一來(lái),當(dāng)我們?cè)?Web 瀏覽器中打開(kāi)該應(yīng)用程序就會(huì)看到之前的 Vue 圖標(biāo)旁邊多了個(gè)文本內(nèi)容為隱藏的按鈕。當(dāng)按鈕被單擊之后,圖標(biāo)就會(huì)消失,按鈕上的文本也變成顯示。之后,如果該按鈕再次被單擊,一切又會(huì)恢復(fù)原狀。

      用戶(hù)輸入

      對(duì)于用戶(hù)來(lái)說(shuō),除了觸發(fā)事件之外,允許用戶(hù)在運(yùn)行時(shí)輸入具體的數(shù)據(jù)也是一個(gè)應(yīng)用程序必不可少的一項(xiàng)功能。下面將通過(guò)編寫(xiě)一個(gè)"待辦事項(xiàng)"的程序來(lái)學(xué)習(xí)如何使用 Vue.js 框架實(shí)現(xiàn)能處理用戶(hù)輸入數(shù)據(jù)的應(yīng)用程序界面。為此,我需要在code目錄下創(chuàng)建一個(gè)名為02_toDoList的目錄,并在該目錄中創(chuàng)建一個(gè)名為index.htm的文件,其代碼如下:

      <!DOCTYPE html> <html lang="zh-cn"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <script defer="defer" src="../node_modules/vue/dist/vue.js"></script>     <script defer="defer" src="js/main.js"></script>     <title>待辦事項(xiàng)</title> </head> <body>     <p id="app">         <h1>待辦事項(xiàng)</h1>         <p id="todo">             <ul>                 <li v-for="( task,index ) in taskList">                     <input type="checkbox" v-model="doneList" :value="task">                     <label :for="task">{{ task }}</label>                     <input type="button" value="刪除" @click="remove(index)">                 </li>             </ul>         </p>         <p id="done" v-if="doneList.length > 0">             <h2>已完成事項(xiàng)</h2>             <ul>                 <li v-for="task in doneList">                     <label :for="task">{{ task }}</label>                 </li>             </ul>         </p>         <input type="text" v-model="newTask" @keyup.enter="addNew">         <input type="button" value="添加新任務(wù)" @click="addNew">     </p> </body> </html>

      接下來(lái),我會(huì)在同一目錄下再創(chuàng)建一個(gè)名為js的目錄,并在該目錄下創(chuàng)建main.js腳本文件,其代碼如下:

      // 程序名稱(chēng): toDoList // 實(shí)現(xiàn)目標(biāo): //   1. 學(xué)習(xí) v-model、v-for 等指令 //   2. 掌握如何處理用戶(hù)輸入  const app = new Vue({     el: '#app',     data:{         newTask: '',         taskList: [],         doneList: []     },     methods:{         addNew: function() {                   if(this.newTask !== '') {                       this.taskList.push(this.newTask);                       this.newTask = '';                   }                 },         remove: function(index) {                   if(index >=  0) {                       this.taskList.splice(index,1);                   }                 }     } });

      下面來(lái)具體分析一下這個(gè)程序。在通常情況下,Web 應(yīng)用程序在前端接受用戶(hù)輸入信息的方式主要有兩種:第一種方式是用文本框元素來(lái)獲取用戶(hù)從鍵盤(pán)輸入的信息。在 Vue.js 框架中,我們可以用v-model指令將<input type="text">標(biāo)簽綁定到newTask數(shù)據(jù)中,該指令與v-bind指令不同的在于,它是一種雙向綁定。也就是說(shuō),v-model指令不止可以讓 JavaScript 代碼中對(duì)綁定數(shù)據(jù)的修改反映到頁(yè)面元素中,也可以讓頁(yè)面元素獲取到的用戶(hù)輸入數(shù)據(jù)同步到 JavaScript 代碼中。在 JavaScript 代碼獲取到文本框中的用戶(hù)輸入內(nèi)容之后,我們就可以通過(guò)事件處理函數(shù)addNew將其加入到一個(gè)名為taskList的數(shù)據(jù)列表中,然后將該事件處理函數(shù)注冊(cè)給輸入回車(chē)和鼠標(biāo)單擊事件。

      第二種方式是用單選鈕、復(fù)選框等選擇性元素來(lái)獲取用戶(hù)用鼠標(biāo)勾選的信息。例如在上面這個(gè)程序中,我在<p id="todo">元素中用v-for指令創(chuàng)建了一系列<input type="checkbox">,它們都提供v-model指令將自己雙向綁定到了另一個(gè)名為doneList數(shù)據(jù)列表上。在 Vue.js 框架中,如果一組復(fù)選框元素被v-model指令綁定到了一個(gè)列表類(lèi)型的數(shù)據(jù)上,那么當(dāng)這些復(fù)選框被選上時(shí),它們的value屬性值就會(huì)被自動(dòng)添加到這個(gè)被綁定的數(shù)據(jù)列表中。

      為了證明被選中的復(fù)選框被加入到了doneList數(shù)據(jù)列表中,我還在頁(yè)面中添加了一個(gè)<p id="done">元素,并對(duì)doneList數(shù)據(jù)列表進(jìn)行了遍歷顯示。需要說(shuō)明的是,用于遍歷數(shù)據(jù)列表的v-for指令主要有兩種形式:

      • 當(dāng)我們只要遍歷列表中的值時(shí),可以這樣寫(xiě):v-for="item in dataList",這時(shí)候數(shù)據(jù)列表(dataList)中的每一項(xiàng)數(shù)據(jù)就會(huì)在遍歷過(guò)程中逐一被迭代變量(item)說(shuō)讀取。
      • 當(dāng)我們需要同時(shí)獲取列表值及其在列表中的索引時(shí),可以這樣寫(xiě):v-for="( item,index ) in dataList",這時(shí)候數(shù)據(jù)列表(dataList)在遍歷過(guò)程中,每一項(xiàng)數(shù)據(jù)的值會(huì)被item變量讀取,而每一項(xiàng)數(shù)據(jù)的索引會(huì)被index變量讀取。

      最后需要說(shuō)明的是,對(duì)于<p id="done">元素本身,我使用了v-if指令,它的效果與之前的v-show指令基本相同,唯一的區(qū)別是:v-if指令會(huì)直接在 DOM 樹(shù)上增加或刪除其所在的元素節(jié)點(diǎn),而v-show指令則是單純通過(guò)其所在元素的style屬性隱藏或顯示該元素而已。在執(zhí)行效率上,v-show指令要更高效一些。在這里,我們?cè)O(shè)置了當(dāng)doneList列表中沒(méi)有數(shù)據(jù)時(shí),程序就直接將<p id="done">元素從頁(yè)面中移除,反之則在頁(yè)面中添加該元素。下面來(lái)看一下02_toDoList程序運(yùn)行的效果:

      Vue.js 學(xué)習(xí)之二:數(shù)據(jù)驅(qū)動(dòng)開(kāi)發(fā)

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)