1. 程式人生 > >vue第一個應用 vue方法

vue第一個應用 vue方法

ext 實時 提高 部分 響應 技術 hang ado oss

html:
技術分享圖片

JavaScript:
技術分享圖片

實現結果:在input中輸入數據,實時更改title中的內容。

v-on:vue識別的命令。
input:html的響應事件,用戶在input中輸入數據時觸發changeTitle函數。

vue綁定changeTitle函數:
vue的作用域是div 中“ID=app”的部分。
在vue構造方法中添加methods屬性(vue的保留屬性),他的值是一個對象,所以後面是{},在{}中添加你實現的函數方法changeTitle.

this.title 就能夠調用title變量。而不是通過vue.data.title。是由於vue自動將data中的數據變量提高到了vue對象的頂部。所以可以通過this.變量名調用到vue中的變量。

現在存在一個問題,如何將input中用戶輸入的數據復制給title變量。
JavaScript會自動創建一個event對象,通過將event傳遞給changeTitle函數就可以獲取到用戶輸入的數據。
即:this.title = event.target.value;

vue第一個應用 vue方法