建站
咨詢
售后
建站咨詢
新聞中心
一、什么是Vue.js?
成都創(chuàng)新互聯(lián)公司專注于北海街道企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,電子商務(wù)商城網(wǎng)站建設(shè)。北海街道網(wǎng)站建設(shè)公司,為北海街道等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
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)單，希望可以幫助到你。
本文轉(zhuǎn)載自微信公眾號(hào)「IT共享者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系IT共享者公眾號(hào)。
分享名稱：聊聊Vue的學(xué)習(xí)之一
本文網(wǎng)址：http://fisionsoft.com.cn/article/dhpjgjc.html
