萬字血書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
更多相關文章
  • 什麼是消息隊列? 假設你是一個快遞員,你需要將貨物從一個倉庫運到另一個倉庫。但是你發現自己的時間不夠用,需要另外請一個人來幫忙。那麼,你們之間如何進行協作呢? 一種方式是直接將貨物全部交給對方,但這樣存在風險:對方可能會出現問題,導致貨物丟失或損壞。 而另一種更安全的方式是,你將貨物分批發送給對方, ...
  • MySql存儲結構 參考視頻:MySql存儲結構 1.表空間 不同的存儲引擎在磁碟文件上的結構均不一致,這裡以InnoDB為例: CREATE TABLE t(id int(11)) Engine = INNODB; 在新表創建的過程中,InnoDB會在磁碟的data目錄下創建與這個表對應的兩個文件 ...
  • 您可以使用以下 SQL 語句刪除 MS SQL Server 表中重覆的行: WITH CTE AS ( SELECT ROW_NUMBER() OVER(PARTITION BY column1, column2, ... columnN ORDER BY (SELECT 0)) RN FROM ...
  • 摘要:DWS的PL/pgSQL函數/存儲過程中有一個特殊的語法PERFORM語法,用於執行語句但是丟棄執行結果的場景,常用於一些狀態判斷的場景。 本文分享自華為雲社區《GassDB(DWS)功能 -- 函數出參 #【玩轉PB級數倉GaussDB(DWS)】》,作者:譡里個檔。 DWS的PL/pgSQ ...
  • 大資管包括原銀保監監管下的銀行理財、信托、保險,原證監會監管下的公募基金、私募基金專戶及基金子公司、券商資管以及期貨資管。據統計,2022年底資管行業的資產管理規模也達到了136萬億元。 在《商業銀行理財業務監督管理辦法》《關於規範金融機構資產管理業務的指導意見》等理財新規、資管新規的要求下,大資管 ...
  • 數據湖作為新一代大數據基礎設施,近年來持續火熱,許多前線的同學都在討論數據湖應該怎麼建,許多企業也都在構建或者計劃構建自己的數據湖。基於此,自然引發了許多關於數據湖選型的討論和探究。但是經過搜索之後我們發現,網上現存的很多內容都是基於較早之前的開源信息做出的結論,在企業調研初期容易造成不准確的印象和 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 組件介紹 關於web端的右鍵功能常用的地方有表格的右鍵,或者tab標簽的右鍵等,本文記錄一下封裝一個右鍵菜單組件的思路步驟代碼。 程式員除了會用輪子,還要嘗試去貼合自己公司業務場景造輪子。 組件效果圖 我們先看一下右鍵組件的效果圖 組件分 ...
  • Vue進階 生命周期 組件運行的過程 組件的生命周期是:組件從創建->運行(渲染)->銷毀的整個過程,是一個時間段 如何監聽組件的不同時刻 vue框架為組件內置了不同時刻的生命周期函數,是他在關鍵時刻幫我們調用的一些特殊名稱的函數,生命周期函數會伴隨著組件的運行而自動調用。 created函數 組件 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:在C#中,++i和i++都是自增運算符,其中++i先增加值再返回,而i++先返回值再增加。應用場景根據需求選擇,首碼適合先增後用,尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中,++i 和 i++ 都是自增運算符,但它們在操作上有細微的差異,主要體現在操作的 ...
  • 上次發佈了:Taurus.MVC 性能壓力測試(ap 壓測 和 linux 下wrk 壓測):.NET Core 版本,今天計劃準備壓測一下 .NET 版本,來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能,以便後續持續優化改進。 為了方便對比,本文章的電腦環境和測試思路,儘量和... ...
  • .NET WebAPI作為一種構建RESTful服務的強大工具,為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時,正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性,如[FromRoute]、[FromQuery]和[FromBody],用 ...
  • 原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • 引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入,上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試,今天用這個示例來演示一下如何用Bogus創建模擬數據 ,和 EFCore 的種子數據生成 Bogus 的優 ...
  • 一、前言 在自己的項目中,涉及到實時心率曲線的繪製,項目上的曲線繪製,一般很難找到能直接用的第三方庫,而且有些還是定製化的功能,所以還是自己繪製比較方便。很多人一聽到自己畫就害怕,感覺很難,今天就分享一個完整的實時心率數據繪製心率曲線圖的例子;之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • 如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式,但發現 App.xaml 中定義的資源沒有被正確載入,那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣,當你創建 Ap ...
  • 一:背景 1. 講故事 上個月有個朋友在微信上找到我,說他們的軟體在客戶那邊隔幾天就要崩潰一次,一直都沒有找到原因,讓我幫忙看下怎麼回事,確實工控類的軟體環境複雜難搞,朋友手上有一個崩潰的dump,剛好丟給我來分析一下。 二:WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 前言 .NET生態中有許多依賴註入容器。在大多數情況下,微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器,使用很方便。 但是筆者在使用中一直有一個頭疼的問題:服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響,但是內置容器支持註冊開放泛型服 ...
  • 一、前言 在項目開發過程中,DataGrid是經常使用到的一個數據展示控制項,而通常表格的最後一列是作為操作列存在,比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中,預設只支持固定左側列,這跟大家習慣性操作列放最後不符,今天就來介紹一種簡單的方式實現固定右側列。(這裡的實現方式參考的大佬 ...