資訊專欄INFORMATION COLUMN
摘要：使用了基于的模板語法，允許開發(fā)者聲明式地將綁定至底層實例的數(shù)據(jù)。過濾器還可以串聯(lián)，在一個插值中使用多個過濾器。上面代碼插值中使用了兩個串聯(lián)的過濾器，過濾器左至右依次執(zhí)行，先轉(zhuǎn)換成了大寫，然后再進(jìn)行了反向的操作。
Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。
1. 插值插值也就是將數(shù)據(jù)插入到html文檔中，包含 文本、html元素、元素屬性等
1.1 文本插值
文本插值中用得最多的就是用雙大括號的形式。
{{msg}}
上面代碼中的 msg 會與實例中的【data】中的屬性綁定在一起，并且數(shù)據(jù)實現(xiàn)同步，也就是說當(dāng)【data】中的值更新之后我們不需要操作html，頁面中會自動更新數(shù)據(jù)。
我們也可以讓數(shù)據(jù)只綁定一次，在以后更新【data】中的屬性時不再更新頁面數(shù)據(jù)
{{msg}}
上面代碼中頁面只會呈現(xiàn)“BLUE”，當(dāng)我改變【data】中的 msg 屬性值時，頁面將不再刷新。
【注意】上面以雙大括號的形式進(jìn)行的插值都會被轉(zhuǎn)換成字符串，如果要插入的是html元素，使用下面這樣的方式。
1.2 HTML插值
在 Vue1.0 中HTML插值使用的是三個大括號的形式，但是在 Vue2.0 中這樣的形式不能使用了，需要使用 v-html 指令
上面代碼將 msg 屬性值作為html元素插入到了 h1 標(biāo)簽的子節(jié)點中，頁面呈現(xiàn)如下
【注意】在頁面上動態(tài)的渲染html是一件很危險的事情，因為它很容易導(dǎo)致 XSS 攻擊 (跨站腳本攻擊)
1.3 屬性插值
要將屬性綁定到html元素中，使用文本插值的形式是行不通的，但是類似 HTML插值，屬性插值也有自己的指令 【v-bind：】
上面代碼使用了【v-bind：】實現(xiàn)了對屬性的插值運算，最終的結(jié)果也就是 h1 標(biāo)簽中有了一個id=name,我們幾乎可以對所有的html屬性按照這樣的方式進(jìn)行插值運算。
上面的代碼都會按照我們的預(yù)期進(jìn)行頁面渲染。
【提示】由于我們對屬性的插值使用得相當(dāng)?shù)亩?，所以Vue考慮到了書寫的方便，為我們提供了簡寫形式，也就是直接只寫一個冒號 【：】進(jìn)行插值運算
上面這段代碼和之前使用的【v-bind:】的運行結(jié)果是一樣的。
1.4 插值中使用Javascript表達(dá)式
插值運算如果只是進(jìn)行值的插入那我們就想得太簡單了，在插值運算中我們還可以應(yīng)用Javascript表達(dá)式對插入的值進(jìn)行處理。
{{name.toUpperCase()}}
上面代碼在插值中使用Javascript表達(dá)式對插值進(jìn)行了處理。
【注意】這里運用的只能是單個表達(dá)式或者鏈?zhǔn)秸{(diào)用，但是不能是語句
{{var a=1}}
上面代碼是會報錯的，因為插值中使用的是語句，而不是表達(dá)式。
2. 指令指令其實在上面我們已經(jīng)使用過了【v-bind:】和【v-html】，指令就是值這些帶有 v- 前綴的特殊屬性。指令屬性的值預(yù)期是單一 JavaScript 表達(dá)式（除了 v-for）。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時相應(yīng)地將某些行為應(yīng)用到 DOM 上。
2.1 指令參數(shù)
一些指令時能夠接收參數(shù)的，比如我們用于屬性綁定的【v-bind】
上面代碼中 id 就是 v-bind 指令的參數(shù)，告知v-bind指令將id 和 did 的值綁定到一起。
2.2 修飾符
修飾符（Modifiers）是以半角句號 . 指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()：
關(guān)于【v-on】指令，待會兒再說。
3. 過濾器我們知道可以在插值運算中使用表達(dá)式，但是表達(dá)式能力畢竟有限，有時我們需要對插值進(jìn)行更復(fù)雜的處理之后呈現(xiàn)在html中，那么我們就需要使用到過濾器了。
過濾器有兩個使用的地放【插值】和【v-bind】中
{{name | myfilter}}
上面代碼中定義了一個myfilter的過濾器，將值進(jìn)行反轉(zhuǎn)輸出。
在構(gòu)造函數(shù) Vue 的參數(shù)對象中有一個【filters】屬性，該屬性是一個對象，對象中以方法的形式定義過濾器，方法名也就是過濾器名稱，方法的參數(shù)也就是插值的值，在過濾器中隊值進(jìn)行處理后返回。
過濾器還可以串聯(lián)，在一個插值中使用多個過濾器。
{{name | touppercase | myfilter}}
上面代碼插值中使用了兩個串聯(lián)的過濾器，過濾器左至右依次執(zhí)行，先轉(zhuǎn)換成了大寫，然后再進(jìn)行了反向的操作。
4. 插值事件綁定上面我們提到可以使用指令的方式綁定屬性，其實事件我們也可以通過一個特殊的指令進(jìn)行綁定，這個指令就是【v-on】，他和原生Javascript的事件前綴 on 是一個意思。
原生Javascript中的所有事件都可以通過這樣的方式進(jìn)行綁定，由于【v-on】的使用頻率非常高，所以Vue為我們提供了簡寫形式，用【@】代替【v-on】，于是下面代碼和上面一段代碼是等效的。
上面代碼也就是使用了簡寫【@】進(jìn)行事件綁定，建議使用簡寫的形式，提高開發(fā)效率。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84637.html
摘要：轉(zhuǎn)換成為模板函數(shù)聯(lián)系上一篇文章，其實模板函數(shù)的構(gòu)造都大同小異，基本是都是通過拼接函數(shù)字符串，然后通過對象轉(zhuǎn)換成一個函數(shù)，變成一個函數(shù)之后，只要傳入對應(yīng)的數(shù)據(jù)，函數(shù)就會返回一個模板數(shù)據(jù)渲染好的字符串。 教程目錄1.手把手教你從零寫一個簡單的 VUE2.手把手教你從零寫一個簡單的 VUE--模板篇 Hello，我又回來了，上一次的文章教會了大家如何書寫一個簡單 VUE，里面實現(xiàn)了VUE 的...
摘要：下面是我這半年以來總結(jié)的學(xué)習(xí)筆記，幫助自己復(fù)習(xí)學(xué)習(xí)的基本用法。全局子組件的注冊與屬性傳遞我是個全局子組件用這種數(shù)據(jù)格式來定義接受的屬性名稱這樣在調(diào)用時候就可以傳遞屬性進(jìn)去今天的筆記學(xué)習(xí)心得就記錄到這里吧第一次用順利 下面是我這半年以來總結(jié)的Vue學(xué)習(xí)筆記，幫助自己復(fù)習(xí)學(xué)習(xí)Vue的基本用法。有需要的同志可以參考下。 Vue的模板語法 Vue有很簡單的模板語法,這些Vue指令用來響應(yīng)式改變...
摘要：本系列是一個教程，下面貼下目錄手把手教你從零寫一個簡單的手把手教你從零寫一個簡單的模板篇今天給大家?guī)淼氖菍崿F(xiàn)一個簡單的類似一樣的前端框架，框架現(xiàn)在應(yīng)該算是非常主流的前端數(shù)據(jù)驅(qū)動框架，今天我們來從零開始寫一個非常簡單的框架，主要是讓大家 本系列是一個教程，下面貼下目錄~1.手把手教你從零寫一個簡單的 VUE2.手把手教你從零寫一個簡單的 VUE--模板篇 今天給大家?guī)淼氖菍崿F(xiàn)一個簡單...
摘要：然而，不同的是計算屬性是基于它們的依賴進(jìn)行緩存的。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。這就意味著只要還沒有發(fā)生改變，多次訪問計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。這是計算屬性無法做到的。 Vue實例 構(gòu)造器 每個 Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個 Vue 的根實例 啟動的： var vm=new Vue({ //...
閱讀 2419·2021-09-30 09:47
閱讀 1405·2021-09-28 09:35
閱讀 3279·2021-09-22 15:57
閱讀 2536·2021-09-22 14:59
閱讀 3676·2021-09-07 10:25
閱讀 3110·2021-09-03 10:48
閱讀 3070·2021-08-26 14:14
閱讀 979·2019-08-30 15:55
