數(shù)據(jù)渲染

對(duì)比 {{}} , v-text, v-html的區(qū)別

具體代碼

頁(yè)面效果

代碼解析：

<!-- v-text 會(huì)將元素原本的內(nèi)容覆蓋 -->
<h3 v-text="message">借問妹紙何處有？</h3> 

<!-- v-text的值實(shí)質(zhì)是js變量，而非字符串，因此可以執(zhí)行表達(dá)式 -->
<h3 v-text="title + message">借問妹紙何處有？</h3>

<!-- {{}} 僅是渲染數(shù)據(jù)，并不會(huì)覆蓋原來的數(shù)據(jù) -->
<h3> {{ message }}借問妹紙何處有？</h3> 

<!-- 只是渲染文本，不會(huì)解析html -->
<h3 v-text="html_message"></h3>

<!-- 會(huì)對(duì)html進(jìn)行解析 -->
<h3 v-html="html_message"></h3>

屬性綁定

v-bind 用于對(duì)html標(biāo)簽的屬性進(jìn)行值綁定，可縮寫為 :

具體代碼

頁(yè)面效果

代碼解析：

<div>
    <!-- link只是字符串 -->
    <a href="link" v-text="title"></a>
</div>
<div>
    <!-- link是vm實(shí)例中的變量 -->
    <a v-bind:href="link" v-text="title"></a>
</div>
<div>
    <!-- v-bind的縮寫 -->
    <a :href="link"><img :src="img" alt=""></a>
</div>

綁定事件

v-on綁定js中的事件，縮寫形式為@

具體代碼

v-on效果

如想了解更多的vue實(shí)例，請(qǐng)查閱我的vue筆記目錄