點擊上方「IT共享之家」，進行關注vue
回覆「資料」可獲贈Python學習福利微信
1、什麼是Vue.js?
Vue 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。工具
2、什麼是v-model指令？
v-model指令是：它負責監聽用戶輸入事件，從而更新數據，並對一些極端場景進行一些特殊的處理。使用v-model指令，能夠實現表單元素和Model中數據的雙向數據綁定，v-model只能運用在表單元素中。佈局
怎麼使用v-model指令？學習
一、首先建立一個組件，在src/components/文件夾下新建一個day01.vue。flex
二、在day01.vue寫p元素和input元素，在input元素使用v-model。
三、在App.vue導入這個day01.vue組件，而後在template中加入day標籤。
代碼以下圖所示：
效果圖：
3、使用v-model實現簡單的加減乘除計算器
一、在template裏實現頁面佈局；
二、在data定義n1和n2表示第一個數和第二個數，result表示結果、opt表示加減乘除；
三、在methods裏處理自定義的方法，使用swith表達式實現加減乘除。
代碼以下圖所示：
效果圖：
4、實現跑馬燈的效果
一、 給跑馬燈滾動按鈕，綁定一個點擊事v-on或@；
二、 在按鈕的事件處理函數中，寫相關的業務邏輯代碼：拿到 msg 字符串，而後調用字符串的 substring 來進行字符串的截取操做，把第一個字符截取出來，放到最後一個位置；
三、爲了實現點擊下按鈕，自動截取的功能，放到一個定時器中去；
代碼以下圖所示：
效果圖：
5、總結
一、使用v-model 指令，實現表單元素和 Model 中數據的雙向數據綁定，v-model只能運用在表單元素中。使用v-model實現簡單的計算器，對v-model進一步的瞭解。
二、代碼比較簡單，但願能夠幫助到你。
看完本文有收穫？請轉發分享給更多的人
IT共享之家
入羣請在微信後臺回覆【入羣】
------------------- End -------------------
往期精彩文章推薦：
本文分享自微信公衆號 - IT共享之家（info-share）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。