Vue.js

Vue.js 提供了三種方法來處理內容：方法 (methods)、監聽器 (watchers) 和計算屬性 (computed properties)。該如何選擇使用哪一種方法呢？ 使用方法 (methods) 的時機： 當需要對 DOM 中的某些事件做出反應時。 當某些事情在組件中發生時調用函數。你可以從計算屬性 (computed properties) 或監聽器 (watchers) 中調用方法。 使用計算屬性 (computed properties) 的時機： 需要根據現有的數據來生成新的數據。 你在模板中使用的變量是由一個或多個數據屬性構建的。 你希望將一個複雜的、嵌套的屬性名稱簡化為更易讀、更易使用的名稱，同時當原始屬性更改時更新它。 需要從模板中引用一個值。在這種情況下，創建一個計算屬性是最好的選擇，因為它會被緩存。 需要監聽多個數據屬性的變化。 使用監聽器 (watchers) 的時機： 當需要監聽某個數據屬性的變化並執行一些操作時。 當需監聽 prop 的值變化時。 當只需要監聽單個特定屬性時（同時不能監聽多個屬性）。 當需要監聽某個數據屬性直到達到某個特定值，然後執行相應操作時。

Vue.js允許我們透過在元素上使用v-on指令來攔截任何DOM事件。這個主題是使組件可以互動的關鍵。 什麼是Vue.js事件 存取原始事件對象 事件修飾符 什麼是Vue.js事件 Vue.js允許我們透過在元素上使用v-on指令來攔截任何DOM事件。 如果我們想要在這個元素上發生點擊事件時做一些事情： <template> <a>點擊我！</a> </template> 我們添加一個v-on指令： <template> <a v-on:click="handleClick">點擊我！</a> </template> Vue還提供了一種非常便捷的替代語法： <template> <a @click="handleClick">點擊我！</a> </template> 您可以選擇使用括號或不使用括號。@click="handleClick"等效於@click="handleClick()"。 handleClick是附加到組件的方法： <script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script> 詳細的方法在我 Vue 方法教程中有更詳盡的解釋。 你在這裡需要知道的是，你可以從事件中傳遞參數：@click="handleClick(param)"，並且它們將在方法內被接收。 存取原始事件對象 在許多情況下，您希望對事件對象執行操作或查找其中的某些屬性。您如何訪問它？ 使用特殊的$event指令： <template> <a @click="handleClick($event)">點擊我！</a> </template> <script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script> 如果你已經傳遞了一個變數： <template> <a @click="handleClick('something', $event)">點擊我！</a> </template> <script> export default { methods: { handleClick: function(text, event) { console....

學習如何使用 Vue 創建單一檔案來封裝一個組件的所有相關內容，集中管理外觀和行為。 一個 Vue 組件可以在一個 JavaScript 檔案（.js）中這樣聲明： Vue.component('component-name', { /* 選項 */ }) 或者： new Vue({ /* 選項 */ }) 也可以在一個 .vue 檔案中指定。 這個 .vue 檔案非常酷，因為它允許你在一個檔案中定義以下內容： JavaScript 邏輯 HTML 代碼模板 CSS 樣式 所有這些內容都包含在一個檔案中，因此它得名為單檔元件。 以下是一個例子： <template> <p>{{ hello }}</p> </template> <script> export default { data() { return { hello: 'Hello World!' } } } </script> <style scoped> p { color: blue; } </style> 所有這些都是可能的，感謝 webpack 的使用。Vue CLI 讓這一切變得非常容易並且支援開箱即用。在沒有 webpack 設置的情況下，無法使用 ....

Vue.js 使用一種超集的 HTML 樣板語言。我們可以使用插值和指令。本文將解釋指令。 v-text v-once v-html v-bind 使用 v-model 雙向綁定 使用運算式 條件語句 循環 事件 顯示或隱藏 事件指令修飾符 自定義指令 在Vue.js 模板和插值中，我們看到了如何在 Vue 模板中嵌入數據。 本文將解釋 Vue.js 在模板中提供的另一種技術：指令。 指令基本上就像是添加在模板內的 HTML 屬性。它們都以 v- 開頭，表示它們是 Vue 的特殊屬性。 讓我們逐一看一下每個 Vue 指令的詳細用法。 v-text 可以使用 v-text 指令來替代插值，它執行相同的工作： <span v-text="name"></span> v-once 你知道 {{ name }} 是綁定到組件數據的 name 屬性的。當你的組件數據中的 name 發生變化時，Vue 會在瀏覽器中更新該值。 除非使用 v-once 指令，它基本上就像是一個 HTML 屬性： <span v-once>{{ name }}</span> v-html 當你使用插值來打印數據屬性時，HTML 會被轉義。這是 Vue 自動保護免受 XSS 攻擊的一種很好的方式。 然而，有時你想要輸出 HTML 並讓瀏覽器解釋它。你可以使用 v-html 指令：...

插槽幫助您在組件中定位內容，並允許父組件對其進行排列。 一個組件可以完全負責生成其輸出，就像這個例子： Vue.component('user-name', { props: ['name'], template: '<p>Hi {{ name }}</p>' }) 或者它也可以讓父組件注入任何類型的內容，使用 插槽。 什麼是插槽？它是組件輸出中的一個保留空間，等待填充。 您可以通過將 <slot></slot> 放入組件模板中來定義一個插槽： Vue.component('user-information', { template: '<div class="user-information"><slot></slot></div>' }) 使用這個組件時，添加在開始和結束標籤之間的任何內容將添加到插槽佔位符中： <user-information> <h2>Hi!</h2> <user-name name="Flavio"></user-name> </user-information> 如果您將任何內容放置在 <slot></slot> 標籤中，則該內容將作為默認內容，以防沒有傳入內容。 一個復雜的組件布局可能需要更好的方式來組織內容，同時還有多個插槽。 這就是為什麼 Vue 為我們提供了 具名插槽。 具名插槽 使用具名插槽，您可以將插槽的各個部分分配給組件模板布局中的特定位置，並使用 slot 屬性為任何標籤分配內容。 任何位於模板標籤外部的內容都將添加到主要的 slot 中。 為方便起見，在此示例中，我在 page 單文件組件中使用了一個模板： <template> <div> <main> <slot></slot> </main> <aside> <slot name="sidebar"></slot> </aside> </div> </template> 這裡是如何在父組件中提供插槽內容： <page> <template v-slot:sidebar> <ul> <li>Home</li> <li>Contact</li> </ul> </template> <h2>Page title</h2> <p>Page content</p> </page> 還有一個方便的簡寫，即 #：...

Vue 方法是與 Vue 實例相關聯的函數。方法定義在 methods 屬性中。讓我們看一下它們是如何工作的。 什麼是 Vue.js 方法 將參數傳遞給 Vue.js 方法 如何從方法中訪問數據 什麼是 Vue.js 方法 Vue 方法是與 Vue 實例相關聯的函數。 方法定義在 methods 屬性中： new Vue({ methods: { handleClick: function() { alert('測試') } } }) 在單文件組件的情況下： <script> export default { methods: { handleClick: function() { alert('測試') } } } </script> 在需要執行動作並且將 v-on 指令附加到元素來處理事件時，方法尤其有用。例如，以下代碼在元素被點擊時調用 handleClick 方法： <template> <a @click="handleClick">點我！</a> </template> 將參數傳遞給 Vue.js 方法 方法可以接受參數。 在這種情況下，您只需要在模板中傳遞參數，然後在方法內部使用它： <template> <a @click="handleClick('something')">點我！</a> </template> new Vue({ methods: { handleClick: function(text) { alert(text) } } }) 在單文件組件的情況下：...

Vue 的監聽器允許您監聽組件的數據並在特定屬性變化時運行相應的功能。 監聽器是 Vue.js 的一個特殊功能，它允許您監視組件狀態的一個屬性，並在該屬性的值變化時運行一個函數。 以下是一個例子。我們有一個組件顯示一個名字，並允許您通過點擊一個按鈕來更改它： <template> <p>我的名字是 {{name}}</p> <button @click="changeName()">更改我的名字！</button> </template> <script> export default { data() { return { name: 'Flavio' } }, methods: { changeName: function() { this.name = 'Flavius' } } } </script> 當名字變化時，我們想要做一些操作，比如打印一個控制台日誌。 我們可以通過將 watch 對象添加一個與我們想要監視的數據屬性同名的屬性來實現： <script> export default { data() { return { name: 'Flavio' } }, methods: { changeName: function() { this.name = 'Flavius' } }, watch: { name: function() { console.log(this.name) } } } </script> 分配給 watch....

您在日常的 Vue.js 编程中将使用的常见命令和指令 指令 指令是由 v- 前缀标识的属性。 指令 描述 v-text 将属性作为元素的文本值 v-html 将属性作为元素的文本值，解析 HTML v-if 仅在条件为真时显示一个元素 v-else 如果前面的 v-if 为假，则显示一个备用元素 v-else-if 添加一个 v-if 构造的否则-if 块 v-show 类似于 v-if，但即使为假也将该元素添加到 DOM 中。只是将其设置为 display: none。 v-for 对数组或可迭代对象进行迭代 v-on 监听 DOM 事件 v-bind 以响应式方式更新 HTML 属性 v-model 用于在表单输入中设置双向绑定。用于表单元素，当用户更改表单字段的值时更新模型 v-once 仅应用一次属性，即使传递的数据发生了变化也不刷新 v-bind 和 v-on 有一个简写格式： <a v-bind:href="url">...</a> <a :href="url">...</a> <a v-on:click="doSomething">...</a> <a @click="doSomething">...</a> v-if/v-else/v-else-if 的示例： <div v-if="type === 'A'"> it's A </div> <div v-else-if="type === 'B'"> it's B </div> <div v-else-if="type === 'C'"> it's C </div> <div v-else> it's neither one </div> 条件 您可以使用三元运算符将条件嵌入表达式中：...

元件是介面的單一、獨立單位。它們可以擁有自己的狀態、標記和樣式。 如何使用元件 Vue 元件可以以四種主要方式定義。 讓我們用程式碼來談談。 第一種方式是： new Vue({ // 選項 }) 第二種方式是： Vue.component('component-name', { // 選項 }) 第三種方式是使用區域元件 (local components)：這些元件僅在特定元件中可存取，而在其他地方則無法使用（非常適合封裝）。 第四種方式是在 .vue 檔案中，也稱為單一檔案元件 (Single File Components)。 讓我們詳細探討前三種方式。 在建構不是單頁應用程式 (Single Page Application, SPA) 的應用程式中使用 new Vue() 或 Vue.component() 是使用 Vue 的標準方式。比如在聯絡表單或購物車等部分頁面中使用 Vue.js。或者可能 Vue 是在所有頁面中使用，但是伺服器渲染版面配置，並將 HTML 提供給客戶端，然後載入您建立的 Vue 應用程式。 在 SPA 中，由 Vue 建構 HTML 的情況下，使用單一檔案元件 (Single File Components) 是更常見的做法，因為它們更方便。 您可以通過將 Vue 控制項掛載到 DOM 元素上來實例化 Vue。如果您有一個 <div id="app"></div> 標籤，您將使用： new Vue({ el: '#app' }) 使用 Vue....

Props被用來將狀態傳遞給子元件。在這篇文章中，我們將學習有關Props的所有內容。 在元件內部定義prop 接受多個prop 設定prop的類型 設定必要的prop 設定prop的預設值 將prop傳遞給元件 在元件內部定義prop Props是元件從包含它們的元件（父元件）接收數據的方式。 當一個元件期望一個或多個prop時，它必須在其props屬性中定義它們： Vue.component('user-name', { props: ['name'], template: '<p>Hi {{ name }}</p>' }) 或者，在Vue的Single File Component中： <template> <p>{{ name }}</p> </template> <script> export default { props: ['name'] } </script> 接受多個prop 你可以通過將它們附加到陣列上來接受多個prop： Vue.component('user-name', { props: ['firstName', 'lastName'], template: '<p>Hi {{ firstName }} {{ lastName }}</p>' }) 設定prop的類型 你可以通過使用物件而不是陣列來指定prop的類型，使用每個屬性的名稱作為每個屬性的鍵，類型作為值： Vue.component('user-name', { props: { firstName: String, lastName: String }, template: '<p>Hi {{ firstName }} {{ lastName }}</p>' }) 你可以使用的有效類型有：...