vue開發網頁案例 jsp重構vue _vue開發網頁案例

文章插圖

文章插圖
上期咱們聊到了mvvm模型，這一期咱們來聊一下vue的實例，這個是個很重要的東西，千萬別輕視了，下面開始：
目標：1 了解實例中的data用法和method用法
最基本的實例是什么樣子的呢，是這樣的啦：

el: 表示要操作的頁面元素, 必填參data: 數據, 可以理解為面向對象中的”屬性“，他主要是存儲數據的，當程序運行時，監控頁面傳來的數據，進行修改，啟動時根據他的數據渲染頁面。methods: 方法, 可以理解為面向對象中的”方法“，根據方法可以改變屬性的值，從而改變頁面，請求交互，一系列的操作
這樣理解是不是就很清楚啦？
為了再詳細解釋一下這個概念，咱們來做一個練習：
這個練習很經典，就是實現一個加法器，比如左邊兩個輸入框，右邊為結果框，當左邊輸入時點擊等于=號，計算結果：
目的：鍛煉data和method的理解，下面開始我的表演：

圖片在這里，該腫么辦呢？那按照步驟來吧！
1 先創建html文件，命名method.html

2 完成上文提到的vue三部曲（這個一定要掌握，后面項目要用到）

3 vue三部曲搞完之后搞頁面，創造三個input框，一個按鈕

4使用v-model綁定屬性

5 綁定方法

這樣就可以算出來啦！
【vue開發網頁案例 jsp重構vue】總結：通過兩個input框綁定數值，這樣當input框輸入值時，通過v-model綁定了值，在等于號加上方法，當輸入值時，點擊等于號，調用方法，這樣雙向綁定的方法會計算出來！