Vue學習系列(三)——常用指令方式

来源:https://www.cnblogs.com/i3yuan/archive/2019/10/27/11747017.html
-Advertisement-
Play Games

前言 在上一篇中，我們已經對組件有了更加進一步的認識，從組件的創建構造器到組件的組成，進而到組件的使用,.從組件的基本使用、組件屬性，以及自定義事件實現父子通訊和巧妙運用插槽slot分發內容，進一步的認識到組件在Vue中的核心地位.。 而今天，我們將對vue中的基本指令進行瞭解彙總，何為指令？ 指令 ...


前言

     在上一篇中，我們已經對組件有了更加進一步的認識，從組件的創建構造器到組件的組成，進而到組件的使用,.從組件的基本使用、組件屬性，以及自定義事件實現父子通訊和巧妙運用插槽slot分發內容，進一步的認識到組件在Vue中的核心地位.。

     而今天，我們將對vue中的基本指令進行瞭解彙總，何為指令？

指令在Vue中是個很重要的功能，在Vue項目中是必不可少的。根據官網的介紹，指令 (Directives) 是帶有 v- 首碼的特殊屬性。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。

內容

今天的內容，是對Vue指令進行說明，什麼是指令，以及常用的指令方式和在開發中使用的方式

 

根據常用的指令，進行歸類總結，依據不同的方式，形成不同的表達方式，大致可分為以下這些，具體詳細的很有很多，歡迎指點

 

基本

一、插值表達式

 （一）V-text: 更新解析標簽包含的文本，輸出文本

<div id="app">
     <div v-text="message"></div>
</div>
   <script>
      new Vue({
       el: '#app',
       data: {
         message: 'vue的初次學習'
        }
      })
  </script>

 （二） V-Html: 解析html標簽，用於輸出html 代碼

<div id="app">
     <div v-text="message"></div>
</div>
 <script>
      new Vue({
       el: '#app',
       data: {
         message: '<h1>vue的初次學習</h1>'
        }
      })
 </script>

 （三）  {{...}}（雙大括弧）:

<div id="app">
   <div>{{ message }}</div>
 </div>
<script>
     new Vue({
       el: '#app',
       data: {
          message: 'vue的初次學習'
        }
     })
</script>

二、條件判斷式

(一)    V-show ：用來控制元素的顯示/隱藏 ，主要是控制元素的display css屬性的。v-show 指令的取值為true/false，分別對應著顯示/隱藏

 <li class="nav-item" v-show="isShow">
       <a href="/ ">艾三元</a>
  </li>

 <script type="text/javascript">
     new Vue({
       el: '#app',
       data: {
            isShow: false
        }
     })
    </script>

(二)   v-if 、v-else-if、 v-else 指令:  v-if 指令的取值是為true或false,通過一定的條件，控制元素是否被渲染出來。

      <div id="app">
            <div v-if="seen>10">現在你看到我了</div>
                           <div v-else-if="seen>6"> 
                <p>哈哈哈，你又看到我了！！！</p>
            </div>
       <div v-else>現在你看到我了</div>

        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    seen:5
                }
            })
        </script>

註意：

1、    v-show 其用法和 v-if 相同也可以設置元素的顯示或隱藏。但是不具備條件判斷功能

2、    v-else、v-else-if 可以給v-if 設置一個 else 模塊、else-if模塊

3、    v-else 、v-else-if 必須要跟在 v-if 或v-else-if 模塊後面

三、迴圈語法式

(一)   V-for: 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組並且 site 是數組元素迭代的別名(有時候，我們的data中的存放的數據不是個簡單的數字或者字元串，而是數組Array類型，這個時候，我們要把數組的元素展示在視圖上，就需要用到vue提供的 v-for 指令，來實現列表的渲染)

迭代數組：

      <div id="app">
            <ol>
                <li v-for="site in sites">
                    {{ site.name }}
                </li>
            </ol>
       </div>

        <script>
            new Vue({
               el: '#app',
                data: {
                    sites: [
                        {name: 'i3yuan'},
                        {name: 'Google'},
                        {name: 'baidu'}
                        ]
                }
            })
        </script>

屬性：

<div v-for="(val, key, i) in userInfo">

{{val}} --- {{key}} --- {{i}}

</div>   

其中：【userinfo】是一個對象

迭代數字

<p v-for="i in 10">這是第 {{i}} 個P標簽</p>

四、屬性綁定式

 （一）v-bind:綁定屬性的指令。動態屬性，動態綁定DOM元素的屬性,就是在特性中存在變數。

   三種方法：

   1、對象型  '{red:isred}' 

   2、三元型   'isred?"red":"blue"'

   3、數組型  '[{red:"isred"},{blue:"isblue"}]'

<input type="button" value="按鈕" v-bind:title="mytitle + 'ai'">

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            mytitle: '這是一個自定義title'
        },
        methods: {
            show: function() {
                alert('Hello')
            }
        }
    })
</script>

五、事件監聽式

 (一)   v-on: 綁定事件監聽器。事件類型由參數給標簽綁定函數，可以縮寫為@，例如綁定一個點擊函數  函數必須寫在methods裡面

<div id="app">
      <!-- `show` 是在下麵定義的方法名 -->
      <button v-on:click="show">show</button>
</div>
<script>
var app = new Vue({
            el: '#app',
            data: {
                name: 'demo'
            },
            // 在 `methods` 對象中定義方法
            methods: {
                show: function(event) {
                    // `this` 在方法里指當前 Vue 實例
                    alert('Hello ' + this.name + '!')
                    // `event` 是原生 DOM 事件
                    if(event) {
                        alert(event.target.tagName)
                    }
                }
            }
        })
</script>

（二）事件修飾符

1. @click.stop       阻止冒泡

<div id=’app’>

         <!-- 使用  .stop  阻止冒泡 -->

    <div class="inner" @click="div1Handler">

        <input type="button" value="戳他" @click.stop="btnHandler">

     </div>

</div>

2. @click.prevent    阻止預設事件,並阻止右鍵點擊

<!-- 使用 .prevent 阻止預設行為 -->

<a href="http://www.baidu.com" @click.prevent="linkClick">有問題，先去百度</a>

3. @click.capture    添加事件偵聽器時使用事件捕獲模式

<!-- 使用  .capture 實現捕獲觸發事件的機制 -->

<div class="inner" @click.capture="div1Handler">

     <input type="button" value="戳他" @click="btnHandler">

</div>

4. @click.self       只當事件在該元素本身（比如不是子元素）觸發時觸發回調

<!-- 使用 .self 實現只有點擊當前元素時候，才會觸發事件處理函數 -->

<div class="inner" @click.self="div1Handler">

       <input type="button" value="戳他" @click="btnHandler">

</div>

5. @click.once      事件只觸發一次

<!-- 使用 .once 只觸發一次事件處理函數 -->

<a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a>

（三） 按鍵修飾符

允許為v-on在監聽鍵盤事件時添加按鍵修飾符

<input v-on:keyup.enter="submit">
V-on:keydown--- @keydown.left/@keydown.right/@keydown.up/@keydown.down
<input v-on:keydown.left=”submit”>

六、樣式動態式

(一)   Class屬性的綁定：

1. 根據數據的值，載入出我們對應的Class值。

<div id="app">
    <div v-bind:class="{ active: isActive }"></div>
</div>
<style>
            .active {
                width: 100px;
                height: 100px;
                background: green;
            }
</style>
<script>
   new Vue({
        el: '#app',
        data: {
             isActive: true
           }
         })
 </script>

2.根據數據方式，修改class實現多種樣式。即v-bind:class={'',''} 綁定數組的方式

<div id="app">
      <div v-bind:class="[activeClass, errorClass]"></div>
       <!--另一種方式-->
      <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>
<style>
   active {
       width: 100px;
       height: 100px;
       background: green;
    } 
.text-danger {
                background: red;
    }
</style>
<script>
 new Vue({
el: '#app',
      data: {
        isActive: true,
        activeClass: 'active',
        errorClass: 'text-danger'
        }
      })
    </script>

(二)   Style屬性的綁定——內聯樣式：v-bind:style

CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

 1. 直接設置樣式：

<div id="app">
     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">測試內聯樣式</div>
</div>

 2. 綁定樣式對象：

<div id="app">
      <div v-bind:style="styleObject"></div>
</div>
<script>
    new Vue({
       el: '#app',
       data: {
        styleObject: {
        color: red,
        fontSize: '10px'
       }
      }
    })
</script>

  3.綁定多個樣式對象：

<div id="app">
      <div v-bind:style="[baseStyles, overridingStyles]"></div>
</div>
<script>
    new Vue({
      el: '#app',
       data: {
           baseStyles: {
              color: red,
               fontSize: '10px'
           },
            overridingStyles: {
               'font-weight': 'bold'
               }
            }
          })
</script>

註意：一個包含多個值的數組，常用於提供多個帶首碼的值，
例如：<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
這樣寫只會渲染數組中最後一個被瀏覽器支持的值。在本例中，如果瀏覽器支持不帶瀏覽器首碼的 flexbox，那麼就只會渲染 display: flex。

七、自定義指令

Vue除了內置的預設指令以外，也允許註冊自定義指令，當需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令

一、註冊方式

1.全局註冊方式：

<input v-focus>
// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

2.局部註冊方式;

<input v-focus>
// 註冊一個全局自定義指令 `v-focus`
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

二、鉤子函數

// 鉤子函數的使用
Vue.directive("demo",{
        // 自定義指令第一次綁定到元素時調用
        bind:function(){
            console.log("自定義指令第一次綁定到元素時調用")
        },
        //這裡指的是inserted函數中定義的效果實現才被調用（被綁定元素插入父節點時調用）
        inserted:function(el){
            el.style.color = 'red'
            console.log("也就是當自定義指令的元素上的文字變成紅色就調用")
        },
        // 綁定的元素更新時調用
        // 修改前: 綁定的元素是<div v-test>自定義指令的學習</div>
        // 修改後: 綁定的元素是<div v-test>自定義指令的學習與使用</div>，改變時（註意是改變時，不是改變後，改變後觸發的鉤子函數是下麵的componentUpdated函數）觸發
        update:function(){
            console.log("綁定的元素更新時調用")
        },
        // 綁定的元素更新後調用
        componentUpdated:function(){
            console.log("綁定的元素更新後調用")
        },
        // 自定義指令和dom元素解綁後執行
        unbind:function(){
            console.log("自定義指令和dom元素解綁後執行（也就是v-text自定義指令在dom元素上移除後）")
        }
})

三、鉤子函數參數

  • el：指令所綁定的元素，可以用來直接操作 DOM 。
  • binding：一個對象，包含以下屬性：
    • name：指令名，不包括 v- 首碼。
    • value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
    • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
    • expression：字元串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
    • arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
    • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
  • vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來瞭解更多詳情。
  • oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

註意：除了 el 之外，其它參數都應該是只讀的，切勿進行修改。如果需要在鉤子之間共用數據，建議通過元素的 dataset 來進行。

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
  bind: function (el, binding, vnode) {  //這裡的el指的就是當前指令綁定的DOM元素;   binding //返回的是一個對象，包含有以下屬性：
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

 四、動態指令參數

指令的參數可以是動態的。

例如，在 v-mydirective:[argument]="value" 中，argument 參數可以根據組件實例數據進行更新！這使得自定義指令可以在應用中被靈活使用。

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})

總結

 1.以上是vue中，常用的基本指令，不同的指令有著不同的效果，實現的方式不一樣，所能展現的功能也不同，因此，通過使用指令，可以更好的提高開發效率

2.參考官方文檔

3.下一篇將對Vue的生命周期進行詳細說明。

 


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

-Advertisement-
Play Games
更多相關文章
  • MySQL 事務提交 --不良好的事務習慣。
    MySQL 事務提交 --不良好的事務習慣 我們知道"事務"是資料庫區別於文件系統的重要特性之一。MySQL的InnoDB引擎中的事務也完全符合ACID(原子性 一致性 隔離性 持久性)的特性。事務以及事務提交等一些內容不可避免的會出現在我們的日常工作當中。這篇文章我們就來簡單的聊聊一些不良好的事務 ...
  • 資料庫中的表連接
    當需要同時顯示多個表中的欄位時，可以用表連接來實現。表連接分為內連接和外連接。 一、內連接：只返回兩張表中互相匹配的記錄。（select name,deptname from emp,dept where emp.deptno=dept.deptno;） 二、外連接：返回其中一張表的全部數據，哪怕不 ...
  • “無處不在” 的系統核心服務 —— ActivityManagerService 啟動流程解析
    本文基於 Android 9.0 , 代碼倉庫地址 ： "android_9.0.0_r45" 系列文章目錄： "Java 世界的盤古和女媧 —— Zygote" "Zygote 家的大兒子 —— SystemServer" "Android 世界中，誰喊醒了 Zygote ？" 文中相關源碼鏈接： ...
  • HTML連載45-浮動元素脫標、排序規則、貼靠現象
    一、浮動元素脫標 1.什麼是浮動元素脫標 脫標：脫離標準流。 當某一個元素浮動之後，那麼這個元素看上去就像被從標準流中刪除了一樣 2.浮動元素脫標之後有什麼影響 如果前面一個元素浮動了，而後面的一個元素沒有浮動，那麼這個時候前面的一個元素就會蓋住後面的一個元素。前後如果反了沒事 舉例： 二、浮動元素 ...
  • 最詳細的原生js實現ajax的封裝
    1. ajax的介紹 1.1 含義 ajax 的全稱是Asynchronous JavaScript and XML 簡單理解下:ajax就是非同步的js和服務端的數據 1.2 組成 非同步的js:事件,對象等 其他js:數據處理和解析的js 伺服器的載體:xhr對象 服務端的數據:json,xhr,h ...
  • vue項目搭建通過vue-cli包括組件路由的使用實現基本的前端項目全流程
    github上項目地址：https://github.com/comonly/javaweb_blog/tree/master/blog_diverse_frontend 具體搭建流程及實現方式：http://comonly.cn/p/1129.html 項目內容 1. 項目通過：vue init ...
  • JavaScript Drum kit
    用 JavaScript 實現網頁鼓樂器，相關的初始代碼在 JavaScript30 官網和 GitHub 上已經存在。我把 sound 文件夾下的音頻全部替換掉了，一些相關解釋也直接在註釋中標明。 下麵是最終成品地址，可能有些卡頓，音頻載入也比較慢： 結果展示 index.html: <!DOCT ...
  • 如何使用js實現輪播圖
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=" ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類