Vue composition api 定義資料
Vue composition api 定義資料composition api定義資料有兩種方式，一個是reactive一個是ref
reactive
一定是純值
只能放入物件
盡量使用const宣告，因為基本上是不可改的
是非常標準的Proxy物件
以下為reactive定義資料範例:
若沒有使用const宣告，是可以被覆蓋掉的，會失去Proxy的特性。<div id="app"> {{person}} <input type="text" v-model="person.name"></div><script type="module">// import { createApp } from '...';const { createApp, reactive } = Vue;const app = createApp({ setup() ...
JS Proxy(代理)筆記
JS Proxy(代理)筆記對Proxy進行操作，會先經過Proxy作用在target身上，可以讓資料在存取前進行一些操作
在Vue中就有使用Proxy來組成資料，達成資料雙向綁定的特性。
語法如下:
var p = new Proxy(target, handler);
target: 只能是物件，而且並非是複製一份而是指向同個位置
handler: 定義在操作行為上的函數
基本用法get函式取值，set函式設值
var handler = { get: function(obj, prop) { console.log(`${obj}, ${prop}`); // 取值 return obj[prop]; }, set: function(obj, prop, newVal) { console.log(`${obj}, ${prop}, ${newVal}`); ...
Vue slot插巢
Vue slot插巢基本使用在某些情況下，希望能將template傳遞給子組件，並讓此段template在子組件中渲染。
以下是vue官方圖片
也就是在FancyButton組件中插入slot tag，就可以將Click Me帶入到FancyButton組件的slot中
以上範例會轉換成以下:<button class="fancy-btn"> Click me!</button>
命名Slots可以給slot命名，讓他在指定位置傳遞，假設有一個solt命名為header，<slot name="header"></slot>若要傳遞給名為header的slot可以使用<template v-slot:header>或是縮寫 <template #header>
官方圖片如下
範例:
<body> <div id="app"> <h3>slot</h3> <card> ...
Vue props in emit out 筆記
Vue props in emit out 筆記props基本使用vue可以利用 props 將外部傳入資料到內部，props為單向數據流
可以透過範例了解，建立一個子組件，將預傳入資料放在 props 陣列中，利用v-bind:photo-url傳入或是:photo-url，因在html中沒有區分大小寫駝峰命名需用 - 做連接。
<!-- 靜態引入--><photo photo-url="imgUrl"></photo><!-- 動態引入--><photo :photo-url="imgUrl"></photo><script type="module"> const app = Vue.createApp({ // ... data() { return { imgUrl: "https://imgur.com/Lh3gOFn", } ...
Laravel 使用 TinyMCE 以及處理上傳圖片(驗證，防呆，刪除)
Laravel 使用 TinyMCE 以及處理上傳圖片(驗證，防呆，刪除)版本Laravel 8
TinyMCE 6
初始化以及引入 TinyMCE1. 創建新項目composer create-project laravel/laravel my-tiny-app
2. 到項目根目錄cd my-tiny-app
3. 新增可重用組件componentphp artisan make:component Head/tinymceConfig
創建好後並編輯，初始化tiny
tinymce-config.blade.php
使用apino-api-key替換成你的api key，到Tiny註冊
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script><script> tinymce.init({ selector: 'texta ...
Vue 生命週期筆記
Vue 生命週期筆記每個 Vue 組件都會經過初始化的步驟，設置數據，編譯模板，掛載 DOM 等，稱為生命週期，Vue 讓我們可以在特定階段添加我們自己所需的代碼，稱為lifecycle hooks，就是下面圖片紅色框框的。
Vue 官方生命週期圖
lifecycle hooksbeforeCreate在實例初始化時調用。
此階段在props後，但還取不到data()內的值，所以不能在這階段利用axios取得資料
created在實例處理完所有與狀態相關的選項後調用。
此階段已設置數據, 屬性, 方法, 觀察者，vm.$el屬性還無法使用，可以在這呼叫 api 取得初始化頁面資料
beforeMonut安裝組件之前調用。
當這個狀態被調用時，組件已經完成了它的反應狀態的設置，但是還沒有創建 DOM 節點，未與實體做綁定
mounted安裝組件後調用。
所有同步子組件安裝完成，但不包括非同步組件，如想等待 View 渲染完畢可以使用，可以在此狀態内部使用 vm.$nextTick
beforeUpdate當狀態更新時，即將更新DOM樹之前調用
updated當狀態更新時，即將更新DOM樹 ...
Laravel Observer 觀察者
Laravel Observer 觀察者laravel 提供模型觀察者的功能，讓我們可以監聽模型上的事件，當觸發特定事件時，可以做而外的處理
舉例說明:假如在新增商家後，要透過google api取得商家資訊，就可以透過Observer方式處理
透過以下指令創建Observer，預設會放在app/Observers/資料夾底下
php artisan make:observer StoreObserver --model=Store
創建完成後檔案如下
<?phpnamespace App\Observers;use App\Models\Store;class StoreObserver{ /** * Handle the Store "created" event. * * @param \App\Models\Store $store * @return void */ public function created(Store $store) { // ...
Vue watch 和 computed 筆記
Vue watch 和 computed 筆記watch
監聽”單一”變數觸發事件
該函式可同時操作多個變數操作
監聽單一元素監聽當text改變，觸發函式，watch的callback函式會有新值跟舊值傳入
new Vue({ // ... data: { // ... text: '', }, watch: { // ... text(new, old) { console.log(`文字改變，從${old}變成${new}`); } }});
Deep Watchers 深度觀察當要監聽一個物件的時候可以使用此方法，newValue以及oldValue會返回一個物件
new Vue({ // ... data: { // ... product: { name: "電腦", price: 100, ...
v-on修飾符筆記
v-on修飾符筆記修飾符是用點表示的指令後綴
事件修飾符用法:
<a @click.stop="doThis"></a><form @submit.prevent="onSubmit"></form>
修飾符
說明
.stop
調用 event.stopPropagation()，阻止冒泡
.prevent
調用 event.preventDefault()，阻止瀏覽器預設行為
.self
只當事件是從偵聽器綁定的元素本身觸發時才觸發回調
.capture
添加事件偵聽器時使用 capture 模式，打破由內而外事件傳遞，先行執行
.once
只觸發一次回調
.passive
無視 prevent 功能，不要與 prevent 一起使用
key 修飾符監聽使用者輸入按鍵觸發事件。
範例:
<!-- only call `vm.submit()` when the `key` is `Enter` --><input @keyup.ente ...
JS ESModule
JS ESModule要在原生瀏覽器運行ESModule需要在script tag 加上type="module"，才能使用ESModule
<script type="module"> // code...</script>
匯出預設匯出每個檔案唯一，在vue開發中可用來匯出元件
在資料夾根目錄創建預設匯出範例程式export1.js
export default { name: "joe", about() { console.log(`我的名子叫${this.name}`); },};
具名匯出可以匯出多個，在第三方框架，套件，函式經常看到
根目錄創建export2.js
export const num = 10;export function print() { console.log(1);}export function add(a, b) { return a + b;} ...
