數(shù)據(jù)渲染
對比 {{}} , v-text, v-html的區(qū)別
頁面效果
代碼解析：
<!-- v-text 會將元素原本的內(nèi)容覆蓋 -->
<h3 v-text="message">借問妹紙何處有珊肃？</h3>
<!-- v-text的值實質(zhì)是js變量，而非字符串策吠，因此可以執(zhí)行表達(dá)式 -->
<h3 v-text="title + message">借問妹紙何處有？</h3>
<!-- {{}} 僅是渲染數(shù)據(jù)派继，并不會覆蓋原來的數(shù)據(jù) -->
<h3> {{ message }}借問妹紙何處有排监？</h3>
<!-- 只是渲染文本，不會解析html -->
<h3 v-text="html_message"></h3>
<!-- 會對html進(jìn)行解析 -->
<h3 v-html="html_message"></h3>
屬性綁定
v-bind 用于對html標(biāo)簽的屬性進(jìn)行值綁定玖瘸，可縮寫為 :
頁面效果
代碼解析：
<div>
<!-- link只是字符串 -->
<a href="link" v-text="title"></a>
</div>
<div>
<!-- link是vm實例中的變量 -->
<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效果
