Vue.js 在瀏覽器開發者工具中內建了一個很棒的面板，讓你可以檢視和與應用程序進行交互，以便於調試和理解。 [在 Chrome 上安裝](#在 Chrome 上安裝) [在 Firefox 上安裝](#在 Firefox 上安裝) 安裝獨立應用 如何使用開發工具 過濾組件 在頁面中選擇組件 格式化組件名稱 過濾檢查的數據 [檢查 DOM](#檢查 DOM) 在編輯器中打開 當你第一次嘗試 Vue.js 時，如果你打開瀏覽器開發者工具，你會看到這樣的消息：“下載 Vue Devtools 擴展程序以獲得更好的開發體驗：https://github.com/vuejs/vue-devtools”。 這是一個友好的提醒，讓你安裝 Vue Devtools 擴展程序。這是什麼？任何流行的框架都有自己的 devtools 擴展程序，通常會在瀏覽器的開發者工具中添加一個專門的面板，比瀏覽器內建的那些面板更專業。在這種情況下，這個面板可以讓我們檢視和與 Vue 應用程序進行交互。 這個工具在構建 Vue 應用程序時將會非常有幫助。開發者工具只能在 Vue 應用程序處於開發模式下才能檢查。這樣可以確保沒有人能夠使用它們與你的生產應用進行交互（並且這樣使用 Vue 將更高效，因為它不需要關心 devtools）。 讓我們安裝它！ 有三種方式來安裝 Vue Devtools： 在 Chrome 上 在 Firefox 上 作為一個獨立應用 不支援使用自定義擴展程序的 Safari、Edge 和其它瀏覽器，但你可以使用獨立應用來調試在任何瀏覽器中運行的 Vue.js 應用。 在 Chrome 上安裝 前往 Google Chrome 商店的這個頁面：https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd，點擊 添加到 Chrome。 繼續按照安裝流程操作：...

元件是介面的單一、獨立單位。它們可以擁有自己的狀態、標記和樣式。 如何使用元件 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....

本篇介紹在Vue.js應用程式中如何讓元件彼此通訊。 Props 從子元件到父元件透過事件通訊 使用事件巴士在任意元件之間通訊 其他替代方案 Vue元件可以使用不同的方式進行通訊。 Props 第一種方式是使用props。 父元件可以透過在元件宣告時加入參數，將資料傳遞給子元件： <template> <div> <Car color="green" /> </div> </template> <script> import Car from './components/Car' export default { name: 'App', components: { Car } } </script> Props是單向的，只能由父元件傳送資料給子元件。當父元件改變prop的值時，新的值會被傳送給子元件並重新渲染。 反過來是不行的，子元件不應該去修改prop的值。 使用事件在子元件到父元件之間通訊 事件允許你從子元件向父元件進行通訊： <script> export default { name: 'Car', methods: { handleClick: function() { this.$emit('clickedSomething') } } } </script> 在父元件的template中，可以使用v-on指令來攔截這個事件： <template> <div> <Car v-on:clickedSomething="handleClickInParent" /> <!-- 或者 --> <Car @clickedSomething="handleClickInParent" /> </div> </template> <script> export default { name: 'App', methods: { handleClickInParent: function() { //....

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>' }) 你可以使用的有效類型有：...

Vue是一个非常令人印象深刻的项目。它是一个非常流行的JavaScript框架，目前正经历着巨大的增长。它简单、精简且非常高效。让我们更多地了解它。 首先，什么是JavaScript前端框架？ Vue的流行程度 开发人员为何喜欢Vue? Vue.js在框架领域的定位 Vue是一个非常受欢迎的JavaScript前端框架，目前正在经历快速增长。 它简单（约24KB），非常高效。它与所有其他JavaScript前端框架和视图库都有不同的感觉。我们来找出其中的原因。 首先，什么是JavaScript前端框架？ 如果你不确定什么是JavaScript框架，那么Vue是与其首次相遇的最佳选择。 JavaScript框架帮助我们创建现代化的应用程序。现代化的JavaScript应用程序主要用于Web，但也为许多桌面和移动应用程序提供动力。 在21世纪早期以前，浏览器的能力并不如现在强大。它们远没有现在这么强大，无法在其中构建复杂的应用程序，因为性能上无法承受，而且人们甚至都没有考虑过工具。 一切都在Google推出Google Maps和Gmail后发生了变化，这两个应用程序都是在浏览器内运行的。Ajax使异步网络请求成为可能，随着时间的推移，开发人员开始在Web平台上构建应用程序，工程师则致力于开发平台本身：浏览器、Web标准、浏览器API和JavaScript语言。 像jQuery和Mootools这样的库是最早的重大项目，它们在一段时间内非常流行。它们基本上提供了更好的API来与浏览器交互，并为各种浏览器之间的错误和不一致性提供了解决方法。 像Backbone、Ember、Knockout和AngularJS这样的框架是现代JavaScript框架的第一波浪潮。而第二波浪潮，也就是现在的波浪潮，以React、Angular和Vue为主要代表者。 请注意，jQuery、Ember和其他我提到的项目仍然被广泛使用，积极维护，并且有数以百万计的网站依赖它们。尽管如此，技术和工具在不断发展，作为JavaScript开发人员，现在你可能需要了解React、Angular或Vue，而不是那些更旧的框架。 框架抽象了与浏览器和DOM的交互。我们以声明性的方式定义和交互元素，而不是通过在DOM中引用它们来操作元素，从而在更高的层次上进行交互。 使用框架就像使用C编程语言而不是使用汇编语言编写系统程序。就像使用计算机撰写文档而不是使用打字机。就像拥有一辆自动驾驶汽车而不是自己驾驶汽车。 嗯，不是那么夸张，但你明白我的意思。我们使用由非常聪明的人构建的工具，这些工具使我们的生活更轻松，而不是使用浏览器提供的低级API来操作元素并构建复杂的系统来编写应用程序。 Vue的流行程度 Vue.js有多受欢迎？ Vue在2016年在GitHub上获得了7600个星标，2017年获得了36700个星标，截至2018年6月，在GitHub上获得了100,000多个星标。 它的npm下载量每天都在增长，现在每周约为35万次下载。 鉴于这些数字，我会说Vue非常受欢迎。 从相对的角度来看，它的GitHub星标数量大约与React相似，而React诞生比Vue早几年。 当然，数字并不是一切。我对Vue的印象是开发人员非常喜欢它。 Vue流行的一个关键点是它在Laravel生态系统中的采用，这是一个非常流行的PHP Web应用程序框架，但自那以后它已广泛应用于许多其他开发社区。 开发人员为何喜欢Vue？ 首先，Vue被称为渐进式框架。 这意味着它适应开发人员的需求。而其他框架通常要求开发人员或团队完全接受并经常要求您重新编写现有应用程序，因为它们需要一些特定的公约，而Vue只需要一个简单的script标签即可开始，随着需求的增长，它可以从3行代码扩展到管理整个视图层。 您不需要了解webpack、Babel、npm或任何其他东西就可以开始使用Vue，但当您准备好时，Vue会让您轻松依赖它们。 这是一个很大的优点，尤其在当前JavaScript前端框架和库的生态系统中，这个生态系统往往会让新手感到陌生，也让有经验的开发人员在各种可能性和选择之间感到迷茫。 Vue.js可能是目前最易于接近的前端框架。有人称Vue为新的jQuery，因为它可以通过脚本标签轻松地引入应用程序，并逐渐获得越来越多的应用空间。将它视为一种赞美，因为jQuery在过去几年中主导了Web，仍然在众多网站上发挥着作用。 Vue从最好的想法中汲取经验。它是通过选取像Angular、React和Knockout等框架的最佳思想以及从这些框架中选择的最佳选项，排除了一些不太出色的选项。从某种意义上说，它从一个“最佳组合”开始，并不断发展壮大。 Vue.js在框架领域的定位 谈到Web开发时，有两只大象在房间里，它们分别是React和Angular。Vue相对于这两个大而受欢迎的框架是如何定位自身的呢？ Vue是由Evan You在谷歌为AngularJS（Angular 1.0）应用程序工作时创建的，它诞生于创建更高性能应用程序的需求。Vue选用了一些Angular模板语法，但去除了Angular所需的特定规范的复杂堆栈，并使其非常高效。 新的Angular（Angular 2.0）也解决了许多AngularJS的问题，但解决方式完全不同，并需要对TypeScript进行全面支持，而并非所有开发人员都愿意使用（或想要学习）TypeScript。 那么React呢？Vue从React中借鉴了许多好的想法，最重要的是虚拟DOM。但Vue通过某种形式的自动依赖管理来实现它，该管理工具跟踪哪些组件受到状态更改的影响，只有那些组件在状态属性更改时才会被重新渲染。在React中，当影响组件的一部分的状态发生更改时，该组件将被重新渲染，并且默认情况下，所有子组件也将被重新渲染。为了避免这种情况，您需要使用每个组件的shouldComponentUpdate方法，并确定是否应该重新渲染该组件。这使Vue在易用性和性能方面具有一定的优势。 与React不同的一个重大区别是JSX。尽管在Vue中技术上可以使用JSX，但它并不流行，而是使用了模板系统。任何HTML文件都是一个有效的Vue模板，而JSX与HTML非常不同，对于只需要处理应用程序的HTML部分（如设计师）的团队成员来说，它具有陡峭的学习曲线。Vue模板与Mustache和Handlebars非常相似（尽管在灵活性方面存在差别），因此对于已经使用过Angular和Ember等框架的开发人员来说，它们更加熟悉。 官方状态管理库Vuex遵循Flux架构，并且在概念上与Redux有些相似。再次强调，这是Vue的积极因素之一，它看到了React中的这种良好模式，并将其引入到自己的生态系统中。虽然您可以在Vue中使用Redux，但Vuex专门针对Vue和其内部工作进行了调整。 Vue是灵活的，但核心团队维护了两个对于任何Web应用程序都很重要的程序包，例如路由和状态管理，这使得它的碎片化程度要比React低得多：vue-router和vuex是Vue成功的关键。您不需要选择或担心您选择的库是否会在将来得到维护并跟上框架的更新，它们是官方支持的首选库（但您可以选择使用您喜欢的任何库）。 Vue与React和Angular相比的一个不同之处是，Vue是一个独立的项目：它没有像Facebook或Google这样的大公司的背书。相反，它完全由社区支持，通过捐赠和赞助来培育发展。这确保了Vue的路线图不受单一公司议程的驱动。

過濾器是Vue.js中的一種功能，它讓我們可以對模板插值中使用的值應用格式化和轉換。 過濾器是由Vue組件提供的一種功能，它允許您對模板動態數據的任何部分應用格式化和轉換。 它們不會更改組件數據或其他任何內容，但它們只會影響輸出。 舉個例子，假設您要打印一個名字： <template> <p>嗨 {{ name }}！</p> </template> <script> export default { data() { return { name: 'Flavio' } } } </script> 如果您想要檢查name是否包含值，如果沒有則打印“there”，這樣我們的模板將打印“嗨 there！”，該怎麼辦呢？ 輸入過濾器： <template> <p>嗨 {{ name | fallback }}！</p> </template> <script> export default { data() { return { name: 'Flavio' } }, filters: { fallback: function(name) { return name ? name : 'there' } } } </script> 注意使用過濾器的語法，即| 過濾器名稱。如果您熟悉Unix，這就是Unix管道運算符，它用於將操作的輸出作為輸入傳遞給下一個操作。 組件的filters屬性是一個對象。單個過濾器是一個接受值並返回另一個值的函數。 返回的值是實際在Vue.js模板中打印的值。 當然，該過濾器可以訪問組件的數據和方法。 過濾器的一個好的使用案例是什麼？ 轉換字符串，例如使其變大寫或變小寫 格式化價格 上面您看到了一個簡單的過濾器示例：{{ name | fallback }}。...

Vue.js使用的是一種HTML的超集的模板語言。任何HTML都是有效的Vue.js模板，除此之外，Vue.js還提供了兩個強大的功能：內插和指令。 Vue.js使用的是一種HTML的超集的模板語言。 任何HTML都是有效的Vue.js模板，除此之外，Vue.js還提供了兩個強大的功能：內插和指令。 以下是一個有效的Vue.js模板： <span>Hello!</span> 這個模板可以放在明確聲明的Vue組件內： new Vue({ template: '<span>Hello!</span>' }) 也可以放在單文件組件內： <template> <span>Hello!</span> </template> 第一個例子非常基礎。下一步是使其輸出組件狀態的一部分，例如名字。 使用內插就可以實現這一點。首先，我們在組件中添加一些數據： new Vue({ data: { name: 'Flavio' }, template: '<span>Hello!</span>' }) 然後，我們可以使用雙大括號語法將其添加到模板中： new Vue({ data: { name: 'Flavio' }, template: '<span>Hello {{name}}!</span>' }) 這裡有一個有趣的事情。看到了嗎？我們只使用了name而不是this.data.name？ 這是因為Vue.js執行了一些內部綁定，使得模板可以像使用本地屬性一樣使用該屬性。非常方便。 在單文件組件中，可以這樣寫： <template> <span>Hello {{name}}!</span> </template> <script> export default { data() { return { name: 'Flavio' } } } </script> 在導出時，我使用了一個普通函數。為什麼不使用箭頭函數？ 這是因為在data中，我們可能需要訪問組件實例的一個方法，如果this未綁定到組件，則無法實現，所以無法使用箭頭函數。 我們可以使用箭頭函數，但是在使用this時，我需要記住切換到普通函數。更保險，我認為這樣更好。 現在，回到內插。 {{ name }}使人想起Mustache/Handlebars模板內插，但這只是一個視覺提醒。 在這些模板引擎中，它們是“愚蠢”的，而在Vue中，你可以做很多事情，它更靈活。 你可以在插值中使用任何JavaScript表達式，但只能使用一個表達式： {{ name....

Vuex 是 Vue.js 的官方狀態管理工具。在這篇教程中，我將解釋它的基本用法。 Vuex 簡介 為什麼應該使用 Vuex 讓我們開始吧 建立 Vuex store 一個使用 store 的使用案例 介紹我們需要的新組件 將這些組件添加到應用程式中 將狀態添加到 store 中 添加一個 Mutation 添加一個 getter 來引用狀態屬性 將 Vuex store 添加到應用程式中 使用 commit 在使用者操作中更新狀態 使用 getter 來打印狀態值 總結 簡介到 Vuex Vuex 是 Vue.js 的官方狀態管理工具。 它的工作是在應用程式的組件之間共享數據。 在 Vue.js 中，組件可以使用以下方式進行通訊： props，從父組件將狀態傳遞給子組件。 events，從子組件更改父組件的狀態，或將根組件用作事件匯流排。 有時候，這些簡單的方法可能無法滿足需求。 在這種情況下，最好的選擇是將狀態集中存儲在一個單獨的 store 中。這就是 Vuex 的作用。 為什麼應該使用 Vuex 在 Vue 中，你可以使用 Vuex 之外的其他狀態管理工具（例如 Redux），但 Vuex 的主要優勢在於它是官方推薦的，並且與 Vue.js 的整合非常出色。 與 React 不同，你需要從眾多的庫中選擇一個，因為 React 生態系統龐大，並沒有一個明確的標準。最近，Redux 是最受歡迎的選擇，其次是 MobX。而在 Vue 中，我敢肯定說，你不需要尋找其他選擇，Vuex 就是最好的選擇，特別是當你剛開始時。...

有時候你會把prop傳遞給一個組件，然後你想要將那個prop值作為類名使用。該如何做呢？ 假設你有一個Car組件。 你想要根據一個prop來添加一個類名到組件的輸出結果中。 所以也許這個prop叫做color，你在應用的其他地方使用它的範例如下： <Car color="red"> <Car color="blue"> 在你的Car組件中，你首先需要聲明color prop： <script> export default { name: 'Car', props: { color: String } } </script> 然後你可以在模板部分使用它： <template> <div :class="color"></div> </template> 如果你想要添加一個car類，再加上根據color prop決定的類，你可以使用以下語法： <template> <div :class="['car', color]"></div> </template> 祝你編程愉快！

這裡是如何在Vue.js中將一個組件引入到另一個組件中的方法。 假設你有一個位於 src/components/Pixel.vue 的Pixel組件。 在另一個位於 src/components/Canvas.vue 的Canvas組件中，你可以在Vue單頁組件的script標籤內引入該Pixel組件： <template> <p>Canvas</p> <Pixel /> </template> <script> import Pixel from './Pixel' export default { name: 'App', components: { Pixel } } </script>