單組件綁定文本數據呢？vue給我們提供了兩個方案，一個是用v-text標簽，另一個是用雙大括號。首先測試一下v-text標簽。
圖4-10 運行結果
結果如圖4-10所示。除了用v-text標簽，另一種辦法是用雙大括號，比如，代碼還可以這樣寫。
{{errmsg}}
兩種方法的效果是一樣的，一般推薦使用v-text標簽，因為如果用雙大括號的方式，則在瀏覽器加載速度較慢的情況下會看到{{errmsg}}一閃而過的畫麵，這樣的話，用戶體驗不是很好。順帶說一句，如果想要顯示htmL代碼，則可以用v-html標簽。
好了，以上就是vue第一式——簡單數據綁定的全部內容了。
4.5 vue第二式——靈活有趣的事件綁定
4.5.1 v-on監聽事件
本節講解vue第二式——靈活有趣的事件綁定。首先，最基礎的，關於事件綁定，第一個要學會vue事件監聽。什麼是事件監聽呢？簡單來說，比如你要去捕獵魔獸，抓一隻狂暴飛天虎，可能需要事先設置一個陷阱，等到老虎走進陷阱，就會使機關被觸發。那麼，這個等待的過程，就叫作監聽，監聽什麼呢？就是監聽魔獸上鉤這個事件！
在htmL的世界裡，與事件監聽有關的大部分是表單組件。比如一個input框，你用鼠標單擊了一下，這就是一個獲得焦點事件；用鍵盤“劈裡啪啦”一頓敲，這就是一個輸入框值變化事件；敲鍵盤敲累了，鼠標指針離開輸入框，在外麵隨便什麼地方點了一下，這又是一個失去焦點事件；一個按鈕，你按了一下，這就是一個單擊事件；不小心手一抖點快了，連續點了兩下，這又是一個雙擊事件。可以說，事件無處不在。利用傳統的方式，可以給組件添加onclick屬性，以達到事件綁定的目的。在vue中，則可以使用v-on：事件名稱的方法進行事件綁定。
比如，還是之前的頁麵，我們要製作一個效果，就是當選中某一個輸入框的時候，就給這個輸入框添加一個外邊距margin。這該怎麼做呢？很簡單，首先明確這是一個獲得焦點事件。具體的行為是鼠標在用戶名的輸入框上單擊一下，用戶名的輸入框就添加一個外邊距margin。代碼如下，第一步是綁定事件。
請到𝐨𝐨𝐩.𝐭𝐰查看完整章節
= user size= 16>
handlefocus是一個函數的名字，在vue中，所有的處理函數都需要在methods屬性裡麵設置，代碼如下。
this.usernamestyle代表vue對象的data中有一個屬性叫作usernamestyle，它的值是一個json對象，用來設置username的輸入框樣式。我們還要在data裡麵添加這個數據變量，默認值設置一個空對象即可。
運行代碼後可以發現，在選中username的輸入框的時候，margin的效果就體現出來了。
圖4-11 運行結果
結果如圖4-11所示。同時，當username的輸入框失去焦點時，應該讓margin變回原樣，代碼如下。xʟ
。下如碼代的數函
。下如碼代，色紅粉成變改色顏框邊將，候時的點焦得獲在。色顏的框邊變改如比，效特他其些一試嘗以可也，然當
。到講中節章的麵後在會們我，定綁性屬euv是法寫的elyts：。的效等是式方的定綁件事種兩這。kcilc@成寫簡與可還，kcilc：no-v寫以可，件事擊單個一定綁要需們我，如比。”@“用是就，法寫的便簡種一了供提還euv，外另。法做貫一的euv是聽監件事行進no-v用，是的明說外額要需
泡冒件事理處 2.5.4
。麵裡性屬sdohtem的象對euv在寫要需數函個這，數函理處個一應對聽監件事。號符”@“用接直是就，式形寫簡種一了供提還euv，外另。性屬xxx：no-v加添上件組單表的應對在要需就，聽監件事加添想要。件事多很加添以可它，框入輸tupni如比，的麵上件組單表在用是都般一聽監件事，下一習複單簡先首。製機的聽監件事理處euv了講們我，節一上
。的泡冒件事理處何如是euv看一看們我讓，節一這
：是別分們它，用使者發開便方以符飾修件事種多了供提sj.euv，種一的符飾修件事euv是泡冒件事
。碼代的前之用使是還們我，矩規老。吧來出現重景場個這把碼代的際實用們我讓就在現。件事擊單的vid父發觸再，件事擊單的vid子發觸先是就果結？呢辦咋麼那，vid父是還vid子擊單想底到你道知不又麵頁，麵裡vid父在vid子為因，候時的vid子擊單當。件事擊單個一有也vid子，件事擊單個一有vid父；vid子了套嵌vid父，vid個2有：況情的樣這有在現設假。吧子例個一舉是還們我，澀晦點有念概的泡冒件事，吧泡冒件事說說先
21-4圖
