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

下載本文檔

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

文檔簡介

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

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

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

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

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

也可使用#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)用時推薦使用npm安裝Vue.js提供配套工具來開發(fā)單文件組件。由于npm安裝速度慢，可使用cnpm來安裝Vue。8如果電腦中npm命令不是內(nèi)部命令，需要先安裝node.js。安裝過程安裝步驟：查看npm的版本號并安裝Vue安裝腳手架vue-cli創(chuàng)建一個基于webpack模板的新項目使用cd命令進入項目my-project中，并安裝項目依賴項使用cnpmrundev運行項目成功執(zhí)行以上命令后訪問：9http://localhost:8080/Vue項目目錄結(jié)鉤10src目錄是我們要開發(fā)的目錄

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

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

15

演示數(shù)據(jù)掛載到DOM頁面當用戶單擊更新按鈕時，這時修改app.message的值，updated方法被調(diào)用了，數(shù)據(jù)已經(jīng)被重新掛載到DOM中MVVM模式MVVM是一種基于前端開發(fā)的架構(gòu)模式Model-View-ViewModel）是對MVC（Model-View-Control）和MVP（Model-View-Presenter）的進一步改進其核心是提供對View和ViewModel的雙向數(shù)據(jù)綁定ViewModel負責連接View和Model，保證視圖和數(shù)據(jù)的一致性16Vue.js是一個提供了MVVM風格的雙向數(shù)據(jù)綁定的Javascript庫，專注于View層。它的核心是MVVM中的ViewModel。MVVM模式『View』：視圖層（UI用戶界面）『ViewModel』：業(yè)務(wù)邏輯層（一切js可視為業(yè)務(wù)邏輯）『Model』：數(shù)據(jù)層（存儲數(shù)據(jù)及對數(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)建一個Vue實例或"ViewModel",它連接View與Model el:'#App',

溫馨提示

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

評論

0/150

提交評論