vue.js學習筆記之v-bind和v-on解析
更新時間：2018年05月03日 09:23:41 作者：MissBean
這篇文章主要介紹了vue.js學習筆記之v-bind和v-on解析，v-bind 指令用于響應地更新 HTML 特征，v-on 指令用于監(jiān)聽DOM事件，文中還給大家提到了v-bind,v-on的縮寫，感興趣的朋友參考下吧
v-bind 指令用于響應地更新 HTML 特性 形式如：v-bind:href 縮寫為 :href;
v-on 指令用于監(jiān)聽DOM事件 形式如：v-on:click 縮寫為 @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版本后才有的這兩個指令
v-bind,v-on的縮寫
構(gòu)建單頁應用（SPA ）時，Vue.js 會管理所有的模板，此時 v- 前綴也沒那么重要了。因此Vue.js 為兩個最常用的指令 v-bind 和v-on 提供特別的縮寫：
下面給大家介紹下v-bind縮寫：
<!-- 完整語法 --> <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> <!-- 完整語法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 縮寫 --> <button :disabled="someDynamicCondition">Button</button>
v-on縮寫：
<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>
總結(jié)
以上所述是小編給大家介紹的vue.js學習筆記之v-bind和v-on解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
解決Vue3報錯:Property?“xxx“?was?accessed?during?render?but
這篇文章主要給大家介紹了關(guān)于解決Vue3報錯:Property?“xxx“?was?accessed?during?render?but?is?not?defined?on?instance.的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了解決vue3項目中el-menu不兼容SSR問題,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue實現(xiàn)導出excel表格的功能，在文章末尾給大家提到了vue中excel表格的導入和導出代碼,需要的朋友可以參考下2018-03-03
如何在vue-cli中使用css-loader實現(xiàn)css module
這篇文章主要介紹了如何在vue-cli中使用css-loader實現(xiàn)css module，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細講解的相關(guān)資料,需要的朋友可以參考下2022-11-11
在Vue3項目中需要頻繁使用某一個方法,配置到全局感覺會方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹如何在vue項目中設(shè)置首頁,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
vue的index.html中獲取環(huán)境變量和業(yè)務判斷圖文詳解
這篇文章主要給大家介紹了關(guān)于vue的index.html中獲取環(huán)境變量和業(yè)務判斷的相關(guān)資料,對vue來說index.html是一個總的入口文件,vue是單頁面應用,掛在id為app的div下然后動態(tài)渲染路由模板,需要的朋友可以參考下2023-09-09
本文主要介紹了Vue實現(xiàn)登錄功能全套詳解（含封裝axios），文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了Vue實戰(zhàn)—商品分類菜單數(shù)量提示功能，本文通過項目實戰(zhàn)給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07