vue從入門到精通(一):Vue模板語法

一,模板語法

Vue 使用一種基于 HTML 的模板語法,使我們能夠聲明式地將其組件實例的數據綁定到呈現的 DOM 上。所有的Vue模板都是語法層面合法的 HTML,可以被符合規范的瀏覽器和 HTML 解析器解析。

Vue模板語法有2大類:

  1. 插值語法:

功能:用于解析標簽體內容。
寫法:{{xxx}},xxx是js表達式,且可以直接讀取到data中的所有屬性。

  1. 指令語法:

功能:用于解析標簽(包括:標簽屬性、標簽體內容、綁定事件…)
舉例: v-bind:href=“xxx” 或簡寫為 :href=“xxx” ,xxx同樣要寫js表達式,且可以直接讀取到data中的所有屬性。
備注:Vue中有很多的指令,且形式都是:v-???,v-bind只是一個例子.

二,實戰

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模板語法</title><script src="../js/vue.js"></script></head><body><div id="root"><h3>您好,{{name}}</h3><br /><h1>指令語法</h1><a v-bind:href="school.url.toLocaleUpperCase()">學習1</a><a :href="school.url">學習2</a></div></body><script type="text/javascript">Vue.config.productionTip= false;new Vue({el: '#root',data: {name: 'jack',school:{name:'百度',url:'www.baidu.com'}}})</script></html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/12466.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/12466.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/12466.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

請介紹下H264的多參考幀技術及其應用場景,并請說明下為什么要有多參考幀?

H.264&#xff08;也稱為H.264/AVC&#xff09;的多參考幀機制是其編碼效率和質量提升的關鍵部分。這個機制允許編碼器在編碼當前幀時&#xff0c;參考多個之前已編碼的幀。這種多參考幀的方法為編碼器提供了更多的選擇&#xff0c;使其能夠更準確地預測當前幀的內容&#xff0…

【保姆級介紹自動化的講解】

&#x1f308;個人主頁: 程序員不想敲代碼啊 &#x1f3c6;CSDN優質創作者&#xff0c;CSDN實力新星&#xff0c;CSDN博客專家 &#x1f44d;點贊?評論?收藏 &#x1f91d;希望本文對您有所裨益&#xff0c;如有不足之處&#xff0c;歡迎在評論區提出指正&#xff0c;讓我們共…

SCP‘s Story

越過“第二夜”的星星&#xff0c;越過“邁克爾連續線”和“禁運線”&#xff0c;在“煤炭之路”最遠的一站&#xff0c;有一顆眼淚。這不是織物或紙上的撕裂&#xff0c;而是現實中的撕裂&#xff0c;是物理定律和常識失效的地方。 有些人稱之為黑洞&#xff0c;銀河系中最大…

【C語言】4.C語言數組(2)

文章目錄 6. 二維數組的創建6.1 ?維數組的概念6.2 ?維數組的創建 7. 二維數組的初始化7.1 不完全初始化7.2 完全初始化7.3 按照?初始化7.4 初始化時省略?&#xff0c;但是不能省略列 8. 二維數組的使用8.1 ?維數組的下標8.2 ?維數組的輸?和輸出 9. 二維數組在內存中的存…

利用一段代碼輕松繞過PHP授權系統

利用一段代碼輕松繞過PHP授權系統 第一步&#xff1a;首先你需要改名全局文件 比如說全局文件 common.php&#xff0c;那么 你將他改為core.php 第二步&#xff1a;創建文件 創建一個文件&#xff0c;和改名前的全局文件名稱一樣&#xff0c;然后把以下代碼復制進去就OK了 …

行列視在做報表之前需要準備哪些前期工作

行列視是一款功能強大的生產數據分析和報表生成工具&#xff0c;使用它進行報表制作之前&#xff0c;確實需要一些前期準備工作&#xff0c;以確保報表的準確性和有效性。以下是進行行列視報表制作前需要準備的一些關鍵步驟&#xff1a; 1.明確報表需求&#xff1a; - 確定報表…

【MySQL01】【 Explain 命令詳解】

文章目錄 一、前言二、Explain 概覽三、Explain 詳解1. id2. select_type3. table4. type5. possible_keys6. key7. key_len8. ref9. rows10. filtered11. extra 列 四、補充1. EXPLAIN 擴展1.1 Extend EXPLAIN1.2 JSON 格式的執行計劃 2. Intersection、Union、Sort-Union 索引…

使用C++實時讀取串口數據(window使用已編譯LibModbus庫并用QT實現一個實時讀取串口數據)

先看這篇文章&#xff0c;寫得很詳細: QT應用篇 四、window編譯LibModbus庫并用QT編寫一個Modbus主機 手把手教學 編譯好的LibModbus庫可以在上面文章里下載&#xff0c;也可以在我的鏈接里下載&#xff1a; 為了在Qt Creator中創建新項目并嵌入上述C代碼&#xff0c;請執行以…

Linux監控apache腳本

監控apache腳本&#xff1a; 1、每十分鐘檢查apache是否正常運行 分析&#xff1a;進程在運行如何判斷 1&#xff09;lockfile是否存在 2&#xff09;pid是在后臺存在 3&#xff09;能否正常訪問頁面 2、如果apache運行不正常&#xff08;進程死亡、頁面訪問也不正常等情況&am…

C++進階:紅黑樹介紹及模擬實現(圖示詳解過程)

C進階&#xff1a;紅黑樹介紹及模擬實現 上次介紹了AVL樹&#xff1a;C進階&#xff1a;AVL樹詳解及模擬實現&#xff08;圖示講解旋轉過程&#xff09; 今天就來緊接著來紅黑樹啦!!! 文章目錄 1.紅黑樹介紹約束規則 2.項目文件規劃3.整體框架&#xff08;節點和Tree&#xf…

whisper報錯:hp, ht, pid, tid = _winapi.CreateProcess [WinError 2] 系統找不到指定的文件。

in _execute_child hp&#xff0c; ht&#xff0c; pid&#xff0c; tid _winapi.CreateProcess&#xff08;executable&#xff0c; args&#xff0c; FileNotFoundError&#xff1a; [WinError 2] 系統找不到指定的文件。 原因&#xff1a; 沒裝ffmpeg 或者 ffmpeg沒添加到…

k8s pod就緒探針

Pod 可能需要時間來加載配置或數據&#xff0c;或者可能需要執行預熱過程以防止第一個用戶請求時間太長影響了用戶體驗。在這種情況下&#xff0c;不希望該 pod 立即開始接收請求&#xff0c;尤其是在運行的實例可以正確快速地處理請求的情況下。不要將請求轉發到正在啟動的 po…

YOLOv5獨家改進:backbone改進 | 微軟新作StarNet:超強輕量級Backbone | CVPR 2024

??????創新點:star operation(元素乘法)在無需加寬網絡下,將輸入映射到高維非線性特征空間的能力,這就是StarNet的核心創新,在緊湊的網絡結構和較低的能耗下展示了令人印象深刻的性能和低延遲 ??????如何跟YOLOv5結合:替代YOLOv5的backbone 收錄 YOL…

電容筆記匯總

電容 一、電容理論基礎 1、電容的本質 兩個相互靠近的導體&#xff0c;中間夾一層不導電的絕緣介質&#xff0c;這就構成了電容器。當電容器的兩個極板之間加上電壓時&#xff0c;電容器就會儲存電荷。 兩個相互靠近的金屬板中間夾一層絕緣介質組成的器件&#xff0c;當兩端…

豆漿機缺水檢測功能如何實現的

豆漿機缺水檢測功能的實現是通過光學液位傳感器來完成的。這種傳感器具有多種優勢&#xff0c;如內部所有元器件經過樹脂膠封處理&#xff0c;沒有任何機械活動部件&#xff0c;免調試、免檢驗、免維護等特點。它采用了光電液位傳感器內置的光學電子元件&#xff0c;體積小、功…

Docker常用鏡像安裝

1. mysql 1.1 安裝 獲取鏡像 docker pull mysql:8.0.30創建文件掛載目錄 創建容器并運行 docker run -p 3306:3306 --name mysql8 \ -v /home/docker/mysql8/log:/var/log/mysql \ -v /home/docker/mysql8/data:/var/lib/mysql \ -v /home/docker/mysql8/mysql-files:/va…

保研機試之【設備驅動程序】

B選項&#xff1a; 綜上&#xff0c;我認為這道題選擇D~

一些近來對內網攻防的思考

我知道我最近托更托了很久了&#xff0c;其實也不是小編懶啊 這小編也是一直在寫&#xff0c;但是遇到的問題比較多&#xff08;我太菜了&#xff09;&#xff0c;所以一直拖著。 但是總不能不更吧 那就講一下進來的一些內網攻防的思考吧 1.CrossC2上線Linux到CS(成功) …

用友網絡的危與機:2023年虧損約10億元,王文京面臨嚴肅拷問

“企業在新的產業浪潮來臨時&#xff0c;應該主動推進新階段的產品和業務創新&#xff0c;這樣才能夠在新的浪潮成為主流的時候&#xff0c;走到行業前面&#xff0c;否則就會從產業發展的潮流中掉下來”。用友網絡創始人王文京&#xff0c;曾用“沖浪理論”形容一家企業成功的…

Steam喜加一,限時免費領取《Machinika Museum》

《Machinika Museum》限時免費領取啦&#xff01;這是一款燒腦解謎游戲&#xff0c;讓你挖掘神秘外星裝置的秘密。在這個非常特別的異星裝置博物館里&#xff0c;你將扮演一名研究員&#xff0c;負責解開各種機械謎題&#xff0c;探索背后的故事。 在這個未來世界&#xff0c;外…