建站
咨詢
售后
建站咨詢
新聞中心
一、什么是Vue.js?
成都創(chuàng)新互聯(lián)公司專注于北海街道企業(yè)網站建設,響應式網站,電子商務商城網站建設。北海街道網站建設公司,為北海街道等地區(qū)提供建站服務。全流程定制網站制作，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務
Vue 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
二、什么是v-model指令?
v-model指令是：它負責監(jiān)聽用戶輸入事件，從而更新數據，并對一些極端場景進行一些特殊的處理。使用v-model指令，可以實現(xiàn)表單元素和Model中數據的雙向數據綁定，v-model只能運用在表單元素中。
怎么使用v-model指令?
1、首先創(chuàng)建一個組件，在src/components/文件夾下新建一個day01.vue。
2、在day01.vue寫p元素和input元素，在input元素使用v-model。
3、在App.vue導入這個day01.vue組件，然后在template中加入day標簽。
代碼如下圖所示：
效果圖：
三、使用v-model實現(xiàn)簡單的加減乘除計算器
1、在template里實現(xiàn)頁面布局;
2、在data定義n1和n2表示第一個數和第二個數，result表示結果、opt表示加減乘除;
3、在methods里處理自定義的方法，使用swith表達式實現(xiàn)加減乘除。
代碼如下圖所示：
效果圖：
四、實現(xiàn)跑馬燈的效果
1、 給跑馬燈滾動按鈕，綁定一個點擊事v-on或@;
2、 在按鈕的事件處理函數中，寫相關的業(yè)務邏輯代碼：拿到 msg 字符串，然后調用字符串的 substring 來進行字符串的截取操作，把第一個字符截取出來，放到最后一個位置;
3、為了實現(xiàn)點擊下按鈕，自動截取的功能，放到一個定時器中去;
代碼如下圖所示：
效果圖：
五、總結
1、使用v-model 指令，實現(xiàn)表單元素和 Model 中數據的雙向數據綁定，v-model只能運用在表單元素中。使用v-model實現(xiàn)簡單的計算器，對v-model進一步的了解。
2、代碼比較簡單，希望可以幫助到你。
本文轉載自微信公眾號「IT共享者」，可以通過以下二維碼關注。轉載本文請聯(lián)系IT共享者公眾號。
當前標題：聊聊Vue的學習之一
分享鏈接：http://www.dlmjj.cn/article/dhpjgjc.html
