第1章 Vue入門電子課件_第1頁
第1章 Vue入門電子課件_第2頁
第1章 Vue入門電子課件_第3頁
第1章 Vue入門電子課件_第4頁
第1章 Vue入門電子課件_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第1章Vue入門課程內(nèi)容Vue是什么及Vue的特點(diǎn)Vue在前端開發(fā)中的優(yōu)勢Vue的下載以及如何引入并應(yīng)用實(shí)例化Vue對(duì)象、數(shù)據(jù)和方法數(shù)據(jù)掛載到DOM頁面Vue中的MVVM模式2

Vue簡述3什么是Vue.jsVue.js是一套響應(yīng)式系統(tǒng)，前端開發(fā)庫

Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。采用自底向上增量開發(fā)的設(shè)計(jì)Vue的核心庫只關(guān)注視圖層Vue采用單文件組件和生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用提供了MVVM數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)為什么使用Vue.js4

Vue核心庫只關(guān)注視圖層解決網(wǎng)頁結(jié)構(gòu)之間存在依賴或依存關(guān)系，不需要數(shù)據(jù)和視圖全混合在一起

避免使用jQuery選擇器及DOM操作本身存在性能缺失不需要不斷地一層層向上尋找父輩元素在產(chǎn)品升級(jí)中，解決頁面中相似的關(guān)聯(lián)和嵌套DOM元素多的數(shù)不清的情況Vue.js的主要特點(diǎn)Vue的特點(diǎn)：輕量級(jí)的框架雙向數(shù)據(jù)綁定指令組件化客戶端路由狀態(tài)管理5Vue.js的優(yōu)勢Vue的優(yōu)勢:可進(jìn)行組件化開發(fā)，使代碼量減少可對(duì)數(shù)據(jù)進(jìn)行雙向綁定編寫出來界面效果本身是響應(yīng)式的，使網(wǎng)頁能顯示好看效果實(shí)現(xiàn)網(wǎng)絡(luò)頁面之間跳轉(zhuǎn)，與Vue路由相比，超鏈接不會(huì)頁面刷新6傳統(tǒng)的頁面是通過超鏈接來實(shí)現(xiàn)頁面的切換和跳轉(zhuǎn)的Vue.js下載及引用下載地址：<script>標(biāo)簽引入

也可使用#CDN來引入Vue.js。

7/v2/guide/installation.html<scriptsrc="文件路徑/Vue.js"></script><scriptsrc="/npm/vue/dist/vue.js"></script>這樣就可直接使用Vue.js庫了<scriptsrc="/npm/vue@2.6.11"></script>npm安裝Npm安裝方式如下：用Vue.js構(gòu)建大型應(yīng)用時(shí)推薦使用npm安裝Vue.js提供配套工具來開發(fā)單文件組件。由于npm安裝速度慢，可使用cnpm來安裝Vue。8如果電腦中npm命令不是內(nèi)部命令，需要先安裝node.js。安裝過程安裝步驟：查看npm的版本號(hào)并安裝Vue安裝腳手架vue-cli創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目使用cd命令進(jìn)入項(xiàng)目my-project中，并安裝項(xiàng)目依賴項(xiàng)使用cnpmrundev運(yùn)行項(xiàng)目成功執(zhí)行以上命令后訪問：9http://localhost:8080/Vue項(xiàng)目目錄結(jié)鉤10src目錄是我們要開發(fā)的目錄

實(shí)例化Vue對(duì)象、數(shù)據(jù)和方法11

實(shí)例化Vue對(duì)象通過構(gòu)造函數(shù)Vue（）創(chuàng)建一個(gè)Vue的根實(shí)例，每一個(gè)newVue（）都是一個(gè)Vue構(gòu)造函數(shù)實(shí)例varvm=newVue({//（選項(xiàng)）這里編寫我的代碼。})Vue構(gòu)造器要求實(shí)例化時(shí)需傳入選項(xiàng)對(duì)象選項(xiàng)對(duì)象包括掛載元素（el）、數(shù)據(jù)（data）、方法（methods）、模板（tamplate）、生命周期鉤子函數(shù)等選項(xiàng)。演示創(chuàng)建Vue實(shí)例的過程12<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>實(shí)例化Vue對(duì)象</title></head><body><divid="app"><div>{{name}}</div></div><scriptsrc="js/Vue.js"></script><script> newVue({ el:'#app', data:{ name:‘你好邯鄲學(xué)院!', } })</script></body></html><!--app是根容器-->//實(shí)例化vue對(duì)象//每個(gè)Vue.js應(yīng)用都通過構(gòu)造函數(shù)Vue創(chuàng)建一個(gè)Vue根實(shí)例啟動(dòng)的//實(shí)例化Vue時(shí)，需傳入選項(xiàng)對(duì)象el:element需要獲取的元素，一定是html中的根容器元素data：用于數(shù)據(jù)的存儲(chǔ)運(yùn)行結(jié)果：你好邯鄲學(xué)院！實(shí)例化Vue對(duì)象、數(shù)據(jù)和方法13

Vue數(shù)據(jù)和方法數(shù)據(jù)（data）屬性方法（methods）newVue({el:'#app',data:{name:'john',age：22，email:'john@163.com'

}，methods:{say:function(){return:"歡迎您："+}}})

演示數(shù)據(jù)掛載到DOM頁面14<body><scriptsrc="/vue/dist/Vue.js"></script><divid="app-2"> <p>{{message}}</p><buttononclick="app.message='樂美歡迎你！未來的工程師。';">更新！</button>

</div><script>varapp=newVue({ el:'#app-2', data:{message:'HelloVue.js!'}, created:function(){console.log('messageis:'+this.message);}, mounted:function(){console.log("已掛載到DOM頁面上。");}, updated:function(){console.log("已更新DOM！");}})</script></body>'this'指向vm實(shí)例

15

演示數(shù)據(jù)掛載到DOM頁面當(dāng)用戶單擊更新按鈕時(shí)，這時(shí)修改app.message的值，updated方法被調(diào)用了，數(shù)據(jù)已經(jīng)被重新掛載到DOM中MVVM模式MVVM是一種基于前端開發(fā)的架構(gòu)模式Model-View-ViewModel）是對(duì)MVC（Model-View-Control）和MVP（Model-View-Presenter）的進(jìn)一步改進(jìn)其核心是提供對(duì)View和ViewModel的雙向數(shù)據(jù)綁定ViewModel負(fù)責(zé)連接View和Model，保證視圖和數(shù)據(jù)的一致性16Vue.js是一個(gè)提供了MVVM風(fēng)格的雙向數(shù)據(jù)綁定的Javascript庫，專注于View層。它的核心是MVVM中的ViewModel。MVVM模式『View』：視圖層（UI用戶界面）『ViewModel』：業(yè)務(wù)邏輯層（一切js可視為業(yè)務(wù)邏輯）『Model』：數(shù)據(jù)層（存儲(chǔ)數(shù)據(jù)及對(duì)數(shù)據(jù)的處理如增刪改查17演示MVVM模式<!--這是我們的View--><divid="App"> {{property}} <inputtype="text"v-model="property"/></div><scriptsrc="js/Vue.js"></script><script>//這是我們的ModelvarexampleData={ property:'HelloWorld'}newVue({//創(chuàng)建一個(gè)Vue實(shí)例或"ViewModel",它連接View與Model el:'#App',

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論