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

資訊專欄INFORMATION COLUMN

Vue2.5筆記：Vue中的模版

shevy / 3495人閱讀

摘要：模版語法中的模版是基于的模版語法，所有的模版都是合法的，所以能被遵循規(guī)范的瀏覽器和解析器解析。表達(dá)式模版中不僅僅可以進(jìn)行簡單的數(shù)據(jù)綁定操作，我們還可以在模版中進(jìn)行簡單的表達(dá)式。我們也簡單的敘述了模版編譯的整個(gè)流程。

我們?cè)谏弦黄f到如何把 Vue 實(shí)例中的數(shù)據(jù)顯示到視圖中，就會(huì)需要用到我們的模版，我們只是簡單的使用了一些，模版其實(shí)還有很多其他的特性。今天我們就來看看模版的其他特性。

模版語法

Vue 中的模版是基于 HTML 的模版語法，所有的 Vue 模版都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。這也非常符合 Vue 的易用的特點(diǎn)減少開發(fā)者的學(xué)習(xí)成本。

在底層實(shí)現(xiàn)上，Vue 將模版編譯成虛擬 DOM 渲染函數(shù)，結(jié)合響應(yīng)式系統(tǒng)，Vue 能夠智能地計(jì)算出最少需要重新渲染多少組件，并把 DOM 操作次數(shù)減到最少。

但是如果你是 React 的開發(fā)者或者你熟悉虛擬 DOM 并且偏愛原生 Javascript，你完全可以不使用模版，而是直接使用渲染函數(shù)（render）或者使用 JSX 語法。


    
超帥的 {{name}}

可以看到我們想要的效果顯示出來了，在這里我們用到了模版最常見的數(shù)據(jù)綁定形式 “Mustache”語法 (雙大括號(hào)) 語法，Mustache 標(biāo)簽將會(huì)被數(shù)據(jù)中相對(duì)應(yīng)的屬性替換，并且綁定的對(duì)象的屬性發(fā)生了改變，差值處的內(nèi)容也會(huì)響應(yīng)的改變。

開心一刻：Mustache 的中文意思是胡子，但是我怎么看 {{ }} 這個(gè)也不像胡子啊，不知道老外怎么起的這個(gè)名字。

有人可能會(huì)想到 Mustache 語法是不是也可以綁定 HTML 元素的屬性呢？

其實(shí)這里是不能這么做的，Mustache 語法不能用來綁定 HTML 元素的屬性，那如果我們需要綁定元素的屬性 Vue 給我們提供了一個(gè)指令方法 v-bind 利用這個(gè)我們可以進(jìn)行元素屬性的綁定。

上面說到只要修改我們綁定的數(shù)據(jù)差值綁定的內(nèi)容也會(huì)跟著替換，不過 Vue 中給我們提供了一個(gè)指令可以改變這一特性，我們可以通過使用 v-once 指令當(dāng)數(shù)據(jù)改變時(shí)我們的內(nèi)容也不會(huì)被替換。

表達(dá)式

模版中不僅僅可以進(jìn)行簡單的數(shù)據(jù)綁定操作，我們還可以在模版中進(jìn)行簡單的 Javascript 表達(dá)式。


    
超帥的 {{name}} 僅僅只有 {{age + 1}} 歲

這里支持＋、－、＊、／ 四個(gè)運(yùn)算方法；除了運(yùn)算方法之外，我們還可以使用 三元表達(dá)式 我們來看看一個(gè)例子


    
超帥的 {{name}} {{ realAge > 18 ? "不是" : "是" }} 未成年 


    
超帥的 {{name}} {{ fakeAge > 18 ? "不是" : "是" }} 未成年

既然我們用到了三元表達(dá)式 我們肯定會(huì)想到 if 語句，但是 Vue 只提供我們?cè)谀０嬷惺褂帽容^簡單的表達(dá)式（單個(gè)表達(dá)式），如果你的邏輯比較復(fù)雜，你不應(yīng)該在模版中進(jìn)行，而且應(yīng)該在我們的實(shí)例的方法內(nèi)進(jìn)行。

下面我們繼續(xù)看一個(gè)例子，我們?nèi)绾卫盟M(jìn)行字符的反轉(zhuǎn)效果。


    
{{ name }} 

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

我們可以看到 Mustache 語法非常的強(qiáng)大，上面的表達(dá)式我們只是使用了一個(gè)方面，我們還可以進(jìn)行很多方面的應(yīng)用。

Vue 中除了使用 Mustache 語法（ {{ }} ）將數(shù)據(jù)插入到模版中，我們還可以使用兩個(gè)指令 v-text 和 v-html 進(jìn)行數(shù)據(jù)到插入。

我們?cè)谑褂媚０娴臅r(shí)候不僅僅只有數(shù)據(jù)的插入有時(shí)候我們也會(huì)根據(jù)一定的條件進(jìn)行模版渲染，這時(shí)候我們就可以用 v-if 和 v-show，不僅如此我們還會(huì)經(jīng)常進(jìn)行列表和模版的循環(huán)我們會(huì)用到 v-for 指令。這些在后續(xù)的章節(jié)中我們會(huì)一一說到。

模版的渲染

在文章的一開始我們已經(jīng)提到，Vue 的模版是基于 HTML 的，我們也可以使用虛擬 DOM 和 JSX 語法。

從上面的圖中我們看到 Vue 的整個(gè)模版的渲染過程，首先我們的模版編譯為AST（抽象語法樹），再由 AST 生成渲染函數(shù)，由渲染函數(shù)結(jié)合數(shù)據(jù)生成 Virtual DOM 樹，之后對(duì)Virtual DOM 進(jìn)行 diff 和 path之后生成新的 UI

總結(jié)

本文主要進(jìn)行來模版語法的介紹，我們不僅僅可以使用它將數(shù)據(jù)插入在模版中，還可以進(jìn)行簡單的表達(dá)式的計(jì)算。我們也簡單的敘述了模版編譯的整個(gè)流程。當(dāng)然了模版渲染的過程中還有很多的細(xì)節(jié)我們沒有說明，但是一點(diǎn)也不影響我們對(duì)于項(xiàng)目的開發(fā)與使用 Vue 如果你對(duì)整個(gè)渲染的細(xì)節(jié)非常感興趣也可以自信查閱資料進(jìn)行了解。

關(guān)注微信公眾號(hào)：六小登登。領(lǐng)取全套學(xué)習(xí)資源

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98057.html

相關(guān)文章

  • Vue2.5筆記：Vue的實(shí)例與生命周期

    摘要：總結(jié)這邊文章主要是介紹了下的實(shí)例與生命周期，在實(shí)例化的過程中我們可以添加許多可選對(duì)象，比如生命周期鉤子函數(shù)等，讓實(shí)例產(chǎn)生我們想要的行為。 理解與認(rèn)識(shí) Vue 的實(shí)例是我們學(xué)習(xí) Vue 非常重要的一步，也是非常必須的，因?yàn)閷?shí)例是它的一個(gè)起點(diǎn)，也是它的一個(gè)入口，只有我們創(chuàng)建一個(gè) Vue 實(shí)例之后，我們才行利用它進(jìn)行一些列的操作。 首先 Vue 沒有完全遵守 MVVM 的架構(gòu)模式，但是它的設(shè)...

    Ashin 評(píng)論0 收藏0

  • Vue2.5筆記：如何在項(xiàng)目中使用和配置Vue

    摘要：最開始的項(xiàng)目開發(fā)中，我們?nèi)绻褂玫谌降膸煳覀儠?huì)直接在項(xiàng)目中直接使用元素標(biāo)簽引入即可。安裝成功之后，我們執(zhí)行以下命令就可以創(chuàng)建一個(gè)完整的項(xiàng)目案例。 最開始的項(xiàng)目開發(fā)中，我們?nèi)绻褂玫谌降膸煳覀儠?huì)直接在項(xiàng)目中直接使用 script 元素標(biāo)簽引入即可。 Vue 我們也可以這種引入的方式 {{name}} const vm = new Vue({ el: #r...

    wangym 評(píng)論0 收藏0

  • (原創(chuàng))vue 學(xué)習(xí)筆記

    摘要：菜鳥教程這是一個(gè)屬性其值是字符串菜鳥教程同上這是一個(gè)屬性其值是字符串用于定義的函數(shù)，可以通過來返回函數(shù)值。它們都有前綴，以便與用戶定義的屬性區(qū)分開來。 開篇語 我最近學(xué)習(xí)了js,取得進(jìn)步,現(xiàn)在學(xué)習(xí)vue.js.建議新手學(xué)習(xí),請(qǐng)不要用npm的方式(vue-cli,vue腳手架),太復(fù)雜了. 請(qǐng)直接下載vue.js文件本地引入,就上手學(xué)習(xí)吧參照菜鳥教程網(wǎng)站的vue.js教程http://...

    layman 評(píng)論0 收藏0

  • Vue2.5筆記：v-if 和 v-show指令

    摘要：并在上面使用，最終渲染結(jié)果將不包括元素。另外一個(gè)根據(jù)條件展示元素的指令，用法與大致相同。注意，不支持元素，也不支持與看完了文章，你會(huì)發(fā)現(xiàn)我們可以利用和兩個(gè)指令來控制我們?cè)氐男袨椤? 熟悉 Angular 的同學(xué)對(duì)指令肯定不會(huì)陌生，Vue中也借鑒了指令這一特性，在 Vue 中指令都是帶有 v- 的特殊屬性，那么指令有什么作用呢？ 我的理解就是：指令是用來控制 DOM 元素的行為，例如最...

    BigTomato 評(píng)論0 收藏0

  • 前方來報(bào)，八月最新資訊--關(guān)于vue2&3的最佳文章推薦

    摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個(gè)鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運(yùn)，我不曉得。我只曉得，不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...

    izhuhaodev 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

shevy

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<