vue.js學(xué)習(xí)筆記之v-bind和v-on解析

更新時(shí)間：2018年05月03日 09:23:41 作者：MissBean

這篇文章主要介紹了vue.js學(xué)習(xí)筆記之v-bind和v-on解析，v-bind 指令用于響應(yīng)地更新 HTML 特征，v-on 指令用于監(jiān)聽DOM事件，文中還給大家提到了v-bind,v-on的縮寫，感興趣的朋友參考下吧

v-bind 指令用于響應(yīng)地更新 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版本后才有的這兩個(gè)指令

v-bind,v-on的縮寫

構(gòu)建單頁應(yīng)用（SPA ）時(shí)，Vue.js 會(huì)管理所有的模板，此時(shí) v- 前綴也沒那么重要了。因此Vue.js 為兩個(gè)最常用的指令 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學(xué)習(xí)筆記之v-bind和v-on解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

v-bind
v-on

相關(guān)文章

解決Vue3報(bào)錯(cuò):Property?“xxx“?was?accessed?during?render?but
這篇文章主要給大家介紹了關(guān)于解決Vue3報(bào)錯(cuò):Property?“xxx“?was?accessed?during?render?but?is?not?defined?on?instance.的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
解決vue3項(xiàng)目中el-menu不兼容SSR問題
這篇文章主要介紹了解決vue3項(xiàng)目中el-menu不兼容SSR問題,需要的朋友可以參考下
2023-12-12
Vue實(shí)現(xiàn)導(dǎo)出excel表格功能
這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)出excel表格的功能，在文章末尾給大家提到了vue中excel表格的導(dǎo)入和導(dǎo)出代碼,需要的朋友可以參考下
2018-03-03
如何在vue-cli中使用css-loader實(shí)現(xiàn)css module
這篇文章主要介紹了如何在vue-cli中使用css-loader實(shí)現(xiàn)css module，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下
2022-11-11
Vue3使用全局函數(shù)或變量的2種常用方式代碼
在Vue3項(xiàng)目中需要頻繁使用某一個(gè)方法,配置到全局感覺會(huì)方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下
2023-09-09
詳解如何在vue項(xiàng)目中設(shè)置首頁
這篇文章主要給大家介紹如何在vue項(xiàng)目中設(shè)置首頁,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12
vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷圖文詳解
這篇文章主要給大家介紹了關(guān)于vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷的相關(guān)資料,對(duì)vue來說index.html是一個(gè)總的入口文件,vue是單頁面應(yīng)用,掛在id為app的div下然后動(dòng)態(tài)渲染路由模板,需要的朋友可以參考下
2023-09-09
Vue登錄功能的實(shí)現(xiàn)流程詳解
本文主要介紹了Vue實(shí)現(xiàn)登錄功能全套詳解（含封裝axios），文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
Vue實(shí)現(xiàn)商品分類菜單數(shù)量提示功能
這篇文章主要介紹了Vue實(shí)戰(zhàn)—商品分類菜單數(shù)量提示功能，本文通過項(xiàng)目實(shí)戰(zhàn)給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07