聊聊Vue的學習之一
一、什么是Vue.js?
Vue 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。
二、什么是v-model指令?
v-model指令是：它負責監(jiān)聽用戶輸入事件，從而更新數(shù)據(jù)，并對一些極端場景進行一些特殊的處理。使用v-model指令，可以實現(xiàn)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定，v-model只能運用在表單元素中。
怎么使用v-model指令?
1、首先創(chuàng)建一個組件，在src/components/文件夾下新建一個day01.vue。
2、在day01.vue寫p元素和input元素，在input元素使用v-model。
3、在App.vue導入這個day01.vue組件，然后在template中加入day標簽。
代碼如下圖所示：
效果圖：
三、使用v-model實現(xiàn)簡單的加減乘除計算器
1、在template里實現(xiàn)頁面布局;
2、在data定義n1和n2表示第一個數(shù)和第二個數(shù)，result表示結(jié)果、opt表示加減乘除;
3、在methods里處理自定義的方法，使用swith表達式實現(xiàn)加減乘除。
代碼如下圖所示：
效果圖：
四、實現(xiàn)跑馬燈的效果
1、 給跑馬燈滾動按鈕，綁定一個點擊事v-on或@;
2、 在按鈕的事件處理函數(shù)中，寫相關(guān)的業(yè)務邏輯代碼：拿到 msg 字符串，然后調(diào)用字符串的 substring 來進行字符串的截取操作，把第一個字符截取出來，放到最后一個位置;
3、為了實現(xiàn)點擊下按鈕，自動截取的功能，放到一個定時器中去;
代碼如下圖所示：
效果圖：
五、總結(jié)
1、使用v-model 指令，實現(xiàn)表單元素和 Model 中數(shù)據(jù)的雙向數(shù)據(jù)綁定，v-model只能運用在表單元素中。使用v-model實現(xiàn)簡單的計算器，對v-model進一步的了解。
2、代碼比較簡單，希望可以幫助到你。
本文轉(zhuǎn)載自微信公眾號「IT共享者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系IT共享者公眾號。
