萬字血書Vue—Vue語法

来源:https://www.cnblogs.com/gfhcg/archive/2023/03/17/17222239.html
-Advertisement-
Play Games

模板語法 插值語法 Mustache插值採用{{ }}，用於解析標簽體內容，將Vue實例中的數據插入DOM中 <h1>Hello {{name}}</h1> 指令語法 指令用於解析標簽，是vue為開發者提供的一套模板語法，輔助開發者渲染頁面的基本結構。 （指令是vue開發中最基礎、最常用、最簡單的知 ...


模板語法

插值語法

Mustache插值採用{{ }}，用於解析標簽體內容，將Vue實例中的數據插入DOM中

 <h1>Hello {{name}}</h1>

指令語法

指令用於解析標簽，是vue為開發者提供的一套模板語法，輔助開發者渲染頁面的基本結構。

（指令是vue開發中最基礎、最常用、最簡單的知識點）（支持綁定簡單的數據值之外，還支持js表達式運算）

內容渲染指令

1、v-text=" " 會覆蓋元素內預設的值、無法寫HTML標簽語句

2、{{ }} 插值表達式（Mustache） 不會覆蓋元素中預設的內容

3、v-html 可以渲染包含HTML標簽的字元串

v-html有安全性問題，在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊；永遠不要再用戶提交的內容上使用v-html。

屬性綁定指令

v-bind: 為元素的屬性動態綁定屬性值

屬性：placeholder、src等

簡寫：:

<a v-bind:href="url">點擊跳轉</a>
<a :href="url">點擊跳轉</a>
事件綁定指令

v-on: 為DOM元素綁定事件監聽

v-on:click=” “、v-on:input、v-on:keyup

事件處理函數，需要在methods節點中進行聲明

簡寫：@、如果事件處理函數的代碼足夠簡單，只有一行代碼，則可以簡寫到行內

事件對象event
<body>
    <div id="app">{{username}}</div>
    <button @click="addcount($event,88)">
        點擊我
    </button>

    <script src="vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                username:'zs',
                count:0
            },
            methods:{
                addcount(e,88){
                    const nowBgColor =e.target.style.backgroundColor
                    console.log(nowB gColor)
                    this.count+=1
                }
            }
        })
    </script>
</body>

綁定事件並傳參，使用（） 小括弧，但會占用event的位置

$event是vue提供的特殊變數用於占位，用來表示原生事件參數對象event，使用e接受

事件修飾符

vue提供事件修飾符，來輔助程式員更方便的對事件的觸發進行控制

  • .stop阻止事件冒泡（）里到外

  • .prevent 阻止預設行為（）比如阻止跳轉

  • .capture以捕獲模式觸發當前事件處理函數（外到里）

  • .self只有在event.target是當前元素自身時觸發事件處理函數

  • .once綁定的事件只觸發一次

  • .passive事件的預設行為立即執行，無需等待事件回調執行完畢

按鍵修飾符

監聽鍵盤事件時，我們經常需要判斷詳細的按鍵，此時可為鍵盤相關的事件添加按鍵修飾符

  • .enter、.delete、.esc、.space、.tab(特殊：只適用於keydown)、.up、.down、.left、.right
  • 系統修飾符（用法特殊）：ctrl、alt、shift、mta 配合keyup使用：按下按鍵的同時需要再按下其他鍵，隨後事件才被觸發；keydown正常觸發事件
  • 也可以使用keyCode去指定具體的按鍵（不推薦）
  • Vue.config.keyCodes.自定義鍵名=鍵碼 可以去定製按鍵別名
雙向綁定指令

v-model 在不操作DOM的情況下，快速獲取表單數據（只能配合表單元素一起使用）

<input type="text" v-model:value="username"/>
<input type="text" v-model="username"/>
v-model 指令的修飾符

方便用戶對輸入的內容進行處理

  • .number自動將用戶輸入值轉化為數值
  • .trim 自動過濾用戶輸入的首尾空白字元
  • .lazy 在change時更新而非input時更新（不實時更新，文本框失去焦點更新）
條件渲染指令

按需控制DOM的顯示和隱藏

v-if =" " 動態創建或移除DOM元素，有更高的切換開銷（重繪和迴流）

v-else-if =" "、v-else =" "

v-show=" " 動態為元素添加或移除display樣式，有更高的初始渲染開銷。

列表渲染指令

v-for=" " 輔助開發者基於一個數組來迴圈渲染相似的UI結構

特殊語法：item in items

<body>
   
    <div id="root">
        <!-- 遍曆數組 -->
        <ul>
            <li v-for="item in persons" :key="item.id">
                {{item.id}}-{{item.name}}-{{item.age}}
            </li>
        </ul>
        <!-- 遍歷對象 -->
        <ul>
            <li v-for="(value,key) of cars" :key="key">
                {{key}}-{{value}}
            </li>
        </ul>
        <!-- 遍歷字元串 -->
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{index}}-{{char}}
            </li>
        </ul>
        <!-- 遍歷指定次數 -->
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{index}}-{{number}}
            </li>
        </ul>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm=new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'張三',age:18},
                    {id:'002',name:'李四',age:17},
                    {id:'003',name:'王五',age:42},
                ],
                cars:{
                    name:'Audi',
                    price:"70W",
                    color:"black"
                },
                str:"hello"

            }
        })
   
    </script>
    
</body>
for in和for of

for in一般遍歷對象，不建議遍曆數組。遍曆數組請使用for of或forEach。

v-for中的索引

（item，index） in items

註：v-for中的item項和index索引都是形參，任意命名

key作用和原理

當列表的數據變化（添加、刪除）時，vue會儘可能復用已存在的DOM元素，從而提升渲染的性能，但這種性能優化策略會導致有狀態的列表無法被正確更新，key的使用將減少不必要的DOM操作，提高更新效率。

解釋：

Vue根據初始數據生成初始虛擬DOM（Vnodes），將虛擬DOM轉為真實DOM，用戶添加新的數據，產生新虛擬DOM（Vnodes），此時將兩份虛擬DOM根據key進行對比（diff 演算法），如果對比一樣的直接復用，將之前的真實DOM直接渲染；不一樣的無法復用，將其生成真實DOM。

  • 如果使用index作為key，diff對比時會完全錯位，所有節點都無法復用，效率降低。
  • 如果不指定key時，vue自動使用遍歷時的索引值index作為key。

為了給vue一個提示，以便它能跟蹤每個節點的身份，需要為每項提供一個唯一的key屬性

image

image

註：

  • key只能是字元串或數字類型

  • key的值必須具有唯一性

  • 建議把數據項id屬性的值作為key的值，將index的值作為key的值沒有任何意義（https://blog.csdn.net/z591102/article/details/106682298/）

  • 建議使用v-for時一定要指定key的值（提升性能，防止列表狀態紊亂）

  • 但不存在對數據的操作，僅是渲染列表用於展示，使用index作為key沒有問題

image

其他內置指令

v-cloak沒有值，配合CSS，解決網速慢、伺服器響應慢時未經解析的模板渲染到頁面上，Vue實例創建並接管容器後，會刪掉該屬性。

[v-cloak]:{
    display:none;
}

v-once沒有值，記錄初始值，在初次動態渲染後，就視為靜態內容，以後數據的改變不會引起v-once所在結構的更新，可以用於性能優化。

v-pre沒有值，跳過其所在節點的編譯過程，可以用它跳過：沒有使用指令語法、插值語法的節點，會加快編譯。

自定義指令

本質：將原生操作DOM進行二次封裝。

<body>
   
    <div id="root">
        <!-- v-big放大10倍 -->
        <h2>當前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍後的n值是：<span v-big="n"></span></h2>
        <button @click="n++">點位n++</button>
        <hr>
        <!-- v-fbind在v-bind基礎上，自動獲得焦點 -->
        <input type="text" v-fbind:value="n">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm=new Vue({
            el:'#root',
            data:{
               n:0,
            },
            directives:{
                //函數式
                //何時會被調用：1、指令和元素成功綁定；2、指令所在的模板被重新解析時
                big(element,binding){
                    element.innerText=binding.value*10
                },
                //錯誤寫法：
                fbind(element,binding){
                    element.value=binding.value
                    element.focus()//.focus()調用時機不對，此時input還未被插入頁面
                },
                //對象式
                fbind:{
                    //指令與元素成功綁定時調用
                    bind(element,binding){
                        element.value=binding.value
                    },
                    //指令所在元素被插入頁面時調用
                    inserted(element,binding){
                        element.focus()
                    },
                    //指令所在模板被重新解析時調用
                    update (element,binding) {
                        element.value=binding.value
                    },
                }

            },
        })
   
    </script>
</body>

註意：

  • 命名多個單詞使用-分隔；
  • 指令中this的指向是window；
  • 自定義指令預設都是局部指令，全局寫法：Vue.directive；

計算屬性

計算屬性本質上就是一個function函數，它可以實時監聽data中數據的變化，並return一個計算後的新值，供組件渲染DOM時使用。

開發者需要以function函數的形式聲明到組件的computed節點中

<template>
  <div>
    <input type="text" name="" id="" v-model.number="count">

    <p>{{count}} 乘以2的值為：{{plus}}</p>//必須當做普通屬性使用
  </div>
</template>

<script>
export default {
    name:'MyCount',
    data(){
        return{
            count:1,
        }
    },
    //必須定義在computed節點
    computed:{
        //必須是一個function函數
        plus(){
            //必須具有返回值
            return this.count*2
        }
        
        //相當於
        
        plus:{
        //當讀取plus，get會被調用，且返回值作為plus的值
        //get何時被調用？1、初次調用plus；2、所依賴的數據發生變化
        get(){
            return this.count*2
        }
      }
    }

}
</script>

側重於得到一個計算的結果，必須有return返回值

計算屬性（computed）vs方法（methods）：

相對於方法，計算屬性會緩存計算結果，只有計算屬性的依賴項發生變化時，才會重新進行運算，因此計算屬性的性能會更好。

watch偵聽器

watch偵聽器允許開發者監視數據的變化，從而針對數據的變化做特定的操作

開發者需要在watch節點之下，定義自己的偵聽器

<script>
export default {
    name:'MyCount',
    data(){
        return{
            username:'',
        }
    },
   watch:{
       //當username發生改變時，調用 handler
       username:{
           handler(newVal,oldVal){
             console.log(newVal,oldVal) 
           }  
       }
      //簡寫
       username(newVal,oldVal){
           console.log(newVal,oldVal)     
       }       
   }
  
   }
</script>

<body>
    <div id="app">{{username}}</div>
    #導入腳本文件
    <script src="vue.js"></script>
    <script>
        const vm=new Vue({
            data(){
            return{
                   username:'zs'
            }
            }
        })
        vm.$mount=('#app')//掛載
        vm.$wtach('username',{ //第二種寫法
            handler(newVal,oldVal){
                console.log(newVal,oldVal)
            }
        })
        //簡寫
        vm.$wtach('username',function(newVal,oldVal){
            console.log(newVal,oldVal)            
        }
        })        
       
    </script>
</body>

應用場景

使用watch檢測用戶名是否可用，監聽username值得變化，並使用axios發起ajax請求，檢測當前輸入的用戶名是否可用

<script>

import axios from 'axios'

export default {
    name:'MyCount',
    data(){
        return{
            username:'',
        }
    },
 watch:{
    async username(newVal,oldVal){
        console.log(newVal,oldVal)
        const {data：res}=await axios.get('https://www.escook.cn/api/finduser'+newVal)
        //await簡化promise實例對象為數據
        console.log(res)
    }
 }

}
</script>
immediate選項

預設組件在初次載入完畢後不會調用watch偵聽器，如果想讓watch偵聽器立即被調用，則需要使用immediate選項

<script>

import axios from 'axios'

export default {
    name:'MyCount',
    data(){
        return{
            username:'',
        }
    },
 watch:{
//不能直接定義成方法，要讓監聽的數據指向一個配置對象
  username:{
    async handler(newVal,oldVal){
     const {data：res}=await axios.get('https://www.escook.cn/api/finduser'+newVal)
        //await簡化promise實例對象為數據
        console.log(res)
},
      //立即觸發watch偵聽器
      immediate:true,
      
 }
 }

}
</script>
deep選項

當watch偵聽的是一個對象，如果對象中的屬性值發生了變化，則無法被監聽到，需要使用deep選項偵聽所有屬性的變化。

<script>

import axios from 'axios'

export default {
    name:'MyCount',
    data(){
        return{
            username:'',
        }
    },
 watch:{
//不能直接定義成方法，要讓監聽的數據指向一個配置對象
  username:{
    async handler(newVal,oldVal){
     const {data：res}=await axios.get('https://www.escook.cn/api/finduser'+newVal)
        //await簡化promise實例對象為數據
        console.log(res)
},
      deep:true,//監視多級結構（對象）中所有屬性的變化
 }
 }

}
</script>

監視多級結構（對象）中單個屬性的變化

<script>

import axios from 'axios'

export default {
    name:'MyCount',
    data(){
        return{
            info:{username:'zs',password:'123456'}
            
        }
    },
 watch:{
//不能直接定義成方法，要讓監聽的數據指向一個配置對象
  'info.username':{//只想監聽info.username的屬性變化
    async handler(newVal,oldVal){
     const {data：res}=await axios.get('https://www.escook.cn/api/finduser'+newVal)
        //await簡化promise實例對象為數據
        console.log(res)
},
   
      deep:true,
 }
 }

}
</script>

計算屬性vs偵聽器

  • computed能完成的功能，watch都可以完成，都能完成的，優先使用computed。
  • watch可以完成的，computed不一定能完成，例如watch可以處理非同步任務。
  • 計算屬性和偵聽器側重的應用場景不同。

  1. 前者側重監聽多個值的變化，最終計算返回一個新值

  2. 後者側重於單個數據的變化，最終執行特定的業務處理，不需要任何返回值

兩個原則：

  • Vue所管理的函數，最好寫成普通函數，這樣this的指向才是vm或組件實例對象，否則指向window。
  • 所有不被Vue所管理的函數（定時器的回調函數、ajax的回調函數、Promise的回調函數），最好寫成箭頭函數，這樣this的指向才是vm或組件實例對象，否則指向window。

綁定樣式

綁定class樣式

<!--字元串寫法，適用於樣式的類名不確定，需要動態指定-->
<h1 class="basic" :class:"className">Hello World!</h1>
<!--數組寫法，適用於樣式的個數和類名都不確定-->
<h1 class="basic" :class:"classArr">Hello World!</h1>
<!--對象寫法，適用於樣式的個數和類名都確定，但要動態覺得用不用-->
<h1 class="basic" :class:"classObj">Hello World!</h1>

綁定style樣式

<!--動態指定-->
<h1 class="basic" :style="{fontSize: fsize+'px';}">Hello World!</h1>
<h1 class="basic" :style="styleObj">Hello World!</h1>
<h1 class="basic" :style="[styleObj1,styleObj2]">Hello World!</h1>

過濾器

（Vue3.x廢棄，用計算屬性、方法代替）

什麼是過濾器？

過濾器（Filters）常用於文本的格式化，本質是一個函數

過濾器應該被添加到js表達式的尾部，由“管道符”進行調用

  • 用於插值表達式
  • 用於v-bind屬性綁定

定義（局部）過濾器

在創建vue實例期間，可以在filters節點中定義過 濾器

私有和全局過濾器

私有過濾器：只能在被vm實例控制的區域下控制

如果想在多個vue實例之間共用過濾器，則可以按照如下格式聲明全局過濾器：

 <script>
        vue.filter('capitalize',(str)=>{
            return str.charAt(0).toUpperCase() + str.slice(1)+'--'
        })
        new Vue...
</script>

註：如果二者衝突以私有過濾器為準，就近原則

連續調用多個過濾器

過濾器可以串聯的地調用

{{message | capitalize | maxlength}

過濾器傳參

過濾器本質是js函數,第一個參數永遠是管道符前面的值，第二個參數開始才是arg1、arg2...

{{message | filterA（agr1,arg2）}
 
vue.filter('filterA',(msg,arg1,aarg2)=>{})

過濾器的相容性

在vue3.x版本中已經剔除了過濾器相關功能，可以使用計算方法或屬性來代替


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

-Advertisement-
Play Games
更多相關文章
  • Linux進程通信 | 消息隊列
    什麼是消息隊列？ 假設你是一個快遞員，你需要將貨物從一個倉庫運到另一個倉庫。但是你發現自己的時間不夠用，需要另外請一個人來幫忙。那麼，你們之間如何進行協作呢？ 一種方式是直接將貨物全部交給對方，但這樣存在風險：對方可能會出現問題，導致貨物丟失或損壞。 而另一種更安全的方式是，你將貨物分批發送給對方， ...
  • day11-MySql存儲結構
    MySql存儲結構 參考視頻：MySql存儲結構 1.表空間 不同的存儲引擎在磁碟文件上的結構均不一致，這裡以InnoDB為例： CREATE TABLE t(id int(11)) Engine = INNODB; 在新表創建的過程中，InnoDB會在磁碟的data目錄下創建與這個表對應的兩個文件 ...
  • MS SQL Server 刪除重覆行數據
    您可以使用以下 SQL 語句刪除 MS SQL Server 表中重覆的行： WITH CTE AS ( SELECT ROW_NUMBER() OVER(PARTITION BY column1, column2, ... columnN ORDER BY (SELECT 0)) RN FROM ...
  • 淺談DWS函數出參方式
    摘要：DWS的PL/pgSQL函數/存儲過程中有一個特殊的語法PERFORM語法，用於執行語句但是丟棄執行結果的場景，常用於一些狀態判斷的場景。 本文分享自華為雲社區《GassDB(DWS)功能 -- 函數出參 #【玩轉PB級數倉GaussDB(DWS)】》，作者：譡里個檔。 DWS的PL/pgSQ ...
  • 大資管行業數字化轉型解決方案 | 行業方案
    大資管包括原銀保監監管下的銀行理財、信托、保險，原證監會監管下的公募基金、私募基金專戶及基金子公司、券商資管以及期貨資管。據統計，2022年底資管行業的資產管理規模也達到了136萬億元。 在《商業銀行理財業務監督管理辦法》《關於規範金融機構資產管理業務的指導意見》等理財新規、資管新規的要求下，大資管 ...
  • 數據湖選型指南｜Hudi vs Iceberg 數據更新能力深度對比
    數據湖作為新一代大數據基礎設施，近年來持續火熱，許多前線的同學都在討論數據湖應該怎麼建，許多企業也都在構建或者計劃構建自己的數據湖。基於此，自然引發了許多關於數據湖選型的討論和探究。但是經過搜索之後我們發現，網上現存的很多內容都是基於較早之前的開源信息做出的結論，在企業調研初期容易造成不准確的印象和 ...
  • 記錄--vue中封裝一個右鍵菜單組件（複製粘貼即可使用）
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 組件介紹 關於web端的右鍵功能常用的地方有表格的右鍵，或者tab標簽的右鍵等，本文記錄一下封裝一個右鍵菜單組件的思路步驟代碼。 程式員除了會用輪子，還要嘗試去貼合自己公司業務場景造輪子。 組件效果圖 我們先看一下右鍵組件的效果圖 組件分 ...
  • 萬字血書Vue-Vue進階
    Vue進階 生命周期 組件運行的過程 組件的生命周期是：組件從創建->運行（渲染）->銷毀的整個過程，是一個時間段 如何監聽組件的不同時刻 vue框架為組件內置了不同時刻的生命周期函數，是他在關鍵時刻幫我們調用的一些特殊名稱的函數，生命周期函數會伴隨著組件的運行而自動調用。 created函數 組件 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類