在 Vue 裡使用 Laravel Localization
在 Vue 裡使用 Laravel Localization我的開發環境// package.json"laravel-mix": "^6.0.6","vue": "^2.6.14",// composer.json"laravel/framework": "^8.65","mariuzzo/laravel-js-localization": "^1.9",
Vue 的 Laravel 本地化包Laravel-JS-Localization
laravel-localization-to-vue
laravel-vue-i18n-generator(已停止維護)
此次範例使用Laravel-JS-Localization
安裝composercomposer require mariuzzo/laravel-js-localization
生成 messages.jsLaravel-JS-Localization 包提供了一個命 ...
Laravel 事件和監聽器
Laravel 事件和監聽器Laravel 的事件提供了一個簡單的觀察者模式,允許訂閱和監聽應用程序中發生的各種事件。事件類通常存儲在app/Events目錄中,而它們的監聽器存儲在app/Listeners,可以利用php artisan make來創建相關檔案。
事件在應用程式解藕相當好用,例如:如果希望在商家創建時通知使用者,無須將商家創建的代碼與通知使用者代碼放在一起,可以引發一個App\Events\StoreCreated事件,監聽器可以接收並使用該事件來分派通知。
創建事件和監聽器首先先創建StoreCreated事件和NotifyStoreCreated監聽器,使用以下 artisan 指令來創建。
php artisan make:event StoreCreatedphp artisan make:listener NotifyStoreCreated --event="StoreCreated"
上面的指令將分別在 app/Events 和 app/Listeners 文件夾中創建事件和監聽器。
註冊事件和監聽器在app/Providers/E ...
Vue 點擊顯示不同的 component
Vue 點擊顯示不同的 component環境"vue": "^2.6.14"
範例建立組件假如說有 A,B,C 三個組件
import Aexample from "./components/Aexample.vue";import Bexample from "./components/Bexample.vue";import Cexample from "./components/Cexample.vue";Vue.component("a-example", Aexample);Vue.component("b-example", Bexample);Vue.component("c-example", Cexample);
動態組件vue2<component v-bind:is="componentName"></component>
vue3<div v-is=&q ...
Laravel 靜音模型觸發事件
Laravel 靜音模型觸發事件靜音事件 Muting Events偶爾需要暫時靜音模型觸發的所有事件。 可以使用 withoutEvents 方法實現此目的。 withoutEvents 方法接受一個閉包作為它的唯一參數。 在此閉包中執行的任何代碼都不會調度模型事件,閉包返回的任何值都將由 withoutEvents 方法返回
use App\Models\User;$user = User::withoutEvents(function () use () { User::findOrFail(1)->delete(); return User::find(2);});
保存時靜音單個模型有時您可能希望儲存給定模型時不調用任何事件。可以使用 saveQuietly 方法完成此操作
$user = User::findOrFail(1);$user->name = 'Victoria Faith';$user->saveQuietly();
muting-eventshttps://laravel.com/docs ...
Laravel 查找月份,年份,日期資料
Laravel 查找月份,年份,日期資料查找日期 whereDate()查找’2022-02-10’日期
Post::whereDate('created_at', '2022-02-10')->get();
查找今天日期資料
Post::whereDate('created_at', Carbon::now->toDateString())->get();
查找年份 whereYear()查找’2022’年資料
Post::whereYear('created_at', '2022')->get();
查找今年資料
Post::whereYear('created_at', Carbon::now->format('Y'))->get();
查找月份 whereMonth()查找’2’月資料
Post::whereMonth('created_at', '2022')-& ...
JS 淺層複製及深層複製
JS 淺層複製及深層複製JS 物件參考講到淺層複製及深層複製就會提到 JS 的物件參考,在 JS 裡傳值(Call by value)是複製的,將 num 的值複製到num2的新記憶體區域,例如以下
var num = 1;var num2 = num;
而物件(陣列,函式)是利用call by reference,來看範例
var people = { name: "Joe" };var people2 = people;people2.name = "Amy";console.log(people == people2); // trueconsole.log(people); // {name: 'Amy'}console.log(people2); // {name: 'Amy'}
可以看到上面的範例,people2是參考people的記憶體位置,所以在people2更改name的值時,也會更改到people的值,因為他們指向同一個記憶體位 ...
JS ASI 自動插入分號
JS ASI 自動插入分號ASI 全名為 「Automatic Semicolon Insertion」,中文名稱為「自動分號插入」。
以下例子為例,如在結尾沒加上分號會自行插入
function hi() { return; ("Hi");}console.log(hi()); // undefined
導致程式碼變成以下
function hi() { return; ("Hi");}console.log(hi()); // undefined
還有常見犯錯例子,也就是立即函式
(function () { console.log("hello");})()(function () { console.log("world");})();
如下圖
解決方法如下,結尾或開頭加上分號
// plan A(function () { console.log("hello"); ...
laravel use echarts Custom Calendar Icon in vue
laravel use echarts Custom Calendar Icon in vue如果是需要比較簡單的圖表可以直接使用vue-echarts,複雜的話建議使用echarts自行封裝,個人覺得vue-echarts的文件比較不詳細
安裝 echartsnpmnpm install echarts
更多安裝方式echarts 官方
安裝 vue-echartsnpm & ESMnpm install echarts vue-echarts
import { createApp } from 'vue'import ECharts from 'vue-echarts'import { use } from "echarts/core"// import ECharts modules manually to reduce bundle sizeimport { CanvasRenderer} from 'echarts/renderers ...
JS 執行緒與同步,非同步
JS 執行緒與同步,非同步單執行緒JavaScript 是一種單執行緒的程式語言,單執行緒是一種作業系統的概念。
單執行緒的程式,有一個特性就是順序執行,就是都是一步一步來,前面還沒完成,就不會往後執行。
同步範例輸出 吃晚餐 -> 洗澡 -> 睡覺,也就是同步執行,函式一個接一個完成
function eatDinner() { console.log("吃晚餐");}function bath() { console.log("洗澡");}function sleep() { console.log("睡覺");}function go() { eatDinner(); bath(); sleep();}go();
事件佇列我們可以使用 setTimeout 模擬非同步行為,而setTimeout 是一個瀏覽器提供的 API ,而不是 JS 引擎本身的功能
JavaScript 本身是同步的,當他需要去呼叫其他資源使用時 ...
JS 記憶體存放與釋放
JS 記憶體存放與釋放JavaScript 引擎具有記憶體回收的機制,會釋放不再使用的變數記憶體,基本概念為:「沒有任何的參考指向它」時則會釋放記憶體。
首先先創建一個產生大量字串的函式
function rendomString(length) { var result = ""; var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; var charactersLength = characters.length; for (var i = 0; i < length; i++) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } return result;}
範例一:使變數維持可參考的狀態(不會釋放記憶體)定義一個全域變數 getData,此變數會持續維持 ...