[[380620]]

 一、什么是Vue.js?

Vue 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

二、什么是v-model指令?

v-model指令是：它負責監聽用戶輸入事件，從而更新數據，并對一些極端場景進行一些特殊的處理。使用v-model指令，可以實現表單元素和Model中數據的雙向數據綁定，v-model只能運用在表單元素中。

怎么使用v-model指令?

1、首先創建一個組件，在src/components/文件夾下新建一個day01.vue。

2、在day01.vue寫p元素和input元素，在input元素使用v-model。

3、在App.vue導入這個day01.vue組件，然后在template中加入day標簽。

代碼如下圖所示：

效果圖：

三、使用v-model實現簡單的加減乘除計算器

1、在template里實現頁面布局;

2、在data定義n1和n2表示第一個數和第二個數，result表示結果、opt表示加減乘除;

3、在methods里處理自定義的方法，使用swith表達式實現加減乘除。

代碼如下圖所示：

效果圖：

四、實現跑馬燈的效果

1、 給跑馬燈滾動按鈕，綁定一個點擊事v-on或@;

2、 在按鈕的事件處理函數中，寫相關的業務邏輯代碼：拿到 msg 字符串，然后調用字符串的 substring 來進行字符串的截取操作，把第一個字符截取出來，放到最后一個位置;

3、為了實現點擊下按鈕，自動截取的功能，放到一個定時器中去;

代碼如下圖所示：

效果圖：

五、總結

1、使用v-model 指令，實現表單元素和 Model 中數據的雙向數據綁定，v-model只能運用在表單元素中。使用v-model實現簡單的計算器，對v-model進一步的了解。

2、代碼比較簡單，希望可以幫助到你。

本文轉載自微信公眾號「IT共享者」，可以通過以下二維碼關注。轉載本文請聯系IT共享者公眾號。