汝州住房和城鄉(xiāng)建設(shè)網(wǎng)站,軟件開發(fā)文檔下載,大網(wǎng)站建設(shè)公司,刪除網(wǎng)站內(nèi)容前言 Vue.js 是前端領(lǐng)域最適合新手入門的框架之一#xff01;它以簡單易學(xué)、漸進(jìn)式集成、數(shù)據(jù)驅(qū)動視圖為核心特點(diǎn)#xff0c;不用一次性掌握所有知識點(diǎn)#xff0c;就能快速開發(fā)小型項(xiàng)目。本文專為零基礎(chǔ) / 入門級開發(fā)者整理#xff0c;用通俗的語言、完整的代碼示例#…前言Vue.js 是前端領(lǐng)域最適合新手入門的框架之一它以簡單易學(xué)、漸進(jìn)式集成、數(shù)據(jù)驅(qū)動視圖為核心特點(diǎn)不用一次性掌握所有知識點(diǎn)就能快速開發(fā)小型項(xiàng)目。本文專為零基礎(chǔ) / 入門級開發(fā)者整理用通俗的語言、完整的代碼示例覆蓋 Vue 開發(fā)必備核心技能幫你少走彎路快速上手。一、Vue.js 簡介與環(huán)境搭建新手必看1. 核心定位一句話理解Vue 是專注于「頁面視圖」的 JavaScript 框架 —— 簡單說它能幫你更輕松地把數(shù)據(jù)渲染到頁面還能實(shí)現(xiàn)數(shù)據(jù)和頁面的自動同步不用手動操作 DOM比如 jQuery 那種頻繁修改頁面元素的寫法。2. 三種環(huán)境搭建新手推薦前兩種搭建方式適用場景操作難度核心步驟復(fù)制即用直接引入CDN快速體驗(yàn)、寫小 demo 最簡單1. 新建 HTML 文件2. 復(fù)制下面代碼到 中htmlbr2 開發(fā)版有錯誤提示適合學(xué)習(xí) --brhttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptbr3. 直接在 HTML 中寫 Vue 代碼Vite推薦正式項(xiàng)目、想體驗(yàn)極速開發(fā) 較簡單1. 先安裝 Node.js官網(wǎng)下載https://nodejs.org/選 LTS 版本安裝時一路下一步2. 打開命令行WincmdMac終端執(zhí)行bashmy-vue-project 是項(xiàng)目名可自定義npm create vitelatest my-vue-project -- --template vue 進(jìn)入項(xiàng)目文件夾 cd my-vue-project# 安裝依賴 npm install 項(xiàng)目啟動后會顯示訪問地址如 http://127.0.0.1:5173/npm run devVue CLI中大型老項(xiàng)目 稍復(fù)雜需額外配置新手先跳過后續(xù)進(jìn)階再學(xué) 新手提示先用電線引入CDN寫 2-3 個小 demo熟悉基礎(chǔ)語法后再用 Vite 建正式項(xiàng)目二、Vue 核心基礎(chǔ)語法入門重點(diǎn)1. 第一個 Vue 實(shí)例復(fù)制就能運(yùn)行新建 index.html 文件完整代碼如下html langzh-CN8引入 Vue --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptbody掛載點(diǎn)Vue 會管理這個 div 內(nèi)部的所有內(nèi)容 --渲染 data 中的數(shù)據(jù) --{{ message }}// 創(chuàng)建 Vue 實(shí)例核心對象new Vue({el: #app, // 掛載到 id 為 app 的 div必須和上面的 id 對應(yīng)data: { // 存儲響應(yīng)式數(shù)據(jù)數(shù)據(jù)變了頁面會自動變message: Hello Vue我是新手}})/body/html打開文件就能看到頁面顯示 Hello Vue我是新手修改 data 中的 message頁面會實(shí)時更新。Vue 3 簡化寫法了解即可// 需引入 Vue 3 的 CDN://unpkg.com/vue3/dist/vue.global.js import { createApp } from vuecreateApp({data() {return { message: Hello Vue 3 } // Vue 3 中 data 必須是函數(shù)}}).mount(#app) // 直接掛載2. 模板語法頁面渲染核心1插值表達(dá)式 {{ }}作用把 data 中的數(shù)據(jù)渲染到頁面支持簡單運(yùn)算和判斷。示例div idapp數(shù)據(jù){{ name }}/p簡單運(yùn)算{{ 1 2 }} → 輸出 3判斷{{ age 18 ? 成年 : 未成年 }}/pnew Vue({el: #app,data: {name: 小明,age: 20}})2常用指令v - 開頭新手必記 5 個指令是 Vue 提供的特殊屬性用來操作頁面元素新手先掌握這 5 個核心指令指令作用通俗解釋完整示例代碼v-text渲染文本和 {{}} 一樣無閃爍html message 等價于 {{message}} --new Vue ({el: #app, data: { message: 用 v-text 渲染 } })v-bind縮寫 :綁定標(biāo)簽屬性比如圖片地址、樣式htmlapp 綁定圖片地址 -- srcimgUrl width200 class -- isActive ? red : blue 動態(tài)樣式 el: #app, data: { imgUrl: https://vuejs.org/images/logo.png, // Vue 官網(wǎng) logoActive: true }}) color: red; } .blue { color: blue; }v-on縮寫 綁定事件比如點(diǎn)擊、輸入htmlbrdiv idapp 次數(shù){{ count }}/pbr 點(diǎn)擊事件點(diǎn)擊按鈕count 加 1 --br clickcount 1點(diǎn)我加 1/button br clicksayHello點(diǎn)我說話/buttonbr/divbrscript({: #app, data: { count: 0 }, methods: { // 存儲方法事件觸發(fā)時執(zhí)行 sayHello() {br alert(Hello Vue) } }br})br/scriptv-if / v-show條件渲染控制元素顯示 / 隱藏html -ifisShowv-if 控制隱藏時元素被刪除 v-show 控制隱藏時元素還在只是看不見 isShow !isShow 切換顯示 Vue({ el: #app, data: { isShow: true } })v-for列表渲染循環(huán)顯示數(shù)據(jù)html 3 我的愛好 3 循環(huán)數(shù)組item 是每個元素index 是索引 -- (item, index) in hobbies :keyindex 1 }}. {{ item }} new Vue ({ el: #app,: { hobbies: [ 看電影 , 打游戲 , 學(xué) Vue] // 數(shù)組數(shù)據(jù) }}) 新手提示v-if 和 v-show 區(qū)別頻繁切換顯示用 v-show性能好偶爾切換用 v-if節(jié)省內(nèi)存。v-for 必須加 :key新手先用 index 即可后續(xù)學(xué)完組件再用數(shù)據(jù)的唯一 ID。3. 雙向綁定 v-model表單專用作用實(shí)現(xiàn)「表單輸入」和「數(shù)據(jù)」的雙向同步 —— 輸入框輸入內(nèi)容數(shù)據(jù)自動變數(shù)據(jù)變了輸入框內(nèi)容也自動變。示例登錄表單div idapp表單 username --typetext v-modelusername placeholder請輸入用戶名br框綁定 password --v-modelpassword placeholder請輸入密碼br復(fù)選框綁定 isAgree --typecheckbox v-modelisAgree 同意協(xié)議br打印輸入的內(nèi)容 --login :disabled!isAgree登錄/button顯示輸入的內(nèi)容 --輸入的用戶名{{ username }}/p/divnew Vue({el: #app,data: {username: , // 初始為空password: ,isAgree: false // 復(fù)選框默認(rèn)未選中},methods: {login() {alert(用戶名${this.username}密碼${this.password})}}})常用修飾符新手必備首尾空格 --input typetext v-model.trimusername數(shù)字 --typenumber v-model.numberage同步數(shù)據(jù)輸入時不實(shí)時同步 --v-model.lazyinfo三、計(jì)算屬性與偵聽器簡化邏輯1. 計(jì)算屬性 computed計(jì)算數(shù)據(jù)作用基于已有數(shù)據(jù)計(jì)算出新的數(shù)據(jù)且會緩存結(jié)果不用重復(fù)計(jì)算性能好。示例拼接姓名姓input v-modelfirstName名lastName計(jì)算屬性不用加括號 --全名{{ fullName }}/divscriptnew Vue({el: #app,data: { firstName: , lastName: },computed: { // 計(jì)算屬性依賴 data 中的數(shù)據(jù)fullName() {// 當(dāng) firstName 或 lastName 變化時自動重新計(jì)算return this.firstName this.lastName}}})新手對比計(jì)算屬性 vs 方法 —— 計(jì)算屬性會緩存方法每次調(diào)用都重新計(jì)算優(yōu)先用計(jì)算屬性。2. 偵聽器 watch監(jiān)聽數(shù)據(jù)變化作用監(jiān)聽某個數(shù)據(jù)的變化然后執(zhí)行自定義邏輯比如發(fā)送請求、彈提示。示例監(jiān)聽用戶名變化idapp用戶名-modelusername/divscriptnew Vue({el: #app,data: { username: },watch: { // 偵聽器監(jiān)聽 username 變化username(newVal, oldVal) {// newVal變化后的值oldVal變化前的值console.log(用戶名從 ${oldVal} 變成了 ${newVal})// 實(shí)際開發(fā)中可在這里判斷用戶名是否已存在調(diào)用接口}}})/script四、組件基礎(chǔ)拆分頁面1. 什么是組件組件是 Vue 中復(fù)用頁面片段的方式 —— 把頁面拆成一個個獨(dú)立的「小模塊」比如頭部、列表項(xiàng)、按鈕每個模塊有自己的 HTML、CSS、JS方便復(fù)用和維護(hù)。2. 新手入門全局組件簡單易用示例自定義一個按鈕組件組件像用普通標(biāo)簽一樣 --my-buttonmy-button/my-button/div// 1. 定義全局組件可在任意地方使用Vue.component(my-button, {template: HTML 結(jié)構(gòu) -- 1 classmy-btn點(diǎn)擊了 {{ count }} 次,data() {// 組件中的 data 必須是函數(shù)避免多個組件共用數(shù)據(jù)return { count: 0 }},styles: /* 組件的樣式 */.my-btn { color: white; background: blue; padding: 5px 10px; }})// 2. 創(chuàng)建 Vue 實(shí)例new Vue({ el: #app })新手提示組件名建議用「短橫線命名法」比如 my-button避免和 HTML 原生標(biāo)簽沖突。3. 組件通信父傳子、子傳父組件之間需要傳遞數(shù)據(jù)新手先掌握最常用的兩種1父傳子props父組件通過屬性傳遞數(shù)據(jù)給子組件。子組件通過 props 接收父組件的數(shù)據(jù)。示例idapptitle 和 count 給子組件 ---child :titleparentTitle :countparentCount /divscript// 子組件Vue.component(my-child, {props: [title, count], // 接收父組件傳遞的屬性template: divh3{{ title }}3p父組件傳遞的數(shù)量{{ count }}})// 父組件new Vue({el: #app,data: {parentTitle: 我是父組件傳遞的標(biāo)題,parentCount: 100}})/script2子傳父$emit子組件通過 this.$emit(事件名, 數(shù)據(jù)) 觸發(fā)事件傳遞數(shù)據(jù)。父組件監(jiān)聽子組件的事件接收數(shù)據(jù)。示例appp父組件的數(shù)值{{ parentNum }}/p組件監(jiān)聽子組件的 send-num 事件 ---numgetSonNum/my-child/div// 子組件Vue.component(my-child, {template: button clicksendData向父組件傳值/button,methods: {sendData() {const sonNum 200 // 子組件的數(shù)據(jù)// 觸發(fā) send-num 事件傳遞 sonNumthis.$emit(send-num, sonNum)}}})// 父組件new Vue({el: #app,data: { parentNum: 0 },methods: {// 接收子組件傳遞的數(shù)據(jù)getSonNum(data) {this.parentNum data // data 就是子組件傳遞的 sonNum}}})五、生命周期鉤子了解即可1. 什么是生命周期Vue 實(shí)例從「創(chuàng)建」到「銷毀」的整個過程會自動觸發(fā)一些函數(shù)這些函數(shù)就是生命周期鉤子我們可以在這些階段執(zhí)行自定義邏輯。2. 新手必備的 2 個鉤子鉤子函數(shù)觸發(fā)時機(jī)常用場景mounted組件掛載完成DOM 已生成初始化 DOM 操作比如獲取元素、發(fā)送網(wǎng)絡(luò)請求beforeDestroy組件即將銷毀清除定時器、解綁事件避免內(nèi)存泄漏示例mounted 發(fā)送請求new Vue({el: #app,data: { list: [] },mounted() {// 組件掛載完成后發(fā)送請求獲取數(shù)據(jù)實(shí)際開發(fā)用 axiosconsole.log(組件已掛載開始請求數(shù)據(jù))// 模擬請求setTimeout(() {this.list [數(shù)據(jù)1, 數(shù)據(jù)2, 數(shù)據(jù)3]}, 1000)}})六、新手避坑指南必看數(shù)據(jù)響應(yīng)式問題直接給對象添加新屬性頁面不會更新錯誤this.user.age 20user 原本沒有 age 屬性正確this.$set(this.user, age, 20)用 Vue 提供的 $set 方法v-for 和 v-if 不能一起用v-for 優(yōu)先級比 v-if 高會導(dǎo)致性能問題。解決先用計(jì)算屬性過濾數(shù)據(jù)再用 v-for 循環(huán)。樣式污染多個組件的樣式會相互影響。解決在組件的 style 標(biāo)簽加 scoped 屬性 scoped樣式只作用于當(dāng)前組件。忘記清除定時器組件銷毀后定時器還在運(yùn)行導(dǎo)致內(nèi)存泄漏。解決在 beforeDestroy 中清除mounted() {this.timer setInterval(() { console.log(運(yùn)行中) }, 1000)},beforeDestroy() {clearInterval(this.timer) // 清除定時器}七、新手學(xué)習(xí)路線建議基礎(chǔ)階段用 CDN 寫 5-10 個小 demo覆蓋本文所有知識點(diǎn)工具階段學(xué)習(xí) Vite 項(xiàng)目結(jié)構(gòu)掌握 npm 基本命令安裝依賴、啟動項(xiàng)目進(jìn)階階段學(xué)習(xí) Vue Router路由跳轉(zhuǎn)、Pinia狀態(tài)管理、Element PlusUI 組件庫實(shí)戰(zhàn)階段做一個小項(xiàng)目比如 TodoList、個人博客鞏固所有知識點(diǎn)。推薦學(xué)習(xí)資源官方文檔最權(quán)威Vue 2 中文文檔 https://v2.vuejs.org/Vue 3 中文文檔 https://vuejs.org/視頻教程B 站「尚硅谷 Vue 入門到精通」免費(fèi)適合新手實(shí)戰(zhàn)練習(xí)GitHub 搜索「vue-todolist」參考別人的代碼自己寫一遍?？偨Y(jié)Vue 入門的核心是掌握「數(shù)據(jù)驅(qū)動視圖」的思想 —— 不用關(guān)心 DOM 操作專注于數(shù)據(jù)和邏輯即可。本文覆蓋的基礎(chǔ)語法、組件、雙向綁定等知識點(diǎn)足以應(yīng)對中小型項(xiàng)目開發(fā)。新手學(xué)習(xí)時一定要多寫代碼、多踩坑遇到問題先看官方文檔再查資料堅(jiān)持 1-2 周就能熟練上手如果本文對你有幫助歡迎點(diǎn)贊、收藏后續(xù)會更新 Vue 進(jìn)階知識點(diǎn)路由、狀態(tài)管理、實(shí)戰(zhàn)項(xiàng)目關(guān)注不迷路