ue 使用基于 HTML 的模板語法，讓開發(fā)者能夠聲明式地將其組件實(shí)例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上。所有的 Vue 模板都是語法層面合法的 HTML，均可被符合規(guī)范的瀏覽器和 HTML 解析器解析。

Vue 核心機(jī)制中會(huì)將模板編譯成高度優(yōu)化的 JavaScript 代碼。結(jié)合響應(yīng)式系統(tǒng)，當(dāng)應(yīng)用狀態(tài)變更時(shí)，Vue 能夠智能地計(jì)算出應(yīng)用需要最少的 DOM 操作并重新渲染的組件。

文本數(shù)據(jù)綁定#

數(shù)據(jù)綁定最基本的形式是使用的是“{{xxx}}”語法 (即雙大括號(hào))：

<div id="app">{{ message }}</div>

{{xxx}}標(biāo)簽會(huì)被替換為相應(yīng)組件實(shí)例中 message 屬性的值。同時(shí)每次 message 屬性更改時(shí)它也會(huì)同步更新。

原始 HTML#

{{xxx}}會(huì)將數(shù)據(jù)解釋為純文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<p>歡迎使用Vue3: {{ outHtml }}</p>
<p>使用 v-html 指令: <span v-html="outHtml"></span></p>

歡迎使用Vue3: <span style="color: red">This should be red.</span>

使用v-html 指令: This should be red.

這里我們遇到了一個(gè)新的概念。這里看到的 v-html 屬性 被稱為一個(gè)指令。指令由 v- 作為前綴，表明它們是一些由 Vue 提供的特殊 屬性，你可能已經(jīng)猜到了，它們將為渲染的 DOM 應(yīng)用特殊的響應(yīng)式行為。這里我們做的事情簡單來說就是：在當(dāng)前組件實(shí)例上，將此元素的 innerHTML 與 outHtml 屬性保持同步。

span 的內(nèi)容將會(huì)被替換為 outHtml 屬性的值，差值為純 HTML——數(shù)據(jù)綁定將會(huì)被忽略。注意，你不能使用 v-html 來拼接組合模板，因?yàn)?Vue 不是一個(gè)基于字符串的模板引擎。在使用 Vue 時(shí)，應(yīng)當(dāng)使用組件作為 UI 重用和組合的基本單元。

安全警告

在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML 是非常危險(xiǎn)的，因?yàn)檫@非常容易造成 XSS 漏洞。請僅在內(nèi)容安全可信時(shí)再使用 v-html，并且永遠(yuǎn)不要使用用戶提供的 HTML 內(nèi)容。

屬性綁定#

{{xxx}}不能在 HTML 屬性 中使用。想要響應(yīng)式地綁定一個(gè) 屬性，應(yīng)該使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

v-bind 指令指示 Vue 將元素的 id 屬性與組件的 dynamicId 屬性保持一致。如果綁定的值是 null 或者 undefined，那么該 屬性將會(huì)從渲染的元素上移除。

簡寫#

因?yàn)?v-bind 非常常用，我們提供了特定的簡寫語法：

<div :id="dynamicId"></div>

開頭為 : 的 屬性可能和一般的 HTML 屬性看起來不太一樣，但它的確是合法的 屬性名稱字符，并且所有支持 Vue 的瀏覽器都能正確解析它。此外，他們不會(huì)出現(xiàn)在最終渲染的 DOM 中。簡寫語法是可選的，但相信在你了解了它更多的用處后，你應(yīng)該會(huì)更喜歡它。

接下來的指引中，我們都將在示例中使用簡寫語法，因?yàn)檫@是在實(shí)際開發(fā)中更常見的用法。

布爾型 #

布爾型 依據(jù) true / false 值來決定 屬性是否應(yīng)該存在于該元素上。disabled 就是最常見的例子之一。

v-bind 在這種場景下的行為略有不同：

<button :disabled="isButtonDisabled">Button</button>

當(dāng) isButtonDisabled 為真值或一個(gè)空字符串 (即 <button disabled="">) 時(shí)，元素會(huì)包含這個(gè) disabled 屬性。而當(dāng)其為其他價(jià)值時(shí) 屬性將被忽略。

動(dòng)態(tài)綁定多個(gè)值#

如果你有像這樣的一個(gè)包含多個(gè) 屬性的 JavaScript 對(duì)象：

js

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通過不帶參數(shù)的 v-bind，你可以將它們綁定到單個(gè)元素上：

<div v-bind="objectOfAttrs"></div>

使用 JavaScript 表達(dá)式#

至此，我們僅在模板中綁定了一些簡單的屬性名。但是 Vue 實(shí)際上在所有的數(shù)據(jù)綁定中都支持完整的 JavaScript 表達(dá)式：

{{ number + 1 }}

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

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

<div :id="`list-${id}`"></div>

這些表達(dá)式都會(huì)被作為 JavaScript ，以組件為作用域解析執(zhí)行。

在 Vue 模板內(nèi)，JavaScript 表達(dá)式可以被使用在如下場景上：

• 在文本插值中 (雙大括號(hào))
• 在任何 Vue 指令 (以 v- 開頭的特殊屬性) 的值中

僅支持表達(dá)式#

每個(gè)綁定僅支持單一表達(dá)式，也就是一段能夠被求值的 JavaScript 代碼。一個(gè)簡單的判斷方法是是否可以合法地寫在 return 后面。

因此，下面的例子都是無效的：

<!-- 這是一個(gè)語句，而非表達(dá)式 -->
{{ var a = 1 }}

<!-- 條件控制也不支持，請使用三元表達(dá)式 -->
{{ if (ok) { return message } }}

調(diào)用函數(shù)#

可以在綁定的表達(dá)式中使用一個(gè)組件暴露的方法：

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

TIP

綁定在表達(dá)式中的方法在組件每次更新時(shí)都會(huì)被重新調(diào)用，因此不應(yīng)該產(chǎn)生任何副作用，比如改變數(shù)據(jù)或觸發(fā)異步操作。

受限的全局訪問#

模板中的表達(dá)式將被沙盒化，僅能夠訪問到有限的全局對(duì)象列表。該列表中會(huì)暴露常用的內(nèi)置全局對(duì)象，比如 Math 和 Date。

沒有顯式包含在列表中的全局對(duì)象將不能在模板內(nèi)表達(dá)式中訪問，例如用戶附加在 window 上的屬性。然而，你也可以自行在 app.config.globalProperties 上顯式地添加它們，供所有的 Vue 表達(dá)式使用。

指令 #

指令是帶有 v- 前綴的特殊屬性。Vue 提供了許多內(nèi)置指令，包括上面我們所介紹的 v-bind 和 v-html。

指令 屬性的期望值為一個(gè) JavaScript 表達(dá)式 (除了少數(shù)幾個(gè)例外，即之后要討論到的 v-for、v-on 和 v-slot)。一個(gè)指令的任務(wù)是在其表達(dá)式的值變化時(shí)響應(yīng)式地更新 DOM。以 v-if 為例：

<p v-if="seen">Now you see me</p>

這里，v-if 指令會(huì)基于表達(dá)式 seen 的值的真假來移除/插入該 <p> 元素。

參數(shù) Arguments#

某些指令會(huì)需要一個(gè)“參數(shù)”，在指令名后通過一個(gè)冒號(hào)隔開做標(biāo)識(shí)。例如用 v-bind 指令來響應(yīng)式地更新一個(gè) HTML 屬性：

<a v-bind:href="url"> ... </a>

<!-- 簡寫 -->
<a :href="url"> ... </a>

這里 href 就是一個(gè)參數(shù)，它告訴 v-bind 指令將表達(dá)式 url 的值綁定到元素的 href 屬性上。在簡寫中，參數(shù)前的一切 (例如 v-bind:) 都會(huì)被縮略為一個(gè) : 字符。

另一個(gè)例子是 v-on 指令，它將監(jiān)聽 DOM 事件：

<a v-on:click="doSomething"> ... </a>

<!-- 簡寫 -->
<a @click="doSomething"> ... </a>

這里的參數(shù)是要監(jiān)聽的事件名稱：click。v-on 有一個(gè)相應(yīng)的縮寫，即 @ 字符。我們之后也會(huì)討論關(guān)于事件處理的更多細(xì)節(jié)。

動(dòng)態(tài)參數(shù)#

同樣在指令參數(shù)上也可以使用一個(gè) JavaScript 表達(dá)式，需要包含在一對(duì)方括號(hào)內(nèi)：

<!--
注意，參數(shù)表達(dá)式有一些約束，
參見下面“動(dòng)態(tài)參數(shù)值的限制”與“動(dòng)態(tài)參數(shù)語法的限制”章節(jié)的解釋
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 簡寫 -->
<a :[attributeName]="url"> ... </a>

這里的 attributeName 會(huì)作為一個(gè) JavaScript 表達(dá)式被動(dòng)態(tài)執(zhí)行，計(jì)算得到的值會(huì)被用作最終的參數(shù)。舉例來說，如果你的組件實(shí)例有一個(gè)數(shù)據(jù)屬性 attributeName，其值為 "href"，那么這個(gè)綁定就等價(jià)于 v-bind:href。

相似地，你還可以將一個(gè)函數(shù)綁定到動(dòng)態(tài)的事件名稱上：

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 簡寫 -->
<a @[eventName]="doSomething">

在此示例中，當(dāng) eventName 的值是 "focus" 時(shí)，v-on:[eventName] 就等價(jià)于 v-on:focus。

動(dòng)態(tài)參數(shù)值的限制#

動(dòng)態(tài)參數(shù)中表達(dá)式的值應(yīng)當(dāng)是一個(gè)字符串，或者是 null。特殊值 null 意為顯式移除該綁定。其他非字符串的值會(huì)觸發(fā)警告。

動(dòng)態(tài)參數(shù)語法的限制#

動(dòng)態(tài)參數(shù)表達(dá)式因?yàn)槟承┳址木壒视幸恍┱Z法限制，比如空格和引號(hào)，在 HTML 屬性名稱中都是不合法的。例如下面的示例：

<!-- 這會(huì)觸發(fā)一個(gè)編譯器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果你需要傳入一個(gè)復(fù)雜的動(dòng)態(tài)參數(shù)，我們推薦使用計(jì)算屬性替換復(fù)雜的表達(dá)式，也是 Vue 最基礎(chǔ)的概念之一，我們很快就會(huì)講到。

當(dāng)使用 DOM 內(nèi)嵌模板 (直接寫在 HTML 文件里的模板) 時(shí)，我們需要避免在名稱中使用大寫字母，因?yàn)闉g覽器會(huì)強(qiáng)制將其轉(zhuǎn)換為小寫：

<a :[someAttr]="value"> ... </a>

上面的例子將會(huì)在 DOM 內(nèi)嵌模板中被轉(zhuǎn)換為 :[someattr]。如果你的組件擁有 “someAttr” 屬性而非 “someattr”，這段代碼將不會(huì)工作。單文件組件內(nèi)的模板不受此限制。

修飾符 #

修飾符是以點(diǎn)開頭的特殊后綴，表明指令需要以一些特殊的方式被綁定。例如 .prevent 修飾符會(huì)告知 v-on 指令對(duì)觸發(fā)的事件調(diào)用 event.preventDefault()：

<form @submit.prevent="onSubmit">...</form>

之后在講到 v-on 和 v-model 的功能時(shí)，你將會(huì)看到其他修飾符的例子。

常用指令

什么是指令

• 指令（Directives）是帶有v- 前綴的特殊特性。
  指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)的作用于DOM。

示：點(diǎn)擊上方"WEB網(wǎng)頁設(shè)計(jì)自學(xué)平臺(tái)"↑ 可以訂閱噢！

摘要 51RGB官方微信在學(xué)習(xí)CSS制作知識(shí)之前，我們必須需要認(rèn)識(shí)的HTML什么基礎(chǔ)知識(shí)。

一、必知HTML基礎(chǔ)-CSS教程系列

• 目錄

1. 搞清瀏覽器作用

2. 搞清什么是HTML

3. html作用

4. html我們涉及哪些基礎(chǔ)知識(shí)

5. 常見html單詞及單詞功能作用有哪些

6. html結(jié)構(gòu)

7. html與CSS關(guān)系

1、搞清瀏覽器作用

瀏覽器主要作用是瀏覽網(wǎng)頁作用，在DIV+CSS制作開發(fā)時(shí)候仍然是瀏覽我們制作開發(fā)重構(gòu)網(wǎng)頁作用。瀏覽器可測試我們開發(fā)的CSS網(wǎng)頁兼容性、網(wǎng)頁效果、因開發(fā)疏忽導(dǎo)致錯(cuò)誤等作用。

在CSS測試（CSS工具）里常用瀏覽器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、蘋果Safari、Opera主流瀏覽器。至于傲游、360瀏覽器因?yàn)樗麄兪褂媚阆到y(tǒng)自帶的IE內(nèi)核，所以不必考慮，只要支持你瀏覽器版本即支持類似這2款瀏覽器

需要兼容瀏覽器有哪些？http://www.51rgb.com/css-tool/t86.shtml

2、搞清什么是HTML

html是hypertext markup language的縮寫，即超文本標(biāo)記語言。可以這樣理解，HTML文件是一定規(guī)則規(guī)律以html\htm等命名后綴名的文本文件。

3、html作用

HTML作用，通過一定html自身語法結(jié)構(gòu)（html結(jié)構(gòu)），顯示文字、圖片、動(dòng)畫（flash）、視頻或音頻音樂。而CSS則是配合html實(shí)現(xiàn)漂亮的各式各樣的頁面內(nèi)容。

4、html我們涉及哪些基礎(chǔ)知識(shí)

Html擴(kuò)展名、html源代碼、DOCTYPE、html結(jié)構(gòu)、head標(biāo)簽、charset

5、常見html單詞及單詞功能作用有哪些

a、B(strong)：加粗

b、P：換行實(shí)例：<p>我是第一段內(nèi)容</p><p>我是第二段內(nèi)容</p>

c、Br：提行實(shí)例：我是第一排<br />我是第二排內(nèi)容

d、px：像素、長度寬度單位

實(shí)例：width:30px; 寬度30像素

e、ul、ol、li列表標(biāo)簽實(shí)例：

<ul> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ul> 
<ol> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ol> 

f、div與span：都是html標(biāo)簽

實(shí)例：<div>我占一行</div><span>我多長占多長位置</span>

兩者區(qū)別：DIV占用1整排，而SPAN所占位置是內(nèi)容多少占用多長長度

g、img：圖片引用標(biāo)簽

<img src="/css-images/css-logo.gif" />圖片標(biāo)簽

h、dl dt dd：CSS的另類表格組合

實(shí)例：

<dl>

<dt>我是標(biāo)題</dt>

<dd>列表一</dd>

<dd>列表二</dd>

</dl>

j、title：標(biāo)題標(biāo)簽

實(shí)例：<title>標(biāo)題</title>

特點(diǎn)，在一個(gè)網(wǎng)頁內(nèi)只能使用一次（只能出現(xiàn)一次）

6、html結(jié)構(gòu) - TOP

這里Html結(jié)構(gòu)可用于每次新建制作網(wǎng)頁模板使用。

舊html結(jié)構(gòu)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DIVCSS5標(biāo)題</title>

</head>

<body>

具體網(wǎng)頁呈現(xiàn)內(nèi)容

</body>

</html>

經(jīng)過CSS教程網(wǎng)的DIVCSS5優(yōu)化后的HTML結(jié)構(gòu)（可用于每次新建HTML模板）：

<!DOCTYPE html>

<html>

<title>標(biāo)題</title>

<meta name="keywords" content="關(guān)鍵字" />

<meta name="description" content="網(wǎng)頁描述" />

<link href="這里CSS文件引入地址" rel="stylesheet" type="text/css" />

內(nèi)容www.divcss5.com提供

7、html與CSS關(guān)系 - TOP

搞清楚html與CSS關(guān)系很重要，也是認(rèn)識(shí)CSS基礎(chǔ)。html與CSS關(guān)系解釋：HTML內(nèi)放置顯示網(wǎng)頁要顯示的具體內(nèi)容（圖片、文字、動(dòng)畫等）而CSS是控制HTML內(nèi)這些具體內(nèi)容的怎么顯示、怎么排版、顏色、大小、寬度、高度、左右布局等顯示樣式。

以上7點(diǎn)是學(xué)習(xí)CSS的html基礎(chǔ)，可能還不完善，但是在以后運(yùn)用的時(shí)候DIVCSS5會(huì)給大家詳細(xì)、本簡單CSS教程分為15節(jié)，此節(jié)DIV CSS教程以文字內(nèi)容為主，以后會(huì)穿插更多實(shí)例和圖例、跟我做的內(nèi)容希望對(duì)大家能有幫助。