Vue.js3前端開發(fā)基礎(chǔ)及項目化應(yīng)用 課件 單元一 Vue.js 3入門基礎(chǔ)

單元一Vue.js入門基礎(chǔ)Vue.js前端開發(fā)基礎(chǔ)及項目化應(yīng)用目錄前端開發(fā)模式的演變歷程認(rèn)識Vue.js項目開發(fā)準(zhǔn)備項目1歷史名城簡介頁面基于模板渲染頁面的開發(fā)模式利用JSP、PHP等技術(shù)創(chuàng)建頁面模板，頁面內(nèi)容由后端計算生成，通過Web服務(wù)器將模板解析成HTML文件，經(jīng)瀏覽器渲染后得到最終頁面效果。特點：是頁面布局與業(yè)務(wù)邏輯代碼混合在一起基于AJAX前后端分離的開發(fā)模式Web應(yīng)用可分為前端和后端，其中前端負(fù)責(zé)頁面的布局與交互，后端負(fù)責(zé)業(yè)務(wù)邏輯的處理，前后端通過接口進(jìn)行數(shù)據(jù)交互。特點：前后端分離，各自任務(wù)明確前端開發(fā)模式的演變歷程基于MVVM的開發(fā)模式MVVM（Model-View-ViewModel，模型-視圖-視圖模型）模式是一種簡化用戶界面的事件驅(qū)動編程方式。其思想是以ViewModel（視圖模型）層為樞紐，向上與View（視圖）層進(jìn)行雙向數(shù)據(jù)綁定，向下與Model（模型）層通過接口交互數(shù)據(jù)，從而實現(xiàn)View和Model的自動同步。特點：前后端進(jìn)一步得到分離前端開發(fā)模式的演變歷程什么是Vue.jsVue.js（簡稱Vue）是一個基于MVVM模式的，用于構(gòu)建用戶界面的JavaScript框架。核心思想數(shù)據(jù)驅(qū)動：指視圖由數(shù)據(jù)驅(qū)動生成，開發(fā)者對視圖的改變，不是通過直接操作DOM實現(xiàn)的，而是通過修改數(shù)據(jù)間接實現(xiàn)的。組件化：對于可重用代碼的封裝。認(rèn)識Vue.jsVue主要特性輕量級數(shù)據(jù)綁定指令豐富插件眾多組件化虛擬DOM認(rèn)識Vue.js了解相關(guān)工具Vue庫文件Vue框架的核心庫文件。它包括模板語法、組件、數(shù)據(jù)綁定和響應(yīng)式系統(tǒng)等內(nèi)容，可以滿足前端項目的基礎(chǔ)功能開發(fā)需求使用方式采用CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)網(wǎng)絡(luò)）鏡像服務(wù)器方式直接導(dǎo)入HTML文件下載Vue庫文件，將它作為本地資源在HTML代碼中引入以插件形式安裝到前端項目中項目開發(fā)準(zhǔn)備了解相關(guān)工具（續(xù)）VueCLI一個用于快速構(gòu)建Vue項目的工具。它包括CLI（Command-LineInterface，命令行界面）、CLI服務(wù)和CLI插件CLI：提供了Vue命令用于搭建項目CLI服務(wù)：基于webpack提供開發(fā)環(huán)境，用于項目啟動、打包和加載CLI插件等處理工作CLI插件：提供可選的包，如Babel/TypeScript轉(zhuǎn)譯、ESLint集成等，在創(chuàng)建項目時，開發(fā)者可自行選用項目開發(fā)準(zhǔn)備了解相關(guān)工具（續(xù)）Node.js、npm和webpackNode.js是一個基于ChromeV8引擎的JavaScript運行環(huán)境。它提供了使用npm和webpack工具的支持npm：一個Node.js中用于集中管理包的工具webpack：一個JavaScript應(yīng)用程序的靜態(tài)模塊打包器ES6（ECMAScript6.0的縮寫）：是JavaScript語言的下一代標(biāo)準(zhǔn)，其目標(biāo)是使JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。新特性：const和let命令、模板字符串、解構(gòu)、for...of循環(huán)、展開運算符、ES6箭頭函數(shù)、類的支持、模塊等項目開發(fā)準(zhǔn)備項目開發(fā)準(zhǔn)備安裝開發(fā)和調(diào)試工具代碼編輯器：VSCode（VisualStudioCode）是Microsoft推出的一款用于編寫現(xiàn)代Web應(yīng)用和云應(yīng)用的跨平臺源碼編輯器VSCode的安裝：進(jìn)入VSCode的官網(wǎng)下載所需版本，而后執(zhí)行.exe文件進(jìn)行安裝VSCode的擴展庫：Vetur：支持Vue語法高亮、智能感知、Emmet等，還包含格式化功能等HTMLSnippets：支持HTML標(biāo)簽以及對標(biāo)簽含義的智能提示項目開發(fā)準(zhǔn)備調(diào)試工具DevTools前端開發(fā)人員可用它進(jìn)行開發(fā)預(yù)覽、遠(yuǎn)程調(diào)試、性能調(diào)優(yōu)、bug跟蹤、斷點調(diào)試等工作后端開發(fā)人員可用它進(jìn)行網(wǎng)絡(luò)抓包、開發(fā)調(diào)試等工作測試人員則可用它檢查服務(wù)器端API數(shù)據(jù)是否正確、審查頁面元素樣式及布局、進(jìn)行頁面加載性能分析，以及進(jìn)行自動化測試DevTools工具中共有8個功能面板，其中常用于調(diào)試的是：Elements（元素）面板、Console（控制臺）面板、Sources（源代碼）面板、Network（網(wǎng)絡(luò)）面板項目開發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Elements面板：用于檢查和實時編輯頁面的HTML與CSS代碼定位DOM查看CSS項目開發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Console面板：可進(jìn)行交互式編程用于調(diào)試；也可以查看當(dāng)前程序運行日志信息項目開發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Sources面板：查看源碼以及進(jìn)行斷點調(diào)試項目開發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Network面板：查看網(wǎng)頁資源請求處理情況項目開發(fā)準(zhǔn)備調(diào)試工具VueDevtools一款基于瀏覽器的插件，主要用于調(diào)試Vue應(yīng)用程序安裝流程GitHub上查找并下載安裝包vue3_dev_tools.crxChrome瀏覽器右上角“自定義及控制”下拉菜單中，選擇“更多工具”->“擴展程序”，進(jìn)入擴展程序管理界面，把安裝包文件拖入該界面，當(dāng)看到瀏覽器提示“要添加Vue.jsdevtools嗎？”時，單擊“添加擴展程序”按鈕，即可安裝該插件項目1歷史名城簡介頁面需求描述歷史名城游網(wǎng)站需要制作一個HTML頁面，用于介紹某個歷史名城的基本情況。頁面內(nèi)容包括標(biāo)題、介紹文字、點贊按鈕和點贊數(shù)項目1歷史名城簡介頁面實現(xiàn)思路使用VSCode創(chuàng)建一個HTML程序，引入Vue庫文件，并編寫相應(yīng)的HTML、CSS和JavaScript代碼。使用Chrome瀏覽器運行該程序，并通過調(diào)試工具查看相關(guān)信息項目1歷史名城簡介頁面任務(wù)1-1構(gòu)建Vue應(yīng)用程序任務(wù)1-2運行并調(diào)試Vue應(yīng)用程序同步訓(xùn)練請使用VSCode代碼編輯器，創(chuàng)建一個HTML頁面，編寫如圖所示代碼，實現(xiàn)顯示“Hello,World！”的功能。單元小結(jié)前端開發(fā)模式的發(fā)展經(jīng)歷了3個階段：模板渲染頁面->AJAX前后端分離->MVVM。Vue是一個用于構(gòu)建用戶界面的JavaScript框架。它是基于MVVM模式的、漸進(jìn)式的、允許自底向上逐層應(yīng)用的框架。Vue的核心思想是數(shù)據(jù)驅(qū)動和組件化。數(shù)據(jù)驅(qū)動是指視圖由數(shù)據(jù)驅(qū)動生成，開發(fā)者對視圖的改變，不是通過直接操作DOM，而是通過修改數(shù)據(jù)間接實現(xiàn)的。組件化是指對于可重用代碼的封裝。