国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

VUE.js第三課模板語法

lx1036 / 764人閱讀

摘要：模板語法使用了基于的模版語法，允許開發者聲明式地將綁定至底層實例的數據。的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進的系統。指令用于在表達式的值改變時，將某些行為應用到上。

Vue.js 模板語法

Vue.js 使用了基于 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。

Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。

結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。

插值
文本

數據綁定最常見的形式就是使用 {{...}}（雙大括號）的文本插值：
文本插值


{{ message }}


使用 v-html 指令用于輸出 html 代碼：
v-html 指令

屬性

HTML 屬性中的值應使用 v-bind 指令。

以下實例判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
v-bind 指令






directiva v-bind:class


表達式

Vue.js 都提供了完全的 JavaScript 表達式支持。
JavaScript 表達式

{{5+5}}

{{ ok ? "YES" : "NO" }}

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

菜鳥教程

指令

指令是帶有 v- 前綴的特殊屬性。

指令用于在表達式的值改變時，將某些行為應用到 DOM 上。如下例子：
實例

現在你看到我了

參數

參數在指令后以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：
實例

在這里 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。

另一個例子是 v-on 指令，它用于監聽 DOM 事件：

在這里參數是監聽的事件名。

用戶輸入

在 input 輸入框中我們可以使用 v-model 指令來實現雙向數據綁定：
字符串反轉

{{ message }}

按鈕的事件我們可以使用 v-on 監聽事件，并對用戶的輸入進行響應。

以下實例在用戶點擊按鈕后對字符串進行反轉操作：
字符串反轉

{{ message }}

過濾器

Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。由"管道符"指示, 格式如下：


{{ message | capitalize }}


過濾器函數接受表達式的值作為第一個參數。

以下實例對輸入的字符串第一個字母轉為大寫：
實例


{{ message | capitalize }}

過濾器可以串聯：

{{ message | filterA | filterB }}

過濾器是 JavaScript 函數，因此可以接受參數：

{{ message | filterA("arg1", arg2) }}

這里，message 是第一個參數，字符串 "arg1" 將傳給過濾器作為第二個參數， arg2 表達式的值將被求值然后傳給過濾器作為第三個參數。

縮寫
v-bind 縮寫

Vue.js 為兩個最為常用的指令提供了特別的縮寫：




v-on 縮寫




文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/22998.html

相關文章

  • 百度前端學院-基礎學院-第三課

    摘要：第三天讓簡歷有點色彩這一節課是來初步了解什么是，掌握基本的概念，語法，學習如何設置一些簡單的樣式。設置文字陰影。取值較多，具體參考文本布局控制在盒子中的位置。設置字母與字母直接的間距，或者字與字直接的間距。第二步，瀏覽器顯示內容。第三天：讓簡歷有點色彩 這一節課是來初步了解什么是CSS，掌握基本的CSS概念，語法，學習如何設置一些簡單的樣式。 好記性不如爛筆頭，開始： 字體： font-st...

    DobbyKim 評論0 收藏0

  • TRY REGEX：正則表達式交互式入門教程 翻譯&解答

    摘要：寫一個正則表達式來測試變量中是否包含字符串。用函數給出不使用字符，但和等價的正則表達式。第十四課標志全局匹配標志第二個常用的標志是全局匹配標志，用字母表示。寫出一個正則表達式來檢驗合法性。非捕獲組的主要用途是給一個組賦予量詞。 TRY REGEX 是一個交互式的正則表達式學習項目項目地址：https://github.com/callumacra...在線地址：http://tryre...

    李義 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<