一起學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
  • 記一次asp.net 8 伺服器爆滿的解決過程
    前言 插件化的需求主要源於對軟體架構靈活性的追求，特別是在開發大型、複雜或需要不斷更新的軟體系統時，插件化可以提高軟體系統的可擴展性、可定製性、隔離性、安全性、可維護性、模塊化、易於升級和更新以及支持第三方開發等方面的能力，從而滿足不斷變化的業務需求和技術挑戰。 一、插件化探索 在WPF中我們想要開 ...
  • C#反射
    歡迎ReaLTaiizor是一個用戶友好的、以設計為中心的.NET WinForms項目控制項庫，包含廣泛的組件。您可以使用不同的主題選項對項目進行個性化設置，並自定義用戶控制項，以使您的應用程式更加專業。 項目地址：https://github.com/Taiizor/ReaLTaiizor 步驟1： ...
  • EDP .Net開發框架--業務模型
    EDP是一套集組織架構，許可權框架【功能許可權，操作許可權，數據訪問許可權，WebApi許可權】，自動化日誌，動態Interface，WebApi管理等基礎功能於一體的，基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • .NET 中 Channel 類簡單使用
    Channel 是乾什麼的 The System.Threading.Channels namespace provides a set of synchronization data structures for passing data between producers and consume ...
  • efcore如何優雅的實現按年分庫按月分表
    efcore如何優雅的實現按年分庫按月分表 介紹 本文ShardinfCore版本 本期主角: ShardingCore 一款ef-core下高性能、輕量級針對分表分庫讀寫分離的解決方案，具有零依賴、零學習成本、零業務代碼入侵適配 距離上次發文.net相關的已經有很久了,期間一直在從事java相關的 ...
  • 使用 Spacesniffer 找回 48G 系統存儲空間的總結
    前言 Spacesniffer 是一個免費的文件掃描工具，通過使用樹狀圖可視化佈局，可以立即瞭解大文件夾的位置，幫助用戶處理找到這些文件夾 當前系統C盤空間 清理後系統C盤空間 下載 Spacesniffer 下載地址：https://spacesniffer.en.softonic.com/dow ...
  • EDP .Net開發框架--許可權
    EDP是一套集組織架構，許可權框架【功能許可權，操作許可權，數據訪問許可權，WebApi許可權】，自動化日誌，動態Interface，WebApi管理等基礎功能於一體的，基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 開源低代碼框架 ReZero API 正式版本發佈 ，界面操作直接生成API
    一、ReZero簡介 ReZero是一款.NET中間件 ： 全網唯一開源界面操作就能生成API , 可以集成到任何.NET6+ API項目,無破壞性，也可讓非.NET用戶使用exe文件 免費開源：MIT最寬鬆協議 , 一直從事開源事業十年，一直堅持開源 1.1 純ReZero開發 適合.Net Co ...
  • 記一次 .NET某酒店後臺服務 卡死分析
    一：背景 1. 講故事 停了一個月沒有更新文章了，主要是忙於寫 C#內功修煉系列的PPT，現在基本上接近尾聲，可以回頭繼續更新這段時間分析dump的一些事故報告，有朋友微信上找到我，說他們的系統出現了大量的http超時，程式不響應處理了，讓我幫忙看下怎麼回事，dump也抓到了。 二：WinDbg分析 ...
  • SqlSugar SqlFunc常用方法
    開始做項目管理了（本人3年java，來到這邊之後真沒想到...），天天開會溝通整理需求，他們講話的時候忙裡偷閑整理一下常用的方法，其實語言還是有共通性的，基本上看到方法名就大概能猜出來用法。出去打水的時候看到外面太陽好好，真想在外面坐著曬太陽，回來的時候好兄弟三年前送給我的鍵盤D鍵不靈了，在打"等待 ...
所有分類