• <pre id="y08ey"><del id="y08ey"><xmp id="y08ey"></xmp></del></pre>
    1. <pre id="y08ey"></pre>
      
      <p id="y08ey"><strong id="y08ey"><small id="y08ey"></small></strong></p>
      <td id="y08ey"><ruby id="y08ey"></ruby></td>
      <p id="y08ey"><strong id="y08ey"><xmp id="y08ey"></xmp></strong></p>
      <pre id="y08ey"></pre>

      <table id="y08ey"></table>
        <track id="y08ey"></track>
      1. 手機: 18919834768
        電話熱線: 0931-7603702
        網站知識
        當前位置: 主頁 > 網站知識

        vue3事件和計算屬性

        發布時間:2023-02-20 21:12:32???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        1.簡單事件
        2.計算屬性
        本節課我們來開始學習 Vue3.x 的事件的入門和計算屬性的用法;
        一.簡單事件
        1. 上節課,我們最后談到了一個新指令:v-on:click,點擊觸發事件;
        <button v-on:click="counter++">+counterbutton>
        <button v-on:click="counter+=2">+counterbutton>
        PS:當我們點擊了按鈕即可實現累加 1,或累加 2 的操作;
        2. 如果觸發的事件業務邏輯較多,那么行內表達式是不夠的,需要觸發固定方法;
        <button v-on:click="addCounter">counter+methodsbutton>
        const App = {
        // 初始數據
        data() {},
        // 事件處理方法
        methods : {
        // 累加方法
        addCounter() {
        // 這里的 this 就是 vue 代理對象
        this.counter++
        }
        }
        }
        PS:所有的方法均可放在 methods 屬性對象里,提供給 v-on 觸發;
        二.計算屬性
        1. 對于插值可以進行簡單運算,可一旦過于復雜,則模版維護將變得異常困難;
        {{firstName + lastName}}
        firstName : 'Mr.',
        lastName : 'Lee'
        2. 上面的例子出現要使用兩個插值,如果假設插值內部還要各種運算,極不方便;
        3. 此時,我們可以用第二套方案,就是使用方法進行返回,把運算和顯示整合起來;
        {{fullName()}}
        methods : {
        // 連接兩個屬性字符串
        fullName() {
        return this.firstName + this.lastName
        }
        }
        PS:第二套方案在復雜性高的情況下優于第一種,并且插值只調用一次即可;
        PS:缺點也很明顯,插值調用必須方法模式(有括號),和屬性方式容易混淆;
        PS:其次,每次都必須執行方法,沒有緩存會在復雜的情況下影響性能;
        4. 那么,系統提供了第三種方法解決了這兩個問題,就是計算屬性;
        {{fullName2}}
        const App = {
        // 初始數據
        data() {},
        // 事件處理方法
        methods : {},
        // 計算屬性
        computed : {
        // 連接三個屬性字符串
        fullName2() {
        return this.firstName + this.LastName
        }
        }
        }
        PS:計算屬性和屬性一樣的調用方式,而方法調用卻需要括號,所以推薦用計算屬性;
        PS:計算屬性具有緩存,當值沒有改變時,不會重新執行方法,而去使用緩存;
        PS:可以參考手冊去了解一下計算屬性緩存的相關細節,本人推薦需要在實戰中體會更好;
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

        建站咨詢 售前咨詢 私人訂制 售后技術

        ? 電話咨詢

        0931-7603702
        (早9:00-晚10:00)

        ? 微信咨詢

        掃碼關注
        點點租

        ? 返回頂部
        午夜无码区在线观看_久久精品国产亚洲一区二区_久久综合日本久久综合88_在线观看国产一区