發表文章

目前顯示的是有「vuejs」標籤的文章

本站已搬家!

本站已搬家至https://blog.typeart.cc


歡迎舊雨新知指教!

物件存在陣列裡的搜尋方法

JavaScript在一般的陣列中,可以直接使用filter、map來遍歷元素並搜尋或取得資料 但在object,就無法使用這些方便的函式了! 尤其當資料內容又是以物件型式儲存在陣列裡面 兩個東西結合在一起的時候真的是會寫到一團亂不知道自己在寫什麼東西XD 花了不少時間總算寫了個應該….還算是精簡的寫法QQ > DEMO < See the Pen object in array search demo by hsuanyi ( @windclara ) on CodePen . 要做到在表格內每一欄位的資料都可以搜尋並即時顯示出有相同內容之欄位資料 由於我來源資料是儲存在nedb裡面(註:nedb為一輕量化的單機版mongoDB,可視為nosql版的sqlite) nedb中每一筆資料是一個物件,查詢出來後的所有結果回傳成一組陣列 就會得到如下的資料結構: dbData = [ {id: 0001 ,name: '王小明' ,phone: 0912345678 }, {id: 0002 ,name: '劉得滑' ,phone: 0987654321 }, {id: 0003 ,name: '周潤花' ,phone: 0978123456 }, {id: 0004 ,name: '林志零' ,phone: 0955111222 }]; 搜尋功能的程式碼: function search (searchValue) { let searched = dbData.map (obj => { if ( Object .keys(obj).some ( property => obj[property].toString() . indexOf(searchValue) != - 1 ) ) return obj; }); return searched.filter (obj => obj != undefined ); } //demo網頁我使用vue,所以demo網頁裡的寫法會略有不同 //為方便您使用,本文中以fun...

electron-vue 讀取本地文件(windows下以nedb為例)

使用electron-vue開發時,在開發過程可以直接無腦地直接指定路徑至要操作的檔案 但最終要產出成品時,就不能用這樣的寫法,因為程式打包後,路徑指向就會完全不同。 以下以nedb為例,說明electron-vue路徑指定方式以及如何讓nedb設定至全域,讓每個component可以直接使用。 nedb注入vue全域使用 首先建立nedb宣告的js檔,命名為database,放在assets目錄 (僅供範例,檔名、路徑隨各人喜好) src/renderer/assets/database.js 1. 宣告nedb 為了可以直接使用async、await,直接採用別人打包好的promise版本 import Datastore from 'nedb-promise' ; import path from 'path' ; import { remote } from 'electron' ; export default new Datastore({ filename: path.join(__dirname, "../../../TESTDB.db" ), autoload: true }); 2. 注入vue全域 打開 src/renderer/main.js 在new Vue上方引入 import db from './assets/database' Vue.db = Vue.prototype.$db = db 3. 其他vue檔直接操作方式 其他vue檔直接使用this.$db就可以操作db了! async mounted(){ const vm = this ; let DBdata = await vm.$db.find({}); } electron-vue 讀取本地文件 開發到尾聲,準備要發佈程式,就要調整路徑位置。 這裡可以使用electron的 getAppPath() 函式。 getAppPath() 函式可以直接取得你的執行檔路徑。要注意的是,他產出來的完全路徑包含自己這個exe檔 也就會是 D:\electron-vue\test.exe 。 若直接將你的TESTDB.db串在路徑後面...

vue init 離線初始化

圖片
大部份情況下,安裝完vue cli後,直接下vue init webpack project-name就可以開始初始化一個範本並準備開始開發。 但某些情況下可能需要用到離線初始化 1. 下載模版 首先,先到 github/vuejs-template 下載所需模版 若是要開發electron-vue,則到 github/SimulatedGREG/electron-vue ,按download整包下載 2. 解壓縮至指定路徑 把檔案解解壓縮出來後的資料夾,放至 C:\Users\{你的使用者名字}.vue-templates 若系統是WIN 10,會遇到一個問題: 按右鍵>新建資料夾後,輸入.vue-templates,會彈出對話視窗叫你輸入檔名 所以只能使用cmd建立 按 win鍵 + R 開啟 執行 視窗> 輸入 cmd win預設的目錄就會是在 C:\Users\\{你的使用者名字} 所以直接下指令: mkdir .vue-templates 就會建立起.vue-templates資料夾 在把解壓縮出來的資料夾放入此目錄 3. 執行離線初始化 到project資料夾 執行 vue init webpack my-project --offline //下方以手動下載的electron-vue為例 vue init electron-vue-master my-project --offline 注意!init後面接的名字,要以你放在.vue-templates底下的資料夾名字為主! 而不是github上寫的 vue init simulatedgreg/electron-vue my-project 唷!