原创 vue-cli之組件的簡單使用

進入src目錄下的components建立header.vue, 第一步,在App.vue中引入 import header from './components/header/header'; 第二步,在App.vue中註冊

原创 Vue之過渡組件的鉤子函數

vue的過渡組件一般是在css裏面通過enter-active和leave-active來完成一個完整的過渡,但是在做比如餓了麼將小球從選取食物的加好的那個圖片的位置拋到購物車logo的栗子裏只需要拋進去的動畫不需要拋出來的,即小

原创 vue之API—目錄提示

費老大勁兒把vue的api目錄加提示手打了一遍,加深印象! **全局配置** silent 取消vue所有日誌警告 devtools 配置是否允許vue-devtools檢查

原创 Vue之ref與refs的使用

官方解釋是:ref被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件實例: 如template裏使用

原创 Vue之父子、同級組件的通信詳解

在組件的通信上vue2.0棄用1.0中dispatch和 broadcast的原因在於依賴組件樹結構的事件流,當組件樹變得很大時很難推理(簡單地說:它不能在大型應用很好地擴展,我們不希望以後給你設置痛點)。dispatch和 br

原创 Vue之通過http服務打開build後的項目

vue的打包命令是npm run build,打包完直接打開頁面是不行的,只能看到加載的靜態資源,需要啓動一個HTTP服務,然後訪問到打包後dist目錄下的文件才能看到完整的項目,方法如下: 第一,在根目錄下config/ind

原创 Flex佈局之學習筆記二

這篇講的是容器裏面元素的屬性設置: 1,order order: <integer>; 定義元素的排列順序。數值越小,排列越靠前,默認爲0 2,flex-grow flex-grow: <number>; /* default 0

原创 正則驗證信息

網上搜出來的正則驗證信息或多或少都有不對的地方,經過改正,總結出幾個比較常用的方法: 1,手機號格式驗證 /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5

原创 vue集成百度離線地圖

項目裏集成了百度地圖的一些功能,因客戶方是內網項目,瓦片需要部署在本地,因此記錄下在本地集成百度地圖的需求的解決方法~~ 1、下載npm地圖包 npm i vue-baidu-map --S 2、配置webpack。例如vue-

原创 Js獲取元素相對適口位置

getBoundingClientRect()方法返回一個矩形對象,包含四個屬性:left、top、right和bottom,分別表示元素各邊與頁面上邊和左邊的距離。用法如下 let rect = element.getBou

原创 Vue之this.$nextTick()方法

vue組件裏操作dom以及dom上的數據變化很頻繁,this.$nextTick()這個方法作用是當數據被修改後使用這個方法會回調獲取更新後的dom再render出來,如下例子: 在methods定義一個方法,這個方法來定義BS

原创 Vue之2.x版本父子組件雙向綁定事件

以前面試的時候技術很自然的問到你知道vue有什麼特點嗎,那時候沒深入瞭解vue,僅僅是對vue1.0的一些知識學習一點,於是乎順口說vue能雙向綁定數據,現在想想真尷尬啊,vue2.0已經移除了雙向綁定,需要自己動手去實現纔行。下

原创 Vue之2.x實現props雙向綁定

vue2.0版本的props遵循單項數據流的準則,目的是防止雙向綁定導致數據流向改動混亂,但業務中難免遇到需要對props進行雙向綁定,封裝子組件調用,實現組件的高複用性,例如element ui組件中的組件設計亦是如此。 通過閱

原创 動態生成的節點自身所具有之事件

一般在網頁上會有不少節點的數據是根據數據庫的數據進行更新的,這種節點都由js文件控制進行動態生成,那麼綁定點擊事件的代碼塊會比生成節點的代碼塊先執行,那後生成的節點就不會被綁定上事件,這時候需要用到監聽的方法,代碼如下: 需求是

原创 vue之滾動軸插件better-scroll

跟做慕課網的vue高仿外賣項目中用到了一個很好用的插件BScroll,用來計算左側menu欄對應右側foods欄相應顯示的食物區,如果不用插件就比較費事了,因此這裏分享一下這個插件的簡單使用: 一,項目中下載,並引入 在配置文