【黑馬程序員】Vuejs入門篇

黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動【黑馬程序員】Vue.js入門篇目錄弓|入Vue.jsVue.js是什么聲明式渲染HelloWorld條件與循環(huán)處理用戶點(diǎn)擊綜合示例.引入Vue.js安裝Vue可以通過查看官方安裝教程來了解其他安裝Vue的選項(xiàng)。但對webpackNode.js等打包構(gòu)建工具不了解的同學(xué)不推薦直接使用vue-cli搭建項(xiàng)目腳手架。最簡單的方式是在本地創(chuàng)建的.html文件中通過如下方式引入Vue:<scriptsrc="https:〃/vue/dist/vue.js"></script>.Vue.js是什么？Vue.js（讀音/vju/,類似于view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級框架不同的是，Vue采用自底向上增量開發(fā)的設(shè)計。Vue的核心庫只關(guān)注視圖層。不僅易于上手（對比其它框架），還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和Vue生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動。黑馬程序員成都中心編著

黑馬程序員黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動學(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的核心，?它是一個Vue實(shí)例。Vue實(shí)例是作用于某一個HTML元素上的。Vue.js的目標(biāo)是通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。DOMViewPlainJavaScriptObjectsDOMViewPlainJavaScriptObjects當(dāng)創(chuàng)建了ViewModel實(shí)例后，雙向綁定的過程分為以下幾步：1、上圖中的DOMListeners和DataBindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。2、從View側(cè)看，ViewModel中的DOMListeners工具會幫我們監(jiān)測頁面上DOM元素的變化，如果有變化，則更改Model中的數(shù)據(jù)；3、從Model側(cè)看，當(dāng)我們更新Model中的數(shù)據(jù)時，DataBindings工具會幫我們更新頁面中的DOM元素。.HelloWorldVue.js的核心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn)DOM黑馬程序員成都中心編著

IG黑馬程序員IG黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動文本插值實(shí)現(xiàn)數(shù)據(jù)綁定Vue.js有多種數(shù)據(jù)綁定的語法，最基礎(chǔ)的形式是文本插值，使用mustache語法，在運(yùn)行時{{message}}會被數(shù)據(jù)對象的message屬性替換，所以頁面上會輸出"HelloWorld!"。<divid=〃app〃>{{message}}</div>〃這是定義視圖ViewnewVue({el:'#app',//指向view將Vue實(shí)例掛載data:message:,HelloWorld!,)〃指向model))//用來連接View與Model輸出純HTML使用{{message}}的mustache語法只能將數(shù)據(jù)解釋為純文本為了輸出HTML,可以使用v-html指令：<divid=app><divv-html=〃text〃></div></div>newVue({el:#app,data:{text:'<h1>hello</h1>'))關(guān)于指令：Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性，黑馬程序員成都中心編著

黑馬程序員黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動將指令綁定在元素上時，指令會為綁定的目標(biāo)元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性(attribute)。雙向數(shù)據(jù)綁定MVVM模式本身支持雙向綁定，在Vue.js中可以使用v-model指令在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定。<divid=〃app〃><p>{{message}}</p><inputtype=〃text〃v-model=〃message〃/></div>這樣無論是改變輸入框的內(nèi)容還是通過控制臺修改message的值，另一個值都會同時被改變。HelloVue.js!HelloVuejs!給元素的屬性綁定數(shù)據(jù)定義在Vue實(shí)例的data接口上的數(shù)據(jù)的綁定很靈活，既可以綁定在DOM節(jié)點(diǎn)內(nèi)部，也可以綁在屬性上<divid=〃app〃v-bind:title='message'v-bind:style='color'v-once><a:href='url'>{{message}}</a></div>v-once指令能夠讓你執(zhí)行一次性的插值，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容黑馬程序員成都中心編著

黑馬程序員黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動不會更新。但請留心這會影響到該節(jié)點(diǎn)上所有的數(shù)據(jù)綁定。varvm=newVue({el:，#app，,data:{message:'Google',color:'color:green',url:'https:〃')))Mustache不能在HTML屬性中使用，綁定數(shù)據(jù)到節(jié)點(diǎn)屬性上時，需要使用v-bind指令。利用這個指令將元素節(jié)點(diǎn)div的title屬性和Vue實(shí)例的message屬性綁定到一起，從而建立數(shù)據(jù)與該屬性值的綁定。v-bind指令可以縮寫為一個冒號，如a標(biāo)簽中的v-bind:href="url"的縮寫方式:href="url"〈buttonv-bind:disabled=〃someDynamicCondition〃>Button</button>v-bind指令對布爾值的屬性也有效——如果條件被求值為false的話該屬性會被移除。.條件與循環(huán)根據(jù)條件表達(dá)式的值來執(zhí)行元素的插入或者刪除行為的是v-if指令:<divid=〃app〃><h1v-if="num>0">Num:{{num}}</h1><pv-if=〃seen〃>nowyouseeme</p></div>varapp=newVue({el:，#app，,data:{黑馬程序員成都中心編著

黑馬程序員傳智播客旗下高端黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動num:12,seen:true,name:'WannaCry'))v-if指令可以綁定一個屬性值為布爾型的屬性，當(dāng)值為真時，元素將顯示，反之則消失。如果在控制臺設(shè)置叩p.seen=false，你會發(fā)現(xiàn)頁面上的“nowyouseeme”消失了。這個例子演示了我們不僅可以綁定DOM文本到數(shù)據(jù)，也可以綁定DOM結(jié)構(gòu)到數(shù)據(jù)。而且，Vue也提供一個強(qiáng)大的過渡效果系統(tǒng)，可以在Vue插入/更新/刪除元素時自動應(yīng)用過渡效果v-show也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地為元素設(shè)置CSS的style屬性。<h1v-show=〃name.indexOf('Walker')>=0">Name:({name}}</h1>在控制臺打開，可以看到<h1>Name:WannaCry</h1>元素被設(shè)置了style="display:none"樣式?？梢杂胿-else指令為v-if或v-show添加一個“else塊”。<divid=〃app〃><h1v-if="age>=25">Age:{{age}}</h1><h1v-else>Name:({name}}</h1></div>v-else元素必須立即跟在v-ifv-else-if或v-show元素的后面——否則它不能被識別。黑馬程序員成都中心編著

黑馬程序員黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動varvm=newVue({el:，#app，,data:{age:20,name:'AlanWalker’,sex:'Man')))v-else元素是否渲染在HTML中，取決于前面v-if的值true還是false如果v-if的值為false，則后面v-else的內(nèi)容不會渲染到HTML。數(shù)組數(shù)據(jù)循環(huán)渲染列表使用v-for指令：<divclass=〃title〃><ul><liv-for="todointodos">{{todo.text}}</li></ul></div>v-for指令基于一個數(shù)組渲染一個列表，它和JavaScript的遍歷語法相似：v-for="todointodostodos是一個數(shù)組，todo是當(dāng)前被遍歷的數(shù)組元素。varapp=newVue({el:'.title',data:{〃定義todos數(shù)組todos:[{text:'studyhard'),{text:'findagirlfriend'),{text:'aroundtheworld')])))頁面顯示如下：黑馬程序員成都中心編著

黑馬程序員傳智播客旗下高端黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動studyhardfindagirlfriendaroundtheworld控制臺里，輸入叩p.todos.push({text:'coding'})，你會發(fā)現(xiàn)列表中新添加了一項(xiàng)。.處理用戶點(diǎn)擊當(dāng)用戶點(diǎn)擊頁面，我們可以用v-on指令綁定一個事件監(jiān)聽器，通過它調(diào)用我們在Vue實(shí)例中定義的方法：<divclass=〃title〃><p>{{message}}</p><buttonv-on:click=〃reverseMessage〃>反轉(zhuǎn)消息</button></div>v-on指令用于給監(jiān)聽DOM事件，它的用語法和v-bind是類似的。newVue({el:'.title',data:{message:'HelloVue.js!'},methods:{reverseMessage:function(){this.message=this.message.split('').reverse().join('')//split()用于將字符串轉(zhuǎn)化為數(shù)組//reverse()用于顛倒數(shù)組中元素順序〃join()用于將數(shù)組轉(zhuǎn)化為字符串))))v-on指令可以縮寫為@符號。.綜合示例Vue+Bootstr叩實(shí)現(xiàn)todolist的小Demo黑馬程序員成都中心編著

黑馬程序員傳智播客旗下高端黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動一.Html樣式<divclass=〃container〃id=〃box〃><formrole=〃form〃><divclass=〃form-group〃><labelfor=〃username〃>username：</label><!--用v-model指令將input內(nèi)的值與實(shí)例data內(nèi)的值綁定在一起--><inputtype=〃text〃class=〃form-control〃id=〃username〃v-model=〃username〃placeholder="Pleaseenteryourusername"></div><divclass=〃form-group〃><labelfor=〃password〃>password:</label><inputtype=〃password〃class=〃form-control〃id=〃password〃v-model=〃password〃placeholder="pleaseenteryourpassword”〉</div><!--用v-on指令綁定點(diǎn)擊click事件--><buttontype=〃button〃class="btnbtn-primary"v-on:click=〃add〃>submit</button><buttontype=〃reset〃class="btnbtn-danger">reset</button></form><hr><tableclass="tabletable-borderedtable-hover"><captionclass="h3text-centertext-muted〃>用戶信息表</caption><trclass=〃text-danger〃><th<th<th<th<th<th</tr><trclass=〃text-center〃v-for="(item,index)inmyData"><!--用v-for指令循環(huán)渲染列表index為索引值--><td>{{index+1}}</td><td>{{}}</td><td>{{item.pwd}}</td><td><buttonclass="btnbtn-infobtn-sm〃data-toggle=〃modal〃data-target=〃#myModal〃v-on:click="nowIndex=index">delete</button></td></tr><!--用v-show指令根據(jù)條件返回的布爾值決定是否渲染-->黑馬程序員成都中心編著

黑馬程序員黑馬程序員傳智播客旗下高端IT教育品牌改變中國IT教育，我們正在行動<trv-show=〃myData.length!=0"><tdcolspan=〃4〃class=〃text-right〃><buttonclass="btnbtn-dangerbtn-sm"data-toggle="modaldata-target=〃#myModal〃v-on:click="{nowIndex=all,modalTitle='confirmdeleteall?'}〃>deleteall</button></td></tr><trv-show="myData.length==0"><tdcolspan=〃4〃class="text-centertext-muted"><p>暫無數(shù)據(jù)...</p></td></tr></table><!--模態(tài)框--><divrole=〃dialog〃class="modalfadebs-example-modal-sm"id=〃myModal〃><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"><span>X</span></button><h4class="modal-title">{{modalTitle}}</h4></div><divclass="modal-bodytext-right"><buttonclass="btnbtn-primarybtn-sm"data-dismiss="modal"v-on:click="remove(nowIndex)">yes</button><buttonclass="btnbtn-dangerbtn-sm"data-dismiss="modal">no</button></d