[[380620]]

 一、什么是Vue.js?

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。

二、什么是v-model指令?

v-model指令是：它負(fù)責(zé)監(jiān)聽用戶輸入事件，從而更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊的處理。使用v-model指令，可以實(shí)現(xiàn)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定，v-model只能運(yùn)用在表單元素中。

怎么使用v-model指令?

1、首先創(chuàng)建一個(gè)組件，在src/components/文件夾下新建一個(gè)day01.vue。

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

3、在App.vue導(dǎo)入這個(gè)day01.vue組件，然后在template中加入day標(biāo)簽。

代碼如下圖所示：

效果圖：

三、使用v-model實(shí)現(xiàn)簡單的加減乘除計(jì)算器

1、在template里實(shí)現(xiàn)頁面布局;

2、在data定義n1和n2表示第一個(gè)數(shù)和第二個(gè)數(shù)，result表示結(jié)果、opt表示加減乘除;

3、在methods里處理自定義的方法，使用swith表達(dá)式實(shí)現(xiàn)加減乘除。

代碼如下圖所示：

效果圖：

四、實(shí)現(xiàn)跑馬燈的效果

1、 給跑馬燈滾動(dòng)按鈕，綁定一個(gè)點(diǎn)擊事v-on或@;

2、 在按鈕的事件處理函數(shù)中，寫相關(guān)的業(yè)務(wù)邏輯代碼：拿到 msg 字符串，然后調(diào)用字符串的 substring 來進(jìn)行字符串的截取操作，把第一個(gè)字符截取出來，放到最后一個(gè)位置;

3、為了實(shí)現(xiàn)點(diǎn)擊下按鈕，自動(dòng)截取的功能，放到一個(gè)定時(shí)器中去;

代碼如下圖所示：

效果圖：

五、總結(jié)

1、使用v-model 指令，實(shí)現(xiàn)表單元素和 Model 中數(shù)據(jù)的雙向數(shù)據(jù)綁定，v-model只能運(yùn)用在表單元素中。使用v-model實(shí)現(xiàn)簡單的計(jì)算器，對v-model進(jìn)一步的了解。

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

本文轉(zhuǎn)載自微信公眾號「IT共享者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系IT共享者公眾號。