原创 vue tab切換,echartst圖表寬度只有100px問題解決
解決思路：直接將圖表的寬高寫死 1.將圖表放進一個div裏面 <div class="echarts"> <div id="myChart" :style="{width:'100%',height:'150p
2018-12-08 03:34:59
原创 vue 百度圖表插件（echarts ）在vue項目中引入以及使用
1.npm引入 npm install echarts -S 2.在組件中使用 //在組件中先通過import引入插件 import echarts from 'echarts' 3.完整代碼，直接拷貝在組件中就能直接使用 在這
2018-12-08 03:34:59
1
原创 vue 父組件調用子組件方法(ref方式調用)
1.通過ref的方式調用 父組件部分 <template> <div> <button @click="btnParent">我是父組件，調用子組件方法</button> <v-child r
2018-12-06 13:13:02
原创 vue 父組件調用子組件方法(適用於上拉加載loading開關的控制)
1.父組件部分 <template> <div> <!-- :on-child-fun大寫需要拆成 - 的形式，使用大寫報錯 --> <v-child :on-child-fun="onChil
2018-12-06 13:13:02
2
原创 vue 移動端吸頂效果
在移動端中，吸頂效果是非常常見的，在這裏將它封裝成了一個組件，如果在項目中有很多地方要用到，就把它放到src/common裏面，使用也非常的簡單（源碼在最下面） 1.使用方法 爲了方便演示，這裏使用了for循環的方法將屏幕撐滿，直接將
2018-12-06 13:13:02
1
原创 vue slot插槽（內容分發）的使用
簡單來說，就是把父組件的被slot包裹的內容部分放置到子組件指定的位置 父組件部分 <template> <child-slot> <div class="parent"> 我是父組
2018-12-06 13:13:02
原创 vue 通過後臺數據id進行頁面跳轉
1.新建兩個.vue文件 router/index.js import Vue from 'vue' import Router from 'vue-router' import a from '@/components/route
2018-12-06 13:13:02
原创 Easy Mock模擬數據（模擬分頁）
1.模擬分頁數據 注：在這裏默認已經擁有easy mock賬號，並會基本的創建接口， "teamname|1"是隨機返回數組的其中一項， 寫法自行參照mock.js/語法規則 { "counts": 0, "succes
2018-12-06 13:13:02
原创 vue 將後臺數據時間戳轉換成日期格式
1.在src下新建一個common文件夾 – 創建一個文件 – date.js – 將源碼複製上去(源碼在底部) 2.在組件中使用 <template> <div> <p>{{date1 | formatDat
2018-12-06 13:13:02
原创 vue 全局引入axios
1.安裝 網上有多種方法，這裏使用npm的安裝方式： npm install axios 出現如下表示安裝完成： 2.全局註冊axios main.js // The Vue build version to load with
2018-12-06 13:13:02
原创 vue v-if和v-show在實際開發中發現的使用區別
v-show的實現是給元素添加display:none 達到元素隱藏的效果 v-if是直接將元素從頁面上銷燬 tab欄切換就可以非常容易看出它們倆的區別，使用v-show，點擊切換之後，這個時候你會發現無法獲取到另一頁面的頁面整體高度
2018-12-06 13:13:02
原创 vue 監聽滾動條
1.在mounted鉤子函數創建一個滾動條方法 mounted () { window.addEventListener('scroll', this.windowScroll) } 2.在methods方法裏使用
2018-12-06 13:13:02
原创 原生js獲取屏幕寬高，元素寬高/margin/padding
1.獲取屏幕寬高 實現兼容 //獲取屏幕高度 var windowHeight= document.documentElement.clientHeight || document.body.clientHeight; //獲取屏
2018-12-06 13:13:02