v-model是Vue中的指令，可以创建双向绑定。学习如何使用它。 v-model指令可以创建双向绑定。 你可以绑定一个表单输入元素，当用户改变字段的内容时，可以实时改变Vue的数据属性： <input v-model="message" placeholder="请输入消息"> <p>消息是：{{ message }}</p> <select v-model="selected"> <option disabled value="">选择一种水果</option> <option>苹果</option> <option>香蕉</option> <option>草莓</option> </select> <span>选择的水果：{{ selected }}</span> 常用的指令修饰符 如果只想在发生更改事件时更新模型，而不是在用户按下键时更新，可以使用v-model.lazy代替v-model。 当使用输入字段时，v-model.trim非常有用，因为它会自动去除输入内容的空格。 如果要接受数字而不是字符串，请确保使用v-model.number。 嵌套属性 假设你有一个购物车，并且有一个包含添加产品表单的组件： <template> <div> <h1>添加产品</h1> <label>名称</label>: <input> <label>描述</label>: <textarea></textarea> <button @click="addProduct">添加</button> </div> </template> <script> export default { name: 'AddProduct', data() { return { product: { name: '', description: '' } } }, methods: { addProduct() { console.log(this.product) } } } </script> 为了使表单更新product状态值的内部属性，你可以使用product.*： <label>名称</label>: <input v-model="product.name"> <label>描述</label>: <textarea v-model="product....

Vue是一個非常令人印象深刻的項目，除了框架的核心外，它還維護了很多實用工具，使Vue程序員的生活更輕鬆。其中之一就是Vue CLI。 安裝 Vue CLI 提供了什麼？ 如何使用CLI創建新的Vue項目 如何啟動新創建的Vue CLI應用程序 Git存儲庫 從命令行使用預設值 預設值存儲位置 插件 遠程存儲預設值 Vue CLI的另一個用途：快速原型 Webpack Vue是一個非常令人印象深刻的項目，除了框架的核心外，它還維護了很多實用工具，使Vue程序員的生活更輕鬆。 其中之一就是Vue CLI。 CLI的頭寸是命令行接口。 注意：現在正在進行一個巨大的CLI重構工作，從2.0版本升級到3.0版本。儘管還不穩定，但我將描述版本3.0，因為它比版本2.0有很大的改進，並且完全不同。 安裝 Vue CLI是一個命令行實用程序，您可以使用npm全局安裝它： npm install -g @vue/cli 或使用Yarn： yarn global add @vue/cli 安裝完成後，您可以調用vue命令。 Vue CLI提供了什麼？ CLI對於快速開發Vue.js非常重要。 它的主要目標是確保您所需的所有工具協同工作，以執行您需要的任務，並抽象了使用每個工具所需的全部配置細節。 它可以執行初始項目設置和脚手架。 它是一個靈活的工具：一旦使用CLI創建項目，您可以在不必“彙總”應用程序（就像您使用create-react-app那樣）的情況下進行配置調整。 當您彙總自create-react-app以後，您可以更新和調整自己想要的設置，但無法依賴create-react-app提供的很棒的功能 您可以配置任何東西並仍然能夠輕鬆升級。 在創建和配置應用程序之後，它充當基於webpack的運行時依賴工具。 與CLI的第一次接觸是在創建新的Vue項目時。 如何使用CLI創建新的Vue項目 您要使用CLI做的第一件事就是創建一個Vue應用程序： vue create example 最酷的事情是它是一個交互式過程。您需要選擇一個預設值。默認情況下，有一個預設值提供了Babel和ESLint集成： 我要按下向下箭頭⬇️，手動選擇我想要的功能： 按空格啟用您需要的功能之一，然後按enter繼續。由於我選擇了一個lint器/格式化器， Vue CLI提示我進行配置。我選擇了ESLint + Prettier，因為那是我喜歡的設置： 接下來是選擇如何應用linting。我選擇了在保存時進行linting。 接下來是測試。我選擇了testing， Vue CLI給我提供了兩個最流行的解決方案：Mocha + Chai vs Jest。 Vue CLI問我要將所有配置放在哪裡：是否放在package.json文件中，還是放在專門的配置文件中，每個工具一個。我選擇了後者。 接下來，Vue CLI問我是否要保存這些預設值，並允許我在下次使用Vue CLI創建新應用程序時選擇它們。這是一個非常方便的功能，因為擁有一個快速設置，符合我所有喜好的應用程式，可以減輕複雜性。...

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.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.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 使用一種超集的 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的計算屬性來緩存計算結果 什麼是計算屬性 計算屬性的例子 計算屬性 vs 方法 什麼是計算屬性 在Vue.js中，您可以使用括號輸出任何數據值： <template> <p>{{ count }}</p> </template> <script> export default { data() { return { count: 1 } } } </script> 該屬性可以執行一些小計算，例如 <template> {{ count \* 10 }} </template> 但您僅限於一個JavaScript 表達式。 此外，除了這個技術上的限制外，還需要考慮到模板應該只關注向用戶顯示數據，而不執行邏輯計算。 為了做更多事情，並且擁有更具聲明性的模板，您可以使用計算屬性。 計算屬性在Vue組件的computed屬性中定義： <script> export default { computed: { } } </script> 計算屬性的例子 下面是一個使用計算屬性count計算輸出的示例代碼。注意： 我不需要調用count()。Vue.js會自動調用該函數 我使用了常規函數（而不是箭頭函數）來定義count計算屬性，因為我需要能夠通過this訪問組件實例。 <template> <p>{{ count }}</p> </template> <script> export default { data() { return { items: [1, 2, 3] } }, computed: { count: function() { return 'The count is ' + this....

您在日常的 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 創建單一檔案來封裝一個組件的所有相關內容，集中管理外觀和行為。 一個 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.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> 還有一個方便的簡寫，即 #：...