vue.js學(xué)習(xí)筆記之v-bind和v-on解析
v-bind 指令用于響應(yīng)地更新 HTML 特性 形式如：v-bind:href 縮寫(xiě)為 :href;
v-on 指令用于監(jiān)聽(tīng)DOM事件 形式如：v-on:click 縮寫(xiě)為 @click;
<body>
<div id="test">
<img v-bind:src="src">
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
<a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
<a href="{{url}}" rel="external nofollow" >百度一下</a>
<a v-on:click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改圖片</a>
<a @click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改圖片</a>
</div>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
url: "https://www.baidu.com",
src: "img/spring.jpg"16 17 18 },
methods: {
update: function(){
this.src = "img/summer.jpg";
}
}
})
</script>
</body>
note: vue.js 1.0版本后才有的這兩個(gè)指令
v-bind,v-on的縮寫(xiě)
構(gòu)建單頁(yè)應(yīng)用（SPA ）時(shí)，Vue.js 會(huì)管理所有的模板，此時(shí) v- 前綴也沒(méi)那么重要了。因此Vue.js 為兩個(gè)最常用的指令 v-bind 和v-on 提供特別的縮寫(xiě)：
下面給大家介紹下v-bind縮寫(xiě)：
<!-- 完整語(yǔ)法 --> <a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <!-- 縮寫(xiě) --> <a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <!-- 完整語(yǔ)法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 縮寫(xiě) --> <button :disabled="someDynamicCondition">Button</button>
v-on縮寫(xiě)：
<!-- 完整語(yǔ)法 --> <a v-on:click="doSomething"></a> <!-- 縮寫(xiě) --> <a @click="doSomething"></a>
總結(jié)
以上所述是小編給大家介紹的vue.js學(xué)習(xí)筆記之v-bind和v-on解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
elementUI select組件value值注意事項(xiàng)詳解
這篇文章主要介紹了elementUI select組件value值注意事項(xiàng)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue中.vue文件比main.js先執(zhí)行的問(wèn)題及解決
這篇文章主要介紹了Vue中.vue文件比main.js先執(zhí)行的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue新手指南之創(chuàng)建第一個(gè)vue-cli腳手架程序
vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。這篇文章主要給大家介紹了關(guān)于Vue新手指南之創(chuàng)建第一個(gè)vue-cli程序的相關(guān)資料,需要的朋友可以參考下2021-05-05
本篇文章主要介紹了淺談Vue-cli 命令行工具分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue入門學(xué)習(xí)筆記【基本概念、對(duì)象、過(guò)濾器、指令等】
這篇文章主要介紹了Vue入門學(xué)習(xí)筆記,結(jié)合實(shí)例形式分析了vue.js的基本概念、對(duì)象、過(guò)濾器、指令等的相關(guān)原理與簡(jiǎn)單使用方法,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue利用插件實(shí)現(xiàn)按比例切割圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
詳解elementUI中input框無(wú)法輸入的問(wèn)題
這篇文章主要介紹了詳解elementUI中input框無(wú)法輸入的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
詳解使用vue-admin-template的優(yōu)化歷程
這篇文章主要介紹了詳解使用vue-admin-template的優(yōu)化歷程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue中table多選/單選行,獲取其數(shù)據(jù)方式
這篇文章主要介紹了vue中table多選/單選行,獲取其數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯(cuò)位問(wèn)題
這篇文章主要介紹了如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯(cuò)位問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09