Vue2.x核心技術與實戰(一)

目錄

一、Vue2.x：快速上手+插值表達式+指令上

1.1 Vue快速上手

1.1.1 Vue概念

1.1.2 創建實例

1.1.3 插值表達式 { { }}

1.1.4 響應式特性

1.1.5 開發者工具

1.2 Vue指令

1.2.1 v-html

1.2.3 v-show / v-if

v-show

v-if

1.2.4 v-else / v-else-if

1.2.5 v-on

v-on 調用傳參

1.2.6 v-bind

圖片切換案例 - 波仔學習之旅

1.2.7 v-for

圖書管理案例-小黑的書架

v-for 中的 key

v-for 中的 key - 不加 key

v-for 中的 key

1.2.8 v-model

1.3 綜合案例-小黑記事本

二、Vue2.x：指令下+計算屬性+偵聽器

2.1 指令補充

2.1.1 指令修飾符

2.1.2 v-bind 對于樣式操作的增強

v-bind 對于樣式控制的增強 - 操作class

案例：京東秒殺tab導航高亮

v-bind 對于樣式控制的增強 - 操作style

2.1.3 v-model 應用于其他表單元素

2.2 computed計算屬性

2.2.1 基礎語法

2.2.2 computed 計算屬性 VS methods 方法

2.2.3 完整寫法

2.2.4 成績案例

2.3 watch偵聽器

2.3.1 基礎語法

2.3.2 完整寫法

2.4 綜合案例 - 水果購物車

一、Vue2.x：快速上手+插值表達式+指令上

1.1 Vue快速上手

1.1.1 Vue概念

Vue 是什么？

概念：Vue是一個用于  ①構建用戶界面的  ②漸進式   ③框架

解釋如下：

①構建用戶界面的 ：基于數據渲染出用戶看到的頁面

②漸進式：循序漸進   

Vue的兩種使用方式：

①Vue核心包開發

  • 場景：局部模塊改造

②Vue核心包 & Vue插件工程化開發

  • 場景：整站開發

③框架：一套完整的項目解決方案

優點：大大提升開發效率(70%↑)

缺點：需要理解記憶規則→官網


 

Vue2官網：https://v2.cn.vuejs.org/

Vue3官網：https://cn.vuejs.org/

總結：

Vue是什么?

Vue是一個用于  構建用戶界面  的  漸進式  框架

  1. 構建用戶界面：基于數據動態渲染頁面
  2. 漸進式：循序漸進的學習
  3. 框架：一套完整的項目解決方案，提升開發效率↑ (理解記憶規則)  規則→官網
     

1.1.2 創建實例

創建Vue實例，初始化渲染

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>
</head><body><!-- 創建Vue實例，初始化渲染1.準備容器(Vue所管理的范圍)2.引包 (開發版本包 /生產版本包) 官網3.創建實例4.添加配置項=>完成渲染 --><div id="app"><h1>{{ msg }}</h1><a href="#">{{ count }}</a></div><!-- 引入的是開發版本包-包含完整的注釋和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 一旦引入VueJS核心包，在全局環境，就有了 Vue 構造函數const app = new Vue({// 通過 el 配置選擇器，指定 Vue 管理的是哪個盒子el: "#app",// 通過 data 提供數據data: {msg: "Hello",count: 666,},});</script>
</body></html>

總結：

創建Vue實例，初始化渲染的核心步驟：

  1. 準備容器
  2. 引包(官網) - 開發版本 / 生產版本
  3. 創建Vue實例 new Vue()
  4. 指定配置項 el data =>渲染數據

① el 指定掛載點，選擇器指定控制的是哪個盒子

② data提供數據
 

1.1.3 插值表達式 { { }}

插值表達式是一種 Vue 的模板語法

1. 作用：利用表達式進行插值，渲染到頁面中

表達式：是可以被求值的代碼，JS引擎會將其計算出一個結果


 

2. 語法：{ { 表達式 }}

3. 注意點：

(1) 使用的數據必須存在(data)


 

(2) 支持的是表達式，而非語句，比如：if、for ...


 

(3) 不能在標簽屬性中使用 { {  }} 插值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>
</head><body><!-- 插值表達式: Vue的一種模板語法作用:利用 表達式 進行插值渲染語法: {{ 表達式 }} 注意點：1.使用的數據要存在2.支持的表達式，不是語句  if   for 3.不能在標簽屬性中使用 {{  }}--><div id="app"><p>{{nickname}}</p><p>{{nickname.toUpperCase()}}</p><p>{{nickname + "你好"}}</p><p>{{age>=18 ? "成年":"未成年"}}</p><p>{{friend.name}}</p><p>{{friend.desc}}</p></div><!-- 引入的是開發版本包-包含完整的注釋和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {nickname: "tony",age: 18,friend: {name: "小明",desc: "喜歡唱歌",},},});</script>
</body></html>

總結：

1. 插值表達式的作用是什么?

  • 利用表達式進行插值，將數據渲染頁面中

2. 語法格式?

  • { { 表達式 }}

3. 插值表達式的注意點：

①使用的數據要存在(data)

②支持的是表達式，而非語句 if ... for

③不能在標簽屬性里面使用
 

1.1.4 響應式特性

Vue核心特性：響應式

我們已經掌握了基礎的模板渲染，其實除了基本的模板渲染，Vue背后還做了大量工作。

比如：數據的響應式處理 → 響應式：數據變化，視圖自動更新


 

數據改變，視圖會自動更新

聚焦于數據 → 數據驅動視圖

使用Vue開發，關注業務的核心邏輯，根據業務修改數據即可
 

總結：

1. 什么是響應式呢?

  • 數據改變，視圖自動更新
  • 使用Vue開發→專注于業務核心邏輯即可

2. 如何訪問或修改數據呢?

  • data中的數據，最終會被添加到實例上
  • ①訪問數據："實例.屬性名"
  • ②修改數據："實例.屬性名"= "值"
     

1.1.5 開發者工具

安裝Vue開發者工具：裝插件調試Vue應用

(1)通過谷歌應用商店安裝(國外網站)

(2)極簡插件：下載→開發者模式→拖拽安裝→插件詳情允許訪問文件

https://chrome.zzzmh.cn/index

打開 Vue 運行的頁面，調試工具中 Vue欄，即可查看修改數據，進行調試。

1.2 Vue指令

Vue 會根據不同的【指令】，針對標簽實現不同的【功能】

指令：帶有 v-前綴 的 特殊 標簽屬性
 

1.2.1 v-html

作用：設置元素的 innerHTML

語法：v-html= "表達式"


 

總結：

1. 什么是Vue指令呢?

  • 指令就是帶有 v-前綴 的特殊 屬性，不同屬性 對應 不同的功能
  • 學習不同指令 → 解決不同業務場景需求

2.如果需要動態解析標簽,可以用哪個指令?語法?
v-html="表達式"→動態設置元素 innerHTML

1.2.3 v-show / v-if

v-show

作用：控制元素顯示隱藏

語法：v-show= "表達式"  表達式值  true顯示，false隱藏

原理：切換 display:none 控制顯示隱藏

場景：頻繁切換顯示隱藏的場景



 

v-if

作用：控制元素顯示隱藏(條件渲染)

語法：v-if="表達式"       表達式值true顯示，false 隱藏

原理：基于條件判斷，是否創建或移除元素節點

場景：要么顯示， 要么隱藏，不頻繁切換的場景

總結：

  • v-show 底層原理：切換 CSS 的 display:none 來控制顯示隱藏
  • v-if 底層原理：根據判斷條件控制元素的 創建 和 移除
     

1.2.4 v-else / v-else-if

作用：輔助 v-if 進行判斷渲染

語法：v-else     v-else-if = "表達式"

注意：需要緊挨著 v-if 一起使用


 

1.2.5 v-on

作用：注冊事件 = 添加監聽 + 提供處理邏輯

語法：① v-on：事件名= "內聯語句"    ② v-on：事件名= "methods中的函數名"

簡寫：@事件名


 

注意：methods函數內的 this指向Vue實例

v-on 調用傳參

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style>
</head><body><div id="app"><div class="box"><h3>小黑自動售貨機</h3><button @click="buy(5)">可樂5元</button><button @click="buy(10)">咖啡10元</button></div><p>銀行卡余額：{{ money }}元</p>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/93904.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/93904.shtml
英文地址，請注明出處：http://en.pswp.cn/web/93904.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

SCAU學習筆記 - 自科三面前端方向實戰演示

SCAU學習筆記 - 自科三面前端方向實戰演示

本來是準備寫完二面直接開始寫算法三面的&#xff0c;maimai那個封面圖我都做好了。但是可惡的出題人說要等我出完解析再針對性避開出題&#xff0c;所以swan決定把那個先擱置&#xff0c;本文我們先以2023年的自科三面前端方向題為例帶各位快速入門前端三件套&#xff08;因為…
閱讀更多...
前后端聯合實現文件上傳，實現 SQL Server image 類型文件上傳

前后端聯合實現文件上傳，實現 SQL Server image 類型文件上傳

1、前端 Vue3QualityFileInfoDialog.vue<script setup lang"ts" name"QualityFile"> ...... // 上傳&#xff0c;防抖 const onUploadClick debounce(() > {// 模擬點擊元素if (fileInputRef.value) {// 重置以允許重復選擇相同文件fileInputRef…
閱讀更多...
使用安卓平板，通過USB數據線（而不是Wi-Fi）來控制電腦（版本1）

使用安卓平板，通過USB數據線（而不是Wi-Fi）來控制電腦（版本1）

這是一個對延遲和穩定性要求很高的場景。 核心原理是&#xff1a;利用USB數據線&#xff0c;在手機和電腦之間創建一個高速的“虛擬網絡連接”&#xff0c;然后在這個穩定的網絡通道上運行遠程控制軟件。 方案1&#xff1a; 在完全沒有無線網絡&#xff08;Wi-Fi&#xff09;和…
閱讀更多...
linux報permission denied問題

linux報permission denied問題

linux報permission denied問題 一般是沒有可執行權限&#xff0c;需要先添加執行權限 1. 確認文件權限 在你的項目目錄下執行&#xff1a; ls -l ./folder你可能會看到類似&#xff1a; -rw-r--r-- 1 user user 1234 Aug 18 12:00 script.sh注意&#xff1a;這里缺少 x&#xf…
閱讀更多...
Vue深入組件：組件事件詳解2

Vue深入組件：組件事件詳解2

聲明觸發的事件 為了讓組件的用法更清晰（作為文檔），同時讓 Vue 能區分事件與透傳 attribute，推薦顯式聲明組件要觸發的事件。根據組件是否使用 <script setup>，聲明方式有所不同。 使用 <script setup> 時：defineEmits() 宏 在 <script setup> 中，…
閱讀更多...
FLASK項目快速構建

FLASK項目快速構建

Flask 項目構建 exts.py # flask_sqlalchemy from flask_sqlalchemy import SQLAlchemy from flask_mail import Mail from flask_caching import Cache from flask_wtf import CSRFProtect from flask_avatars import Avatars from flask_jwt_extended import JWTManager from…
閱讀更多...
數據結構--2：ArrayList與順序表

數據結構--2：ArrayList與順序表

1.順序表的創建 2.常見操作 3.遍歷 4.擴容機制 5.例子1.順序表的創建在集合框架中&#xff0c;ArrayList是?個普通的類&#xff0c;實現了List接口&#xff0c;具體框架圖如下&#xff1a;2.常見操作代碼…
閱讀更多...
【Kubesphere】K8s容器無法訪問內網xx網絡問題

【Kubesphere】K8s容器無法訪問內網xx網絡問題

問題遇到的現象和發生背景 Kubesphere中運行的一個容器&#xff0c;可以ping通我們公司內網網段172.16.XX.XX&#xff0c;但是在容器內無法ping通192.168.5.XX&#xff0c;但是我在宿主機是可以ping通192.168.5.XX&#xff0c;這個192.168.5.XX是通過xx設備接進來的&#xff0c…
閱讀更多...
【開發語言】Groovy語言：Java生態中的動態力量

【開發語言】Groovy語言：Java生態中的動態力量

博客目錄一、Groovy 的誕生與發展二、核心特性深度解析1. 與 Java 的無縫集成2. 動態類型與可選靜態類型3. 強大的集合操作三、Groovy 在實際開發中的應用場景1. 構建自動化&#xff08;Gradle&#xff09;2. 測試開發&#xff08;Spock 框架&#xff09;3. 腳本任務自動化四、…
閱讀更多...
Obsidian 1.9.10升級

Obsidian 1.9.10升級

概述 Obsidian發布了更新版本1.9.10&#xff0c;是一次比較大的升級&#xff0c;尤其是增加了一些以前沒有的核心插件&#xff0c;尤其是重磅的數據庫功能。雖然可能還是比較初期&#xff0c;但是這意味著OB還是往更好的方向進化了。 本文以一些目前的視頻教程加自己的實際上手…
閱讀更多...
內容審計技術

內容審計技術

一、 內容審計需求背景1.網絡安全法要求明確責任人&#xff1a;制定內部安全管理制度和操作規程&#xff0c;落實安全保護責任。監測、記錄并保留日志&#xff1a;采取監測、記錄網絡運行狀態、網絡安全事件的技術措施&#xff0c;并按照規定留存相關網絡日志不少于六個月。采取…
閱讀更多...
反序列化漏洞

反序列化漏洞

php反序列化 1.什么是序列化和反序列化 office word是程序 doc/docx是數據 保存word文件&#xff1a;程序--保存(序列化)-->數據文件 打開word文件&#xff1a;程序--加載數據文件-->還原(反序列化) 游戲存檔&#xff1a;角色等級&#xff0c;任務&#xff0c;人物坐…
閱讀更多...
Lecture 4 Mixture of experts課程筆記

Lecture 4 Mixture of experts課程筆記

什么是MoE?用&#xff08;多個&#xff09;大型前饋網絡和一個選擇器層取代大型前饋網絡。你可以在不影響浮點運算次數的情況下增加專家數量。 MoE受歡迎的原因 相同的浮點運算次數&#xff0c;更多的參數表現更好訓練混合專家模型&#xff08;MoEs&#xff09;速度更快訓練混…
閱讀更多...
微服務架構的演進：從 Spring Cloud Netflix 到云原生新生態

微服務架構的演進：從 Spring Cloud Netflix 到云原生新生態

過去十年，Spring Cloud 憑借 Netflix 全家桶（Eureka、Ribbon、Hystrix、Zuul 等）幾乎成為 Java 微服務的事實標準。但隨著這些核心組件逐步停止更新或進入維護模式，微服務架構正經歷一場深刻的演進。新的微服務架構更加注重 云原生兼容性、社區活躍度、企業級穩定性和低運維…
閱讀更多...
網絡流量分析——基礎知識

網絡流量分析——基礎知識

文章目錄所需技能和知識TCP/IP 堆棧和 OSI 模型基本網絡概念常用端口和協議IP 數據包和子層的概念協議傳輸封裝環境與設備常見的流量分析工具BPF 語法執行網絡流量分析NTA工作流程NTA工作流程網絡 - 第 1-4 層OSI / TCP-IP 模型尋址機制MAC地址IP 尋址IPv4IPv6IPv6 尋址類型IPv…
閱讀更多...
ansible playbook 實戰案例roles | 實現基于 IHS 的 AWStats 訪問監控系統

ansible playbook 實戰案例roles | 實現基于 IHS 的 AWStats 訪問監控系統

文章目錄一、核心功能描述二、roles內容2.1 文件結構2.2 主配置文件2.3 tasks文件內容三、files文件內容四、關鍵價值免費個人運維知識庫&#xff0c;歡迎您的訂閱&#xff1a;literator_ray.flowus.cn 一、核心功能描述 這個 Ansible Role 的核心功能是&#xff1a;?實現 ?…
閱讀更多...
DELL服務器 R系列 IPMI的配置

DELL服務器 R系列 IPMI的配置

1、iDRAC功能默認都是關閉&#xff0c;需要在BIOS面啟用&#xff0c;首先重啟計算機&#xff0c;按F2然后進入BIOS&#xff0c;選擇iDRAC Setting進行iDRAC配置 2、重置一下idrac卡-重置才能恢復默認密碼 3、進入iDRAC Setting之后&#xff0c;選擇設置網絡Network 4、啟用iDRA…
閱讀更多...
模式組合應用-橋接模式(一)

模式組合應用-橋接模式(一)

寫在前面Hello&#xff0c;我是易元&#xff0c;這篇文章是我學習設計模式時的筆記和心得體會。如果其中有錯誤&#xff0c;歡迎大家留言指正&#xff01;文章為設計模式間的組合使用&#xff0c;涉及代碼較多&#xff0c;個人覺得熟能生巧&#xff0c;希望自己能從中學習到新的…
閱讀更多...
【clion】visual studio的sln轉cmakelist并使用clion構建32位

【clion】visual studio的sln轉cmakelist并使用clion構建32位

我想在linux上運行，所以先轉為cmake工程 例如可以把exe mfc 部分不構建，這樣ubuntu就不用移植。 先轉cmakelist，而后clion完成win32的構建，與vs構建對比，驗證腳本正確性。 Vcxproj2CMake https://github.com/gns333/Vcxproj2CMake cmakeconverter https://github.com/pave…
閱讀更多...
MySQL之分區功能

MySQL之分區功能

序言 隨著業務發展&#xff0c;我們維護的項目數據庫中的數據可能會越來越大&#xff0c;那么單張表的數據變多后&#xff0c;接口查詢效率可能會變慢&#xff0c;那我們就直接照抄大廠常見的分庫分表嗎&#xff1f;—— 當然不是的&#xff0c;分庫分表不是萬能的。 分庫分表…
閱讀更多...
最新文章

Copyright @ 2022~2023