一起學Vue之模板語法

来源:https://www.cnblogs.com/hsiang/archive/2019/12/08/12008525.html
-Advertisement-
Play Games

Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。 ...


概述

Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。

普通文本

數據綁定最常見的形式就是使用“Mustache[小鬍子]”語法 (雙大括弧) 的文本插值，無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

1 <span>{{msg}}</span>

通過使用 v-once 指令，執行一次性插值，當數據改變時，內容不會更新。

1 <span v-once>這個將不會改變: {{ msg }}</span>

輸出Html

雙大括弧會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：

1 <!-- 普通文本 -->
2 <p>Using mustaches: {{ rawHtml }}</p>
3 <!-- html解析 -->
4 <p>Using v-html directive: <span v-html="rawHtml"></span></p>

註意：你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。

特性

Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令：

1  <div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div>
2 
3 <button v-bind:disabled="isButtonDisabled">Button</button>

註意：如果 isButtonDisabled 的值是 null、undefined 或 false，  則 disabled 特性甚至不會被包含在渲染出來的 <button> 元素中。 只有為true ,才被渲染。

使用 JavaScript 表達式

不僅能綁定簡單的屬性鍵值，還提供了完全的 JavaScript 表達式支持。

如下所示：

1  HTML{{ number + 1 }}
2 <br />
3 {{ ok ? 'YES' : 'NO' }}
4 <br />
5 {{ message.split('').reverse().join('') }}
6 <br />
7 <div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>

註意： 每個綁定都只能包含單個表達式，語句不會生效。

指令

指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。這裡，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。

1 <p v-if="seen">現在你看到我了</p>

參數

 一些指令能夠接收一個“參數”，在指令名稱之後以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 特性：

1 <a v-bind:href="url" target="_blank">點擊鏈接Baidu</a>

在這裡 href 是參數，告知 v-bind 指令將該元素的 href 特性與表達式 url 的值綁定。 另一個例子是 v-on 指令，它用於監聽 DOM 事件：

1 <button v-on:click="doSomething">點擊彈出框</button>

動態參數

你可以使用動態參數為一個動態的事件名綁定處理函數：在這個示例中，當 eventName 的值為 "focus" 時，v-on:[eventName] 將等價於 v-on:focus。

1  <a v-bind:[attributename]="url" target="_blank"> 點擊我進入 </a>
2 <br />
3 <a v-on:[eventname]="doSomething"> ... </a>

註意，參數表達式的寫法存在一些約束：

在 DOM 中使用模板時 (直接在一個 HTML 文件里撰寫模板)，還需要避免使用大寫字元來命名鍵名，因為瀏覽器會把 attribute 名全部強制轉為小寫：在 DOM 中使用模板時這段代碼會被轉換為 `v-bind:[someattr]`。 除非在實例中有一個名為“someattr”的 property，否則代碼不會工作。

修飾符

修飾符 (modifier) 是以半形句號 . 指明的特殊尾碼，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

1 <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">點擊鏈接Baidu</a>

指令縮寫

Vue 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

 1 <!--  v-bind 縮寫 -->
 2 <!-- 完整語法 -->
 3 <a v-bind:href="url" target="_blank">完整寫法</a>
 4 <!-- 縮寫 -->
 5 <a :href="url" target="_blank">縮寫法</a>
 6 <!--  v-on 縮寫 -->
 7 <!-- 完整語法 -->
 8 <button v-on:click="doSomething">完整寫法</button>
 9 <!-- 縮寫 -->
10 <button @click="doSomething">縮寫法</button>


關於本例子中的完整代碼，如下所示：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>一起學Vue</title>
  6         <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  7         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8 
  9     </head>
 10     <body>
 11         <div id="app">
 12             <!-- 
 13              Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。
 14              所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。
 15              -->
 16             <h2>普通文本</h2>
 17             <!--
 18                 數據綁定最常見的形式就是使用“Mustache[小鬍子]”語法 (雙大括弧) 的文本插值，無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新
 19             -->
 20             <span>{{msg}}</span>
 21             <br />
 22             <!--
 23                 通過使用 v-once 指令，執行一次性插值，當數據改變時，內容不會更新。
 24             -->
 25             <span v-once>這個將不會改變: {{ msg }}</span>
 26             <h2>輸出Html</h2>
 27             <!--
 28             雙大括弧會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：
 29             你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。
 30             請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。
 31             -->
 32             <!-- 普表文本 -->
 33             <p>Using mustaches: {{ rawHtml }}</p>
 34             <!-- html解析 -->
 35             <p>Using v-html directive: <span v-html="rawHtml"></span></p>
 36             <h2>特性</h2>
 37             <!-- 
 38             Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令： 
 39              -->
 40              <div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div>
 41              <!-- 
 42               如果 isButtonDisabled 的值是 null、undefined 或 false，
 43               則 disabled 特性甚至不會被包含在渲染出來的 <button> 元素中。
 44               只有為true ,才被渲染
 45               -->
 46              <button v-bind:disabled="isButtonDisabled">Button</button>
 47              <h2>使用 JavaScript 表達式</h2>
 48              <!-- 
 49               每個綁定都只能包含單個表達式，語句不會生效。
 50               我們一直都只綁定簡單的屬性鍵值。但實際上，對於所有的數據綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。
 51               -->
 52              HTML{{ number + 1 }}
 53             <br />
 54             {{ ok ? 'YES' : 'NO' }}
 55             <br />
 56             {{ message.split('').reverse().join('') }}
 57             <br />
 58             <div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>
 59             <!-- 這是語句，不是表達式 -->
 60             <!-- {{ var a = 1 }} -->
 61 
 62             <!-- 流控制也不會生效，請使用三元表達式 -->
 63             <!-- {{ if (ok) { return message } }} -->
 64             <h2>指令</h2>
 65             <!-- 
 66              指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
 67              這裡，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。
 68              -->
 69              <p v-if="seen">現在你看到我了</p>
 70              <h2>參數</h2>
 71              <!-- 
 72               一些指令能夠接收一個“參數”，在指令名稱之後以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 特性：
 73               -->
 74               <a v-bind:href="url" target="_blank">點擊鏈接Baidu</a>
 75               <!-- 
 76               在這裡 href 是參數，告知 v-bind 指令將該元素的 href 特性與表達式 url 的值綁定。 
 77               另一個例子是 v-on 指令，它用於監聽 DOM 事件：
 78                -->
 79                <br />
 80               <button v-on:click="doSomething">點擊彈出框</button>
 81               <h2>動態參數</h2>
 82               <!-- 
 83                註意，參數表達式的寫法存在一些約束，如之後的“對動態參數表達式的約束”章節所述。
 84                -->
 85               <a v-bind:[attributename]="url" target="_blank"> 點擊我進入 </a>
 86               <!-- 
 87               你可以使用動態參數為一個動態的事件名綁定處理函數：
 88                在這個示例中，當 eventName 的值為 "focus" 時，v-on:[eventName] 將等價於 v-on:focus。
 89                -->
 90                <br />
 91               <a v-on:[eventname]="doSomething"> ... </a>
 92               <!-- 
 93                在 DOM 中使用模板時 (直接在一個 HTML 文件里撰寫模板)，還需要避免使用大寫字元來命名鍵名，
 94                因為瀏覽器會把 attribute 名全部強制轉為小寫：
 95                在 DOM 中使用模板時這段代碼會被轉換為 `v-bind:[someattr]`。
 96                除非在實例中有一個名為“someattr”的 property，否則代碼不會工作。
 97 
 98                -->
 99                <h2>修飾符</h2>
100                <!-- 
101                 修飾符 (modifier) 是以半形句號 . 指明的特殊尾碼，用於指出一個指令應該以特殊方式綁定。
102                 例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
103                 -->
104                 <a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">點擊鏈接Baidu</a>
105                 <h2>縮寫</h2>
106                 <!-- 
107                  Vue 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：
108                  -->
109                 <!-- 
110                  v-bind 縮寫
111                  -->
112                 <!-- 完整語法 -->
113                 <a v-bind:href="url" target="_blank">完整寫法</a>
114                 <br />
115                 <!-- 縮寫 -->
116                 <a :href="url" target="_blank">縮寫法</a>
117                 <br />
118                 <!-- 
119                  v-on 縮寫
120                  -->
121                 <!-- 完整語法 -->
122                 <button v-on:click="doSomething">完整寫法</button>
123                 <br />
124                 <!-- 縮寫 -->
125                 <button @click="doSomething">縮寫法</button>
126         </div>
127         <script type="text/javascript">
128             var app=new Vue({
129                 el:'#app',
130                 data:{
131                     msg:'hello world!!!',
132                     rawHtml:'<span style="color:red;"> 這應該是紅色</span>',
133                     dynamicId:'div001',
134                     isButtonDisabled:true,
135                     number:4,
136                     ok:true,
137                     message:'welcome to vue!!!',
138                     id:'01',
139                     seen:true,
140                     url:'http://www.baidu.com',
141                     attributename:'href',
142                     eventname:'click'
143                 },
144                 methods:{
145                     doSomething:function(){
146                         alert('hello world!!!');
147                     }
148                 }
149             });
150         </script>
151     </body>
152 </html>
View Code

備註

學而時習之，不亦悅乎！


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

-Advertisement-
Play Games
更多相關文章
  • 精通awk系列(16)：gawk支持的正則表達式
    回到： "Linux系列文章" "Shell系列文章" "Awk系列文章" gawk支持的正則 . 匹配任意字元，包括換行符 ^ $ [...] [^...] | + ? () {m} {m,} {m,n} {,n} [:lower:] [:upper:] [:alpha:] [:digit:] [ ...
  • 精通awk系列(14)：細說awk中的變數和變數賦值
    回到： "Linux系列文章" "Shell系列文章" "Awk系列文章" awk變數 awk的變數是動態變數，在使用時聲明。 所以awk變數有3種狀態： 未聲明狀態：稱為untyped類型 引用過但未賦值狀態：unassigned類型 已賦值狀態 引用未賦值的變數，其預設初始值為空字元串或數值0 ...
  • 精通awk系列(13)：print、printf、sprintf和重定向
    回到： "Linux系列文章" "Shell系列文章" "Awk系列文章" 輸出操作 awk可以通過print、printf將數據輸出到標準輸出或重定向到文件。 print 逗號分隔要列印的欄位列表，各欄位都 會自動轉換成字元串格式 ，然後通過預定義變數OFS(output field separa ...
  • zip,rar及linux下常用的壓縮格式
    日常操作中我們經常使用到文件壓縮操作，其使用一些特定的演算法來減小文件的大小，可以提高傳輸數據時的速率和減少數據在一些存儲機制上占有的空間大小，實現空間利用最大化。 比如：如果你想通過郵箱發送一個文件夾，你會發現可能行不通，怎麼辦呢，難道將文件夾內的內容一個個發送嗎？顯然不用，因為郵箱不支持文件夾這種 ...
  • Where/Order by/Ggroup by/Having使用的註意事項
    1、Where、Order by、Group by 、having Where作用對象是：基本表或視圖，從中選出符合條件的元素。 Order by 作用對象是：基本表或視圖，就是排序方式，分為升序（ASC）和降序（DESC），排序預設為升序 Group by 作用對象是：基本表或視圖，把對象進行分組 ...
  • Hadoop_MapReduce_03
    1. MapReduce入門 1.1 MapReduce的思想 MapReduce的思想核心是"分而治之" , 適用於大量的複雜的任務處理場景 (大規模數據處理場景) . Map負責"分" , 即把複雜的任務分解為若幹個"簡單的任務"來進行處理. 可以進行拆分的前提是這些小任務並行計算, 彼此間幾乎 ...
  • Kotlin 編程語言成為其 Android 應用程式開發人員的首選語言
    今年 5 月，谷歌在 I/O 大會上宣佈，Kotlin 編程語言成為其 Android 應用程式開發人員的首選語言。 Kotlin 是一種面向現代多平臺應用程式的編程語言，成為谷歌開發 Android 應用程式的首選語言後，許多開發人員逐漸地從 Java 轉向 Kotlin。根據最新的一項調查顯示， ...
  • 什麼是結構、樣式、行為分離？
    什麼是結構、樣式、行為分離？這樣做的好處是什麼？ web標準的核心理念就是結構標準、樣式標準和行為標準，提倡結構、表現和行為相分離，即HTML-結構、CSS-表現、JavaScript-行為 分離。 HTML標簽給予內容含義，CSS表現層則定義HTML該如何顯示（外觀），JavaScript行為成為 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類