Vue.js

本篇介紹在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() { //....

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使用的是一種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....

過濾器是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 }}。...

有時候你會把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>

在本文中，我們將探討多種使用 CSS 去設計 Vue.js 元件的方式。 注意: 本教程使用 Vue.js 的單文件元件 最簡單的方式是在 Vue.js 元件中使用 style 標籤，就像在 HTML 中一樣： <template> <p style="text-decoration: underline">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> 這是最靜態的方式。如果你希望 underline 在元件的資料中被定義，你可以這樣做： <template> <p :style="{'text-decoration': decoration}">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> :style 是 v-bind:style 的縮寫。在本教程中，我將使用這個縮寫。 注意到我們必須將 text-decoration 用引號包起來。這是因為其中有連字符，而連字符不是有效的 JavaScript 識別符號。 你可以避免使用引號，使用 Vue.js 提供的特殊 camelCase 語法，並將其改寫為 textDecoration：...

如果您從未建立過Vue.js應用程式，我將帶您透過建立一個Vue應用程式的任務，並了解其運作方式。我們即將建立的應用程式已經完成，並且這是Vue CLI的預設應用程式。 第一個範例 在Codepen上查看 第二個範例：Vue CLI的預設應用程式 本地使用Vue CLI 使用CodeSandbox 文件結構 index.html src/main.js src/App.vue src/components/HelloWorld.vue 運行應用程式 如果您從未建立過Vue.js應用程式，我將帶您透過建立一個Vue應用程式的任務，並了解其運作方式。 第一個範例 首先，我們將使用最基本的Vue範例。 您需要建立一個包含以下內容的HTML檔案： <html> <body> <div id="example"> <p>{{ hello }}</p> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#example', data: { hello: 'Hello World!' } }) </script> </body> </html> 然後在瀏覽器中打開它。這就是您的第一個Vue應用程式！該頁面應該顯示一個“Hello World！”的訊息。 我將腳本標籤放在body的末尾，以便在DOM加載後按順序執行。 這段程式碼的作用是，我們實例化了一個新的Vue應用程式，將其連結到#example元素作為其模板（通常使用CSS選擇器來定義，但也可以傳遞HTMLElement）。 然後，它將該模板與data對象關聯。data是一個特殊的對象，用於存放我們希望Vue渲染的數據。 在模板中，特殊的{{ }}標記表示它是模板中的某一部分是動態生成的，其內容應從Vue應用程式數據中查找。 在Codepen上查看 您可以在Codepen上查看此範例： https://codepen.io/flaviocopes/pen/YLoLOp 碼筆與使用普通HTML檔案的方法有些不同，您需要在Pen設定中配置它以指向Vue庫的位置： 第二個範例：Vue CLI的預設應用程式 讓我們提升一點等級。我們即將建立的下一個應用程式是已經完成的Vue CLI預設應用程式。 什麼是Vue CLI？它是一個命令行工具，可以通過為您搭建應用程式框架並提供樣例應用程式來加快開發速度。 您可以通過兩種方式獲取此應用程式。 本地使用Vue CLI 第一種方式是在您的電腦上安裝Vue CLI，然後運行以下命令： vue create <enter the app name> 使用CodeSandbox 第二種方式是前往https://codesandbox....

使用Vue，您可以使用組件定義應用程式的佈局。起初，您手動將組件放置在所需位置，但有時需要更靈活的方式來根據應用程式狀態顯示或隱藏組件。 使用條件指令 最簡單的選擇是使用 v-if 和 v-else 指令。 這裡有個例子。v-if 指令檢查計算屬性 noTodos，如果狀態屬性 todos 至少包含一個項目，則返回false： <template> <main> <AddFirstTodo v-if="noTodos" /> <div v-else> <AddTodo /> <Todos :todos=todos /> </div> </main> </template> <script> export default { data() { return { todos: [] } }, computed: { noTodos() { return this.todos.length === 0 } } } </script> 這使得可以解決許多應用程式的需求，而無需達到更複雜的設定。條件可以嵌套，例如： <template> <main> <Component1 v-if="shouldShowComponent1" /> <div v-else> <Component2 v-if="shouldShowComponent2" /> <div v-else> <Component3 /> </div> </div> </main> </template> 使用 component 元件和 is 除了使用 v-if 和 v-else 結構，您可以建立模板，其中有一個將動態分配組件的佔位符。...

了解如何在Vue.js組件中啟用SCSS 使用Vue CLI，您可以啟用“CSS預處理器”，並且可以選擇要啟用的預處理器： 如果您使用的是非基於Vue CLI的項目，或者是使用Vue CLI初始化但沒有添加CSS預處理器支持的項目，則可以後期添加支持： npm install --save-dev node-sass sass-loader 在應用程序組件中，您可以使用： <style lang="scss"> … </style> 並在其中添加您的SCSS代碼。 如果您想將SCSS代碼保留在外部文件中，只需將其導入到組件的script部分中： <script> import '../public/style.scss' //... </script>