一起學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
更多相關文章
  • 回到: "Linux系列文章" "Shell系列文章" "Awk系列文章" gawk支持的正則 . 匹配任意字元,包括換行符 ^ $ [...] [^...] | + ? () {m} {m,} {m,n} {,n} [:lower:] [:upper:] [:alpha:] [:digit:] [ ...
  • 回到: "Linux系列文章" "Shell系列文章" "Awk系列文章" awk變數 awk的變數是動態變數,在使用時聲明。 所以awk變數有3種狀態: 未聲明狀態:稱為untyped類型 引用過但未賦值狀態:unassigned類型 已賦值狀態 引用未賦值的變數,其預設初始值為空字元串或數值0 ...
  • 回到: "Linux系列文章" "Shell系列文章" "Awk系列文章" 輸出操作 awk可以通過print、printf將數據輸出到標準輸出或重定向到文件。 print 逗號分隔要列印的欄位列表,各欄位都 會自動轉換成字元串格式 ,然後通過預定義變數OFS(output field separa ...
  • 日常操作中我們經常使用到文件壓縮操作,其使用一些特定的演算法來減小文件的大小,可以提高傳輸數據時的速率和減少數據在一些存儲機制上占有的空間大小,實現空間利用最大化。 比如:如果你想通過郵箱發送一個文件夾,你會發現可能行不通,怎麼辦呢,難道將文件夾內的內容一個個發送嗎?顯然不用,因為郵箱不支持文件夾這種 ...
  • 1、Where、Order by、Group by 、having Where作用對象是:基本表或視圖,從中選出符合條件的元素。 Order by 作用對象是:基本表或視圖,就是排序方式,分為升序(ASC)和降序(DESC),排序預設為升序 Group by 作用對象是:基本表或視圖,把對象進行分組 ...
  • 1. MapReduce入門 1.1 MapReduce的思想 MapReduce的思想核心是"分而治之" , 適用於大量的複雜的任務處理場景 (大規模數據處理場景) . Map負責"分" , 即把複雜的任務分解為若幹個"簡單的任務"來進行處理. 可以進行拆分的前提是這些小任務並行計算, 彼此間幾乎 ...
  • 今年 5 月,谷歌在 I/O 大會上宣佈,Kotlin 編程語言成為其 Android 應用程式開發人員的首選語言。 Kotlin 是一種面向現代多平臺應用程式的編程語言,成為谷歌開發 Android 應用程式的首選語言後,許多開發人員逐漸地從 Java 轉向 Kotlin。根據最新的一項調查顯示, ...
  • 什麼是結構、樣式、行為分離?這樣做的好處是什麼? web標準的核心理念就是結構標準、樣式標準和行為標準,提倡結構、表現和行為相分離,即HTML-結構、CSS-表現、JavaScript-行為 分離。 HTML標簽給予內容含義,CSS表現層則定義HTML該如何顯示(外觀),JavaScript行為成為 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...