原创 模擬後臺數據
JSON文件 mock.json文件模擬後臺數據： [ { "time":"2019年01月09日 (星期三) 選題", "url":"./images/timeImage.png",
2020-06-16 16:41:29
原创 動態綁定圖片
1、使用require，在不調整目錄結構的情況下讀取圖片 缺點：由於common.js只允許使用字符串字面量，故不利於組件化，靈活性較差 <template> <div id="app"> <img :src
2020-06-16 16:41:29
原创 字符串的join和split方法
將數組轉換爲字符串 join() 方法用於把數組中的所有元素放入一個字符串。 元素是通過指定的分隔符進行分隔的。 例子1 <script type="text/javascript"> var arr = new Array(3)
2020-06-16 16:41:29
原创 可視化工具d3（v5）教程
1、用D3更改Hello World <html> <head> <meta charset="utf-8"> <title>HelloWorld</title
2020-06-16 16:41:29
2
原创 veeValidate顯示錯誤
errors數組是一個簡單的數組，其中包含該字段的錯誤消息作爲字符串，可以操縱顯示的字段名稱以及該字段應顯示多少錯誤。 （1）自定義字段名稱 錯誤消息使用佔位符來引用該字段，可通過name指定一個prop來更改佔位符 <Valid
2020-06-16 16:41:29
1
原创 模擬數據mockjs
使用部分 1、在項目中安裝mockjs,axios cnpm install mockjs axios --save 2、創建mock.js文件 const Mock=require('mockjs') //獲取mock對
2020-06-16 16:41:29
原创 前端項目中常見的 CSS 問題
重置 button 和 input 元素的背景 添加按鈕時，重置它的背景，否則在跨瀏覽器時它的呈現會有所不同。下面的例子分別展示了 Chrome 和 Safari 中的同一個按鈕，後者默認會有一個灰色背景。 重置背景可以解決這個
2020-06-16 16:41:29
原创 ready()方法、onload事件、JQuery---load()方法
關於前端加載的運用有兩種形式：一、DOM樹加載完成後使用，ready()；二、頁面完全加載後使用，onload、load()。 瞭解： HTML DOM文檔加載順序： 1、解析HTML結構 2、加載外部腳本和樣式表文件 3、解析並
2020-06-16 16:41:29
原创 VeeValidate入門
VeeValidate是Vue.js的基於模板的驗證庫。 1、功能： （1）基於模板的驗證 （2）驗證H5輸入和自定義Vue組件 （3）提供許多驗證規則 （4）本地化支持 （5）自定義規則支持 （6）沒有依賴關係 2、爲什麼基於模
2020-06-16 16:41:29
原创 模擬數據方式
方法一：請求本地的 json 文件 項目裏新建個文件夾用來存放測試用的 json 文件。 reqwest({ url: 'mock/user.json' }) .then(res => {
2020-06-16 16:41:29
原创 d3.js中v3到v4、v5因版本問題報錯
1、在d3js v4、v5版本中的線性比例尺不再使用d3.scale.linear()。而是使用d3.scaleLinear()來代替它。 即將 let linear=d3.scale.linear()
2020-06-16 16:41:28
原创 div中超出的文本用省略號替代
text-overflow: ellipsis; // ellipsis:顯示省略符號來代表被修剪的文本 white-space: nowrap; //nowrap:規定段落中的文本不進行換行 overflow:
2020-06-16 16:41:28
原创 veeValidate使用驗證
驗證規則的方式： 字符串和對象 添加規則後，可以驗證輸入字段 <ValidationProvider rules="required|email" v-slot="{ errors }"> <input v-model
2020-06-16 16:41:28
原创 veeValidate驗證方式
（1）添加驗證規則 使用extend函數添加驗證規則，驗證規則可以使一個函數 import { extend } from 'vee-validate'; extend('required', value => !!value);
2020-06-16 16:41:28
原创 封裝switch滑塊組件
效果： <template> <div class="slideSwitch"> <!-- switch存在與否取決於flag是否爲true --> <label role='checkbo
2020-06-16 16:41:28