黑馬程序員】Vue.js入門篇

1、【黑馬程序員】Vue.js入門篇目錄 引入Vue.js Vue.js是什么 聲明式渲染Hello World 條件與循環(huán) 處理用戶點(diǎn)擊 綜合示例1. 引入Vue.js安裝Vue可以通過查看官方安裝教程來了解其他安裝 Vue 的選項(xiàng)。但對webpack Node.js等打包構(gòu)建工具不了解的同學(xué)不推薦直接使用vue-cli搭建項(xiàng)目腳手架。最簡單的方式是在本地創(chuàng)建的 .html 文件中通過如下方式引入 Vue：2. Vue.js是什么？Vue.js（讀音 /vju/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫

2、只關(guān)注視圖層。不僅易于上手(對比其它框架)，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動。學(xué)習(xí)Vue.js時要拋開jQuery手動操作DOM的思維，因?yàn)閂ue.js是數(shù)據(jù)驅(qū)動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數(shù)據(jù)綁定起來。一旦你創(chuàng)建了綁定，DOM將和數(shù)據(jù)保持同步，每當(dāng)變更了數(shù)據(jù)，DOM也會相應(yīng)地更新。 Vue.js是一種MVVM框架（Model-View-ViewModel），其中html是view層，js是model層，ViewModel是Vue.js的核心， 它是

3、一個Vue實(shí)例。Vue實(shí)例是作用于某一個HTML元素上的。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。當(dāng)創(chuàng)建了ViewModel實(shí)例后，雙向綁定的過程分為以下幾步：1、上圖中的DOM Listeners和Data Bindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。2、從View側(cè)看，ViewModel中的DOM Listeners工具會幫我們監(jiān)測頁面上DOM元素的變化，如果有變化，則更改Model中的數(shù)據(jù)；3、從Model側(cè)看，當(dāng)我們更新Model中的數(shù)據(jù)時，Data Bindings工具會幫我們更新頁面中的DOM元素。3. Hello WorldVue.js 的核

4、心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 3.1文本插值實(shí)現(xiàn)數(shù)據(jù)綁定Vue.js有多種數(shù)據(jù)綁定的語法，最基礎(chǔ)的形式是文本插值，使用mustache語法，在運(yùn)行時 message 會被數(shù)據(jù)對象的message屬性替換，所以頁面上會輸出Hello World!。 message /這是定義視圖Viewnew Vue(el: #app, /指向view 將Vue實(shí)例掛載data: message: Hello World! /指向model)/ 用來連接 View 與 Model3.2 輸出純HTML使用message的mustache語法只能將數(shù)據(jù)解釋為純文本，為了輸出HTML

5、，可以使用v-html指令:new Vue(el: #app,data: text:hello)關(guān)于指令：Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標(biāo)元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。3.3雙向數(shù)據(jù)綁定MVVM模式本身支持雙向綁定，在Vue.js中可以使用v-model指令在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定。 message 這樣無論是改變輸入框的內(nèi)容還是通過控制臺修改message的值，另一個值都會同時被改變。3.4 給元素的屬性綁定數(shù)據(jù)定義在Vue實(shí)例的data接口上

6、的數(shù)據(jù)的綁定很靈活，既可以綁定在DOM節(jié)點(diǎn)內(nèi)部，也可以綁在屬性上messagev-once指令能夠讓你執(zhí)行一次性的插值，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。但請留心這會影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定。var vm = new Vue(el: #app,data:message: Google,color: color:green,url:)Mustache 不能在 HTML 屬性中使用，綁定數(shù)據(jù)到節(jié)點(diǎn)屬性上時，需要使用v-bind指令。利用這個指令將元素節(jié)點(diǎn)div的 title屬性和 Vue 實(shí)例的 message屬性綁定到一起，從而建立數(shù)據(jù)與該屬性值的綁定。v

7、-bind指令可以縮寫為一個冒號，如a標(biāo)簽中的v-bind:href=url的縮寫方式:href=url。Buttonv-bind指令對布爾值的屬性也有效 如果條件被求值為false的話該屬性會被移除。4.條件與循環(huán)4.1 根據(jù)條件表達(dá)式的值來執(zhí)行元素的插入或者刪除行為的是v-if指令： 0Num: num now you see mevar app = new Vue(el: #app,data: num:12,seen: true,name:WannaCry)v-if指令可以綁定一個屬性值為布爾型的屬性，當(dāng)值為真時，元素將顯示，反之則消失。如果在控制臺設(shè)置app.seen = false，

8、你會發(fā)現(xiàn)頁面上的“now you see me ”消失了。這個例子演示了我們不僅可以綁定 DOM 文本到數(shù)據(jù)，也可以綁定 DOM結(jié)構(gòu)到數(shù)據(jù)。而且，Vue 也提供一個強(qiáng)大的過渡效果系統(tǒng)，可以在 Vue 插入/更新/刪除元素時自動應(yīng)用過渡效果。4.2v-show也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地為元素設(shè)置CSS的style屬性。= 0Name: name 在控制臺打開，可以看到Name:WannaCry元素被設(shè)置了style=display:none樣式。4.3 可以用v-else指令為v-if或v-show添加一個“else塊

9、”。= 25Age: age Name: name v-else元素必須立即跟在v-if,v-else-if或v-show元素的后面否則它不能被識別。var vm = new Vue(el: #app,data: age:20,name: Alan Walker,sex: Man)v-else元素是否渲染在HTML中，取決于前面v-if的值true還是false。如果v-if的值為false，則后面v-else的內(nèi)容不會渲染到HTML。4.4 數(shù)組數(shù)據(jù)循環(huán)渲染列表使用v-for指令： todo.text v-for指令基于一個數(shù)組渲染一個列表，它和JavaScript的遍歷語法相似：v-for

10、=todo in todostodos是一個數(shù)組，todo是當(dāng)前被遍歷的數(shù)組元素。var app = new Vue(el: .title,data: /定義todos數(shù)組todos: text: study hard , text: find a girlfriend , text: around the world )頁面顯示如下： study hard find a girlfriend around the world控制臺里，輸入app.todos.push( text: coding )，你會發(fā)現(xiàn)列表中新添加了一項(xiàng)。5. 處理用戶點(diǎn)擊當(dāng)用戶點(diǎn)擊頁面，我們可以用v-on指令綁定一個事

11、件監(jiān)聽器，通過它調(diào)用我們在Vue 實(shí)例中定義的方法： message 反轉(zhuǎn)消息v-on指令用于給監(jiān)聽DOM事件，它的用語法和v-bind是類似的。new Vue(el: .title,data: message: Hello Vue.js!,methods: reverseMessage: function () this.message = this.message.split().reverse().join()/split()用于將字符串轉(zhuǎn)化為數(shù)組/reverse()用于顛倒數(shù)組中元素順序/join()用于將數(shù)組轉(zhuǎn)化為字符串)v-on指令可以縮寫為符號。6. 綜合示例Vue+Bootst

12、rap實(shí)現(xiàn)todolist的小Demo一、Html樣式username：password:submitreset用戶信息表idusernamepasswordoption index+1item.pwddelete delete all暫無數(shù)據(jù).modalTitleyes no2、 JS部分window.onload = function()new Vue(el:#box,data:myData:,username:,password:,nowIndex:,/當(dāng)前用戶的索引 modalTitle:confirm delete?/模態(tài)框的title,methods:add:function()var name = this.username.trim();var pwd = this.pas