vue - vue基礎/vue核心內容（終結篇）

来源:https://www.cnblogs.com/heymar/archive/2022/05/03/16219482.html
-Advertisement-
Play Games

今天是vue基礎、vue核心內容第三天，也是最後一天，後面開始進入組件化學習，整個基礎內容以生命周期的結束而結束，不得不說，張天禹把這節課講活了，開始覺得vue是一個有生命的東西，包括前面所說的很多臟活累活都給他做，我們只管調用，說的我都於心不忍如此對待vue了，所以思來想去，我絕對對待它最好的辦法 ...


今天是vue基礎、vue核心內容第三天，也是最後一天，後面開始進入組件化學習，整個基礎內容以生命周期的結束而結束，不得不說，張天禹把這節課講活了，開始覺得vue是一個有生命的東西，包括前面所說的很多臟活累活都給他做，我們只管調用，說的我都於心不忍如此對待vue了，所以思來想去，我絕對對待它最好的辦法，那就是多練練代碼優化，能省就省，意思就是讓他少乾點活。

14.收集表單數據

image-20220503123546590

  • 賬號密碼使用v-model正常收集沒得問題，本身就是收集value的

    image-20220503123636428

  • 單選框只是使用v-model就有問題，vue管理工具返回null，因為v-model本身預設是收集value值的，所以需要給單選框配置value

image-20220503123938454

  • 覆選框覆選框不僅要寫value，而且還要把綁定的值寫為數組形式，覆選框不寫value，vue預設v-model收集的是checked的值，只有當兩個條件滿足，一個數組形式，一個value寫上才會正常收集點擊了覆選框的value值

  • 剩下的都是正常手機，下拉選擇框手機value值，文本域收集value值，註意一下最後一個點擊同意許可協議這裡直接使用預設的checked的值即可

image-20220503131444130

image-20220503131530958

  • 最後可通過提交的點擊事件，或者表單的提交事件將數據發送到伺服器註意通過事件修飾符停止表單預設提交行為，我們一般是把json格式數據發送到伺服器，所以這裡數據一般是這樣定義的

    image-20220503131945764

    這樣一來就需要把之前所有的vue語法前面添加上userInfo.開頭

  • 新增三個v-model的修飾符

    • v-model.trim=""可以將輸入的內容前後空格忽略

    • .number可以將收集的數值轉為數值型，一般是配合表單type：number使用，這個可以限制輸入的內容為數字，但是是字元型，再通過修飾符變為數值型

      image-20220503132348208

    • .lazy失去焦點再獲取數據，比如前面做過的防抖策略，輸入完一段時間再去請求數據，這裡可以給表單元素添加這個修飾符失去焦點才會將數據讀取進來

15.過濾器

完成一個案例顯示格式化的時間，用到一個庫moment專門格式化時間的在這個網站下載[BootCDN][https://www.bootcdn.cn/]

  • 通過計算屬性、methods函數實現

    image-20220503140159912

  • 通過過濾器實現，過濾器其實就跟模板引擎的過濾器一樣，就連語法都一樣，只是在實例裡面添加了全新的配置項：filters

    在vue語法裡面前面的time是管道符後面函數的參數，不用調用，vue會自動調用進去

    image-20220503140518542

    image-20220503140529953

  • filters加參數版，除了前面的預設參數，他也可以自己添加參數，這個時候這個過濾器函數就相當於有兩個參數了image-20220503140726964

    image-20220503140742694

  • 這樣一來我們上一條代碼是不是出現錯誤了，因為上一條沒有第二個參數，format格式就沒得

image-20220503140841086

註意：這裡可以使用一個es6形參賦值語法，如果第二個參數有那str就以第二個參數為準，如果沒得就以我們在形參裡面定義的預設值為準

image-20220503141017642

image-20220503141028726

  • 我們的過濾器可以一層一層來處理，處理完一層將返回的值可以繼續交給下一個過濾器繼續處理image-20220503141306284

    image-20220503141319874

    image-20220503141326195

  • 在vue實例裡面filters定義的過濾器都是局部過濾器，雖然我們vm實例只有一個但以後會碰到組件化開發，a組件是用不到b組件裡面定義的filters過濾器的，所以怎麼來定義全局過濾器

    image-20220503141609619

  • 過濾器除了可以用在插值語法，還可以用在v-bind綁定語法，只能是v-bind，v-model或其他都不行(不常用 )

image-20220503141812941

總結：適用於一些簡單的邏輯處理，複雜的還是用計算屬性等實現

16.內置指令

16.1 v-text

向其所在的標簽渲染文本內容，會替換掉整個標簽裡面的內容，插值語法只是在某個位置插入進去

image-20220503142757799

16.2 v-html

同上，但是這個支持標簽結構解析

註意：該指令語法有安全性問題，在網站上如果要動態渲染任意html是很危險的，容易遭受xss攻擊

image-20220503145208437

v-html，永遠不要用在用戶提交的內容上

16.3 v-cloak

一個特殊屬性，會等待vue接管容器後就會被vue刪除，配合css [屬性選擇器]可以解決網速慢vue還沒載入（這種情況頁腳js阻塞因為js載入太慢而導致頁面堵車了，無法進行下去），頁面先出來一些｛｛name｝｝等字樣的情況

image-20220503150758725

image-20220503150844577

16.4 v-once

也是沒有值得指令語法，在所有節點初次動態渲染後就為靜態內容了不再變了，以後數據的改變不會引起v-once的更新有利於優化性能

image-20220503151227108

16.5 v-pre

可以跳過vue的編譯過程，可用它來跳過沒有使用指令語法、插值語法的節點，加快編譯

image-20220503151536204

image-20220503151446829

17.自定義指令

新增配置對象：directives，同時裡面為我們的v-什麼什麼的指令但是不用寫v-，當有細節處理應該是為一個對象這裡，如果沒有太多細節也可以直接簡寫為一個函數，接收兩個參數，第一個參數使用這個自定義指令的標簽，第二個參數這個指令綁定的表達式的對象，是一個對象裡面包含他的值，名字等等

image-20220503154154872

image-20220503154221027

自定義的指令何時被調用？指令與元素成功綁定時，也就是第一次渲染頁面時，第二種情況是當頁面模板重新解析時，也就是不管哪裡發起的重新解析，這個directives裡面的對象或者函數都會被重新調用

剛纔說的函數不能處理一些細節上的問題，要對象形式才可以，這裡有一個需求，我一點擊n自加，同時有一個input裡面的n跟著自加，這個邏輯按照按照上面的可以完成，但是還有一個需求，我需要一來input就是獲取焦點狀態

image-20220503155737729

這個時候再用函數的方式就不行了，為什麼，需要考慮到vue的一個工作原理，我們說這個directives的觸發時機在於指令與元素成功綁定時，而問題就出現在這裡，vue首先會把vue模板拿來解析，然後這個時候指令和元素成功綁定了，這個時候就會去執行這個函數，但是這個時候整個過程，整個dom還是在我們的虛擬dom當中，vue還沒做完工作，所以頁面上還沒出現input，你給他獲取焦點自然也不會奏效

所以現在要將自定義指令寫為對象形式，而且三個函數三個時期，還有這三個名字都不不能改動的，必須為這樣

image-20220503161016691

所以：我們一般bind函數和update函數都是做相同的事，結合上面簡寫形式兩種觸發時機，所以簡寫形式就是寫的bind和update函數裡面的邏輯

註意

  • 名稱上的註意點：我們取名自定義指令如果是兩個單詞的不能才去駝峰命名法，需要將中間用-分割，同時在directives裡面回歸原始定義方法，也就是屬性名加引號，後面函數還是可以簡寫

    image-20220503163559610

    image-20220503163606446

  • 不管是簡寫形式還是對象形式裡面的this都為window

  • 我們在directives定義的指令是局部指令，如果其他組件需要用到這個指令需要定義全局指令，跟過濾器一樣定義方法（都沒有了s，在實例裡面都有s）

    image-20220503163758741

18.生命周期

18.1 引出生命周期

首先第一個註意點 動態綁定，如果裡面是一組一組的鍵值對形式，就比如style樣式需要寫為對象形式

image-20220503172318465

由一個案例引出來生命周期，需要頁面一進入這個h2標題就產生一個漸變的效果，不需要任何觸發點，自己就會觸發

image-20220503172808728

生命周期函數：我的理解，首先mounted函數：Vue完成模板解析並把初始的真實DOM元素放入頁面後也就是掛載完畢後就會條用這個mounted，相當於他只會執行一次，vue的一生當中只會執行一次，過了就過了，在我們vue的整個期間會有很多節點，很多關鍵節點，就比如這個解析完畢放入真實DOM就是一個節點，在這些關鍵節點vue回去調用一些特殊的函數，整個函數完成了vue的一個周期一個完整的生命周期，所以這些函數就叫做生命周期函數（也叫生命周期、生命周期鉤子）

18.2 解析生命周期（掛載流程）

Vue 實例生命周期

  • 掛載流程是從new Vue開始到mounted生命周期函數結束，首先一切萬物都是從new Vue一個實例開始，先是進入初始化，在這個初始化階段，vue會把一些生命周期的函數比如什麼名字、定義在哪裡還有我們的一些事件的定義，比如事件修飾符這些初始化好，但是要註意，這個時候還沒有解析到我們的data數據，數據代理還沒開始，緊接著這個時候就出現了第一個生命周期函數——beforeCreate

    註意一下怎麼去打斷點，一個一個得看這個階段之前會發生些啥

    image-20220503180322250

    image-20220503180515064

    可以看到頁面沒有解析，vm實例也沒有_data這個數據

  • 接下來開始第二次初始化，這個階段開始做數據代理，數據監測，同時第二個生命周期函數created

    image-20220503181000701

    這個時候確實可以看到了_data數據

    然後開始判斷有沒有el這個選擇項，如果有就判斷有沒有template模板，先說一下這個模板，這個模板是定義在vm實例裡面的，當我們vue執行完畢就會把這個模板放入容器

    image-20220503181436022

    image-20220503181450769

    他和我們寫在html結構裡面的有點區別就是我們寫在html裡面會有root這個div吧，但是這個必須用一個div或者一個盒子來包著，然後這個div會代替root這個容器

繼續我們的生命周期，如果發現沒有template模板，就會去解析我們的el這個容器作為模板，若果有模板就去解析模板，這個階段是vue開始解析模板，生成虛擬dom頁面還不能顯示解析好的內容，這個階段一齣來就會有一個生命周期函數beforeMount，這個時候頁面呈現的是未經vue編譯的dom結構，所有對dom的操作都不會奏效，因為我們的虛擬dom馬上要插入頁面了

  • 接下來回去創造一個vm的api $el來放我們的el裡面的所有標簽，這個api的作用就是當我們比較虛擬dom的時候發現萬一有元素可以復用，那你也要拿得出來能復用的dom在哪裡才行，所以就在這裡保存的，這個時候就來到了另一個事件，mounted，現在頁面中已經有編譯好的dom了，至此初始化結束，vue的掛載流程結束，在這個函數裡面可以 開啟定時器、發送網路請求、訂閱消息、綁定自定義事件等

    image-20220503182339525

18.3 解析生命周期（更新流程）

  • 掛載完畢後會去等待數據的改變，當我們數據改變時，會有一個函數，beforeUpdate這個時候數據是新的，但是頁面還沒有反應過來，i即頁面尚未和數據保持同步

    image-20220503203137578

  • 隨後馬上就開始生成新的虛擬DOM然後會和舊的虛擬DOM相比較，完成最終頁面更新

  • 然後又會有一個生命周期函數 updated此時數據是新的，頁面也是最新的，頁面和數據保持同步

image-20220503203956807

18.4 解析生命周期（銷毀流程）

是否執行vm.$destroy,如果執行了這一句，馬上就會進入 beforeDestroy聲明周期函數，一般在這個函數的時候，vm中所有的data、methods都可以訪問，但是最好也不要修改刪除什麼數據了，因為已經沒有意義了，生命已經走到了最後，好好修繕一下後事吧，比如可以關閉定時器、取消訂閱消息、解綁自定義時間等收尾操作

最後過了這一個事件之後，這個vm實例就被銷毀了，身上的全部指令和事件監聽器（自定義事件）全部失效

18.5 總結

image-20220503210125144

出生生日好比掛載完畢，一切要開始的動作可以寫在這裡，將要永別好比將要銷毀，把我們之前創造的一些東西，在這裡處理一下

  • vm.$destroy 相當於自殺的功能，一般其實不得自己調用這種方法，大多數情況都是他殺，他殺需要組件支持，後面再說，這裡只能勉強自殺，完善前面的透明度案例

    image-20220503211523647

    為什麼可以在點擊事件就停止定時器，非要在銷毀的生命周期函數停止，因為這裡是模擬的自殺操作，很多時候是他殺，先不說他殺有沒有觸發這個事件，不管誰殺，你被銷毀了，那都要走beforeDestroy這個函數的流程，所以一切善後工作放在這裡是最好的


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • dba+開源工具：MHA復刻版，輕鬆實現MySQL高可用故障轉移（附下載）
    由於MHA（mha4mysql-manager）工具在2018年已經停止維護更新，且不支持GTID複製模式，在原版基礎上增補功能難度較大，因此考慮將其重構。 ...
  • 資料庫性能優化8大通用方案
    毫不誇張地說，咱們後端工程師，無論在哪家公司，呆在哪個團隊，做哪個系統，遇到的第一個讓人頭疼的問題絕對是資料庫性能問題。如果我們有一套成熟的方法論，能讓大家快速、準確的去選擇出合適的優化方案，我相信能夠快速準備解決咱們日常遇到的80%-90%的性能問題。 從解決問題的角度出發，我們得先瞭解到問題的原... ...
  • Centos安裝mysql57
    1.1 MySQL安裝 1.1.1 下載wget命令 yum -y install wget 1.1.2 線上下載mysql安裝包 wget https://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 1.1.3 安裝My ...
  • InnoDB數據存儲結構
    MySQL伺服器上 存儲引擎 負責對錶中數據的讀取和寫入工作，不同存儲引擎中 存放的格式 一般是不同的，甚至有的存儲引擎(Memory)不用磁碟來存儲數據。 頁 (Page) 是磁碟和記憶體之間交互的基本單位 ，也就是說資料庫管理存儲空間的基本單位是頁，資料庫I/O操作的最小單位是頁 (InnoDB頁 ...
  • 大數據在車聯網行業的實踐與應用
    **導讀：**聯友科技是一家旨在提供在汽車行業全價值鏈解決方案的科技公司。公司以數字化、智能零部件以及智能網聯為三大核心業務領域，涵蓋研發/製造/營銷等領域的信息化產品、系統運行維護服務、雲服務、大數據分析服務、智能網聯及數字化運營服務、車載智能部件及汽車設計等業務。本次分享會圍繞以下四點展開： 車 ...
  • ClickHouse 對付單表上億條記錄分組查詢秒出, OLAP應用秒殺其他資料庫
    1. 啟動並下載一個clickhouse-server, By default, starting above server instance will be run as default user without password. docker run -d --name ch-server - ...
  • iOS 微信、支付寶、銀聯支付組件的進一步設計
    前言 有段時間沒寫技術文章了，一是因為工作太忙，再者因為本人文筆實在一般。最近終於閑下來，本著分享的目的將一些組件設計上的心得與大家分享。 本篇文章是基於原有一篇關於支付文章的進一步優化設計，所以在閱讀本篇文章前還是建議先移步到那篇文章。 文章地址： 微信、支付寶、銀聯、Paypal 支付組件封裝 ...
  • js函數與對象關係快速記憶
    js中關於原型和原型鏈有 __proto__ 、prototype、constructor 頻頻出現在面試題中，但是記得多了反而容易記混。 這裡簡單總結下每個屬性的使用場景，方便記憶。 對象和函數都有 __proto__，對象的 __proto__指向構造函數的prototype，構造函數的__pr ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類