上期咱們聊到了mvvm模型，這一期咱們來聊一下vue的實例，這個是個很重要的東西，千萬別輕視了，下面開始：
目標：1 了解實例中的data用法和method用法
最基本的實例是什麼樣子的呢，是這樣的啦：
- el: 表示要操作的頁面元素, 必填參
- data: 數據, 可以理解為面向對象中的”屬性“，他主要是存儲數據的，當程序運行時，監控頁面傳來的數據，進行修改，啟動時根據他的數據渲染頁面。
- methods: 方法, 可以理解為面向對象中的”方法“，根據方法可以改變屬性的值，從而改變頁面，請求交互，一系列的操作
這樣理解是不是就很清楚啦？
為了再詳細解釋一下這個概念，咱們來做一個練習：
這個練習很經典，就是實現一個加法器，比如左邊兩個輸入框，右邊為結果框，當左邊輸入時點擊等於=號，計算結果：
目的：鍛煉data和method的理解，下面開始我的表演：
圖片在這裡，該腫么辦呢？那按照步驟來吧！
1 先創建html文件，命名method.html
2 完成上文提到的vue三部曲（這個一定要掌握，後面項目要用到）
3 vue三部曲搞完之後搞頁面，創造三個input框，一個按鈕
4使用v-model綁定屬性
5 綁定方法
這樣就可以算出來啦！
總結：通過兩個input框綁定數值，這樣當input框輸入值時，通過v-model綁定了值，在等於號加上方法，當輸入值時，點擊等於號，調用方法，這樣雙向綁定的方法會計算出來！
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/205448.html
微信掃一掃 
支付寶掃一掃 