Vue的學(xué)習(xí)筆記（上篇）
點(diǎn)擊上方“IT共享之家”，進(jìn)行關(guān)注
回復(fù)“資料”可獲贈(zèng)Python學(xué)習(xí)福利
一、什么是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ù)，并對(duì)一些極端場(chǎng)景進(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)簡(jiǎ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)簡(jiǎn)單的計(jì)算器，對(duì)v-model進(jìn)一步的了解。
2、代碼比較簡(jiǎn)單，希望可以幫助到你。
看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人
IT共享之家
入群請(qǐng)?jiān)谖⑿藕笈_(tái)回復(fù)【入群】
-------------------?End?-------------------
往期精彩文章推薦：