Vue 2.0基礎語法：系統指令

来源:https://www.cnblogs.com/smyhvae/archive/2018/04/05/8721471.html
-Advertisement-
Play Games

本文最初發表於 "博客園" ，併在 "GitHub" 上持續更新 前端的系列文章 。歡迎在GitHub上關註我，一起入門和進階前端。 以下是正文。 Vue初體驗 新建一個空的項目，引入vue.js文件。寫如下代碼： 顯示效果： 如果我們在控制台輸入 ，頁面會 自動更新 name的值。 下麵來講一下V ...


本文最初發表於博客園，併在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。

以下是正文。

Vue初體驗

新建一個空的項目，引入vue.js文件。寫如下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue的版本：2.5.15-->
    <script src="vue.js"></script>
</head>
<body>
<!--這個div區域就是MVVM中的 View-->
<div id="div1">
    {{name}}
</div>
</body>

<script>
    //new出來的對象就是MVVM中的 View Module
    var myVue = new Vue({
        el: '#div1', //當前vue對象將接管上面的div區域
        data: {//data就是MVVM中的 module
            name: 'smyhvae'
        }
    });
</script>
</html>

顯示效果：

如果我們在控制台輸入myVue.data+='123'，頁面會自動更新name的值。

下麵來講一下Vue的各種系統指令。

v-on：註冊事件

v-on 的用法舉例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本：2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <!--這個div區域就是MVVM中的 View-->
  <div id="div1">
    <!-- 給button節點綁定按鈕的點擊事件 -->
    {{name}}
    <button v-on:click="change">改變name的值</button>
  </div>


</body>

<script>
  //new出來的對象就是MVVM中的 View Module
  var myVue = new Vue({
    el: '#div1', //當前vue對象將接管上面的div區域
    data: { //data就是MVVM中的 module
      name: 'smyhvae'
    },
    //註意，下方這個 `methods` 是Vue中定義方法的關鍵字，不能改
    methods: {
      change: function() { //上面的button按鈕的點擊事件
        this.name += '1';
      }
    }
  });
</script>

</html>

上方代碼中，我們給button按鈕綁定了點擊事件。註意，這個button標簽要寫在div區域里（否則點擊事件不生效），因為下方的View module接管的是div區域。

v-on的簡寫形式

例如：

    <button v-on:click="change">改變name的值</button>

可以簡寫成：

    <button @click="change">改變name的值</button>

v-on的常用事件

  • v-on:click

  • v-on:keydown

  • v-on:keyup

  • v-on:mousedown

  • v-on:mouseover

  • v-on:submit

  • ....

v-on的事件修飾符

v-on 提供了很多事件修飾符來輔助實現一些功能。事件修飾符有如下：

  • .stop 阻止冒泡。本質是調用 event.stopPropagation()。

  • .prevent 阻止預設事件。本質是調用 event.preventDefault()。

  • .capture 添加事件監聽器時，使用 capture 模式。

  • .self 只有當事件是從偵聽器綁定的元素本身觸發時，才觸發回調。

  • `.{keyCode | keyAlias} 只當事件是從偵聽器綁定的元素本身觸發時，才觸發回調。

  • `.native 監聽組件根元素的原生事件。

寫法示範：

          <!-- click事件 -->
        <button v-on:click="doThis"></button>

        <!-- 縮寫 -->
        <button @click="doThis"></button>

        <!-- 內聯語句 -->
        <button v-on:click="doThat('hello', $event)"></button>

        <!-- 阻止冒泡 -->
        <button @click.stop="doThis"></button>

        <!-- 阻止預設行為 -->
        <button @click.prevent="doThis"></button>

        <!-- 阻止預設行為，沒有表達式 -->
        <form @submit.prevent></form>

        <!--  串聯修飾符 -->
        <button @click.stop.prevent="doThis"></button>

舉例：（.prevent的用法舉例）

現在有一個form表單：

    <form action="http://www.baidu.com">
      <input type="submit" value="表單提交">
    </form>

我們知道，上面這個表單因為type="submit"，因此它是一個提交按鈕，點擊按鈕後，這個表單就會被提交到form標簽的action屬性中指定的那個頁面中去。這是表單的預設行為。

現在，我們可以用.prevent來阻止這種預設行為。修改為：點擊按鈕後，不提交到伺服器，而是執行我們自己想要的事件（在submit方法中另行定義）。如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue2.5.16.js"></script>
</head>

<body>
  <div id="app">
    <!-- 阻止表單中submit的預設事件 -->
    <form @submit.prevent action="http://www.baidu.com">
      <!-- 執行自定義的click事件 -->
      <input type="submit" @click="mySubmit" value="表單提交">
    </form>

  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
    },
    methods: {
      mySubmit: function() {
        alert('ok');
      }
    }
  });
</script>

</html>

上方代碼中，我們通過.prevent阻止了提交按鈕的預設事件，點擊按鈕後，執行的是mySubmit()方法里的內容。這個方法名是可以隨便起的，我們甚至可以起名為submit，反正預設的submit已經失效了。

插值表達式 {{}}

數據綁定最常見的形式就是使用 “Mustache” 語法（雙大括弧）的文本插值。例如：

<span>Message: {{ msg }}</span>

Mustache 標簽將會被替代為對應數據對象上 msg 屬性（msg定義在data對象中）的值。
無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會自動更新。

{{}}對JavaScript 表達式支持，例如：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ name == 'smyhvae' ? 'true' : 'false' }}

{{ message.split('').reverse().join('') }}

但是有個限制就是，每個綁定都只能包含單個表達式，如下表達式無效：

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

v-text

v-text可以將一個變數的值渲染到指定的元素中。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本：2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <div id="div1">
    <span v-text="name"></span>
  </div>
</body>

<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'hello smyhvae'
    }
  });
</script>

</html>

結果：

v-html

v-text是純文本，而v-html會被解析成html元素。

註意：使用v-html渲染數據可能會非常危險，因為它很容易導致 XSS（跨站腳本） 攻擊，使用的時候請謹慎，能夠使用{{}}或者v-text實現的不要使用v-html。

v-cloak

v-cloak：保持和元素實例的關聯，直到結束編譯後自動消失。

這個指令和CSS 規則一起用的時候，可以隱藏未編譯的標簽直到實例準備完畢。比如說，在網路很慢的情況下，通過v-cloak隱藏元素，當載入完畢後，再顯示出來。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue.js"></script>
  <style>

    /*網路很慢時，在span上加上 v-cloak和css樣式控制以後，瀏覽器在載入時會先把span隱藏起來。
    直到 Vue實例化完畢以後，v-cloak 會自動消失，那麼對應的css樣式就會失去作用，最終將span中的內容呈現給用戶 */
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="div1">
    <span v-cloak>{{name}}</span>

  </div>
</body>

<script src="vue.js"></script>
<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'hello1 smyhvae22'
    }
  });
</script>

</html>

v-bind

v-bind：給html元素或者組件動態綁定一個或多個特性，例如動態綁定style和class。

比如說：

    <img v-bind:src="imageSrc">

    <div v-bind:style="{ fontSize: size + 'px' }"></div>

上方代碼中的imageSrc和size其實是Vue實例裡面的變數。

上面兩行代碼可以簡寫成：

    <img :src="imageSrc">

    <div :style="{ fontSize: size + 'px' }"></div>

舉例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  </style>
</head>

<body>
  <div id="div1">
    <!-- value里的值只是簡單的字元串 -->
    <input type="text" value="name">
    <!-- 加上 v-bind 之後，value里的值是 Vue 里的變數 -->
    <input type="text" v-bind:value="name">
    <!-- 超鏈接後面的path是 Vue 裡面的變數 -->
    <a v-bind="{href:'http://www.baidu.com/'+path}">超鏈接</a>

  </div>
</body>

<script src="vue.js"></script>
<script>
  new Vue({
    el: '#div1',
    data: {
      name: 'smyhvae',
      path: `2.html`
    }
  });
</script>

</html>

效果：

v-model：雙向數據綁定

上面的一段中，我們通過v-bind，給<input>標簽綁定了data對象里的name屬性。當data -> name的值發生改變時，<input>標簽里的內容會自動更新。

可我現在要做的是：我在<input>標簽里修改內容，要求data -> name的值自動更新。從而實現雙向數據綁定。該怎麼做呢？這就可以利用v-model這個屬性。

代碼舉例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">

    <form action="#">
        <input type="text" id="username" v-model="myAccount.username">
        <input type="password" id="pwd" v-model="myAccount.userpwd">

        <input type="submit" v-on:click="submit1" value="註冊">

    </form>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        //上面的標簽中採用v-model進行雙向數據綁定，數據會自動更新到data裡面來
        data: {
            name: 'smyhvae',
            myAccount: {username: '', userpwd: ''}
        },
        //在methods里綁定各種方法，根據業務需要進行操作
        methods: {
            submit1: function () {
                alert(this.myAccount.username + "  pwd=" + this.myAccount.userpwd);
            }
        }
    });
</script>

</html>

此時，便可實現我們剛剛要求的雙向數據綁定的效果。

v-for：for迴圈

作用：根據數組中的元素遍歷指定模板內容生成內容。

引入

比如說，如果我想給一個ul中的多個li分別賦值1、2、3...。如果不用迴圈，就要挨個賦值：

<body>
  <div id="app">
    <ul>
      <li>{{list[0]}}</li>
      <li>{{list[1]}}</li>
      <li>{{list[2]}}</li>
    </ul>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3]
    }

  });
</script>

效果：

為了實現上面的效果，如果我用v-for進行賦值，代碼就簡潔很多了：

<body>
  <div id="app">
    <ul>
      <!-- 使用v-for對多個li進行遍歷賦值 -->
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3]
    }

  });
</script>

接下來，我們詳細講一下v-for的用法。需要聲明的是，Vue 1.0的寫法和Vue 2.0的寫法是不一樣的。本文全部採用Vue 2.0的寫法

數組的遍歷賦值

針對下麵這樣的數組：

<script>
  new Vue({
    el: '#app',
    data: {
      arr1: [2, 5, 3, 1, 1],
    }
  });
</script>

將數組中的值賦給li：

      <li v-for="item in arr1">{{item}}</li>

將數組中的值和index賦給li：

      <!-- 括弧里如果寫兩個參數：第一個參數代表值，第二個參數代表index -->
      <li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>

效果如下：

對象的遍歷賦值

針對下麵這樣的對象：

<script>
  new Vue({
    el: '#app',
    data: {
      obj1: {
        name: 'smyhvae',
        age: '26',
        gender: '男'
      }
    }
  });
</script>

將上面的obj1對象的數據賦值給li，寫法如下：

<body>
  <div id="app">
    <ul>
      <!-- 括弧里如果寫兩個參數：則第一個參數代表value，第二個參數代表key -->
      <li v-for="(value,key) in obj1">值：{{value}} --- 鍵：{{key}} </li>

      <h3>---分隔線---</h3>

      <!-- 括弧里如果寫三個參數：則第一個參數代表value，第二個參數代表key，第三個參數代表index -->
      <li v-for="(value,key,index) in obj1">值：{{value}} --- 鍵：{{key}} --- index：{{index}} </li>
    </ul>
  </div>
</body>

效果如下：

v-if：設置元素的顯示和隱藏

作用：根據表達式的值的真假條件，來決定是否渲染元素，如果為false則不渲染（達到隱藏元素的目的），如果為true則渲染。

在切換時，元素和它的數據綁定會被銷毀並重建。

舉例如下：（點擊按鈕時，切換和隱藏盒子）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <button v-on:click="toggle">顯示/隱藏</button>
    <div v-if="isShow">我是盒子</div>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
      toggle: function() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

</html>

效果如下：

v-show：設置元素的顯示和隱藏

作用：根據表達式的真假條件，來切換元素的 display 屬性。如果為false，則在元素上添加 display:none屬性；否則移除display:none屬性。

舉例如下：（點擊按鈕時，切換和隱藏盒子）

我們直接把上一段代碼中的v-if改成v-show就可以了：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <button v-on:click="toggle">顯示/隱藏</button>
    <div v-show="isShow">我是盒子</div>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
      toggle: function() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

</html>

效果如下：

v-if和v-show的區別：

v-if和v-show都能夠實現對一個元素的隱藏和顯示操作。但是v-if是添加/刪除DOM元素，而v-show是在這個元素上添加/移除style="display:none"屬性。

我的公眾號

想學習代碼之外的軟技能？不妨關註我的微信公眾號：生命團隊（id：vitateam）。

掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：


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

-Advertisement-
Play Games
更多相關文章
  • unbuntu系統:python2.7安裝pyspark
    以前在進行搜索引擎rank-svm排序模型訓練時，直接使用python讀取的HDFS日誌文件、統計計算等預處理操作再進行svm模型，最終產生出訓練模型。現在回想一下，數據預處理這一塊完全可以使用spark進行，而且看起來更“正規一點”和高大上，並藉機接觸一下大數據。pyspark的安裝折騰了一上午， ...
  • 小劉同學的第一百零三篇博文
    今天特意花白天的時間來寫畢設，終於把老師的第二次課結束了，還剩四次課。 昨天的bug說一下吧，居然是寫錯了一個方法對象，漏寫了個 ' r ' ，結果導致整個頁面都渲染不出來…… 寫代碼果然還是需要更多的耐心和細心才行。 其實昨天，老師還用到了一個parserbody中間件，是一個HTTP請求解析中間 ...
  • Vue組件之作用域插槽
    寫作用域插槽之前，先介紹一下Vue中的slot內容分發： 如果<child-component></child-component>標簽之間沒有插入那兩個p標簽的話，頁面會顯示子組件模板中定義的“<p>父組件如果沒有插入內容，我將被顯示</p>”這一則內容，但如果<child-component>< ...
  • npm 安裝 electron 超時
    由於某些不可描述的原因，俺的某個小項目要用客戶端桌面應用，後臺那還是 php 了。經廣大的群友指導，發現了 Electron 這個項目。它可以用 html, css, javascript 構建跨平臺的桌面應用程式，基於 nodejs 實現。 然而在安裝 Electron 時，卡死在了 npm in ...
  • vue.js項目nginx部署
    開發環境搭建完成。二、編譯部署1、項目路徑下demo輸入命令npm run build編譯完成後會發現在demo文件夾下多出一個dist文件夾這裡面就是編譯好的文件了。2、網上下載nginx,下載地址http://nginx.org/en/download.html，解壓下載的nginx文件。3、配 ...
  • Angular開發實踐（八）： 使用ng-content進行組件內容投射
    在Angular中，組件屬於特殊的指令，它的特殊之處在於它有自己的模板（html）和樣式（css）。因此使用組件可以使我們的代碼具有強解耦、可復用、易擴展等特性。通常的組件定義如下： demo.component.ts： demo.component.html： demo.component.scs ...
  • jquery的text(),html()和val()用法
    text() 方法方法設置或返回被選元素的文本內容（innerText）： html() 方法返回或設置被選元素的內容 (innerHTML)，包括標簽： <input type="text" id="input" value="1133445fddsgfsgfadfa"> val() 方法返回或設 ...
  • 淺談html運行原理
    淺談HTML運行原理，所謂的HTML簡單的來說就是一個網頁，雖然第一節就講html原理可能大家會聽不懂，就當是給一個初步印象把，至少大概知道一個網頁的運行流程是怎樣的，下麵上一張圖： 大致的一個html的運行原理就是如圖所示，瀏覽器發送一個http請求，然後首先會解析功能變數名稱（主機名），然後在本地的“c ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類