JavaScript

如何使用Vue Router，這是Vue應用程式中必不可少的一部分之一 簡介 在JavaScript網頁應用程式中，路由器是將目前顯示的視圖與瀏覽器地址欄內容同步的部分。 換句話說，它是當你在頁面上點擊某個元素時，使URL改變並顯示正確視圖的部分。 傳統上，網頁是基於URL構建的。當你訪問特定的URL時，會顯示特定的頁面。 隨著在瀏覽器內運行並改變使用者所見的應用程式的引入，許多應用程式打破了這種交互方式，你必須手動使用瀏覽器的History API更新URL。 當你需要將URL與應用程式中的視圖同步時，你就需要一個路由器。這是一個非常常見的需求，現代的主要框架現在都允許你進行路由管理。 Vue Router庫是Vue.js應用程式開發時的首選。Vue並不強制使用這個庫。你可以使用任何通用的路由庫，或者自己創建和History API集成，但是使用Vue Router的好處是它是官方的。 這意味著它是由維護Vue的同一群人維護的，所以你可以在框架中得到更一致的整合，並且保證它將始終與未來的版本兼容，無論是什麼版本。 安裝 Vue Router可以通過npm的vue-router包來獲取。 如果你使用script標籤引入Vue，可以使用以下方式引入Vue Router。 <script src="https://unpkg.com/vue-router"></script> unpkg.com是一個非常方便的工具，可以通過一個簡單的鏈接在瀏覽器中提供每個npm包 如果你使用Vue CLI，可以使用以下方式安裝 npm install vue-router 一旦你安裝了vue-router並使其可用，可以在你的應用程序中導入它。 你需要在vue之後導入它，並調用Vue.use(VueRouter)將其安裝在應用程序中。 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 在調用Vue.use()並傳遞路由器對象之後，在應用程式的任何組件中都可以訪問這些對象： this.$router是路由器對象 this.$route是當前路由對象 路由器對象 當在將Vue Router安裝到根Vue組件時，可以使用this.$router從任何組件中訪問路由器對象，它提供了許多不錯的功能。 我們可以使用以下方法導航至新路由： this.$router.push() this.$router.replace() this.$router.go() 這類似於History API的pushState，replaceState和go方法。 push()用於切換到新的路由，將新項目添加到瀏覽器的歷史記錄中。replace()類似，只是它不會將新狀態推送到歷史記錄中。 使用示例： this.$router.push('about') //命名路由，稍後查看 this.$router.push({ path: 'about' }) this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //使用查詢參數（post?post_slug=hello-world） this.$router.replace({ path: 'about' }) go()可以前進和後退，接受一個可能為正或負的數字來倒退或前進歷史記錄：...

學習如何使用 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 编程中将使用的常见命令和指令 指令 指令是由 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是一个非常令人印象深刻的项目。它是一个非常流行的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時，你可能會問自己“為什麼必須使用返回物件的函數來定義data，而不僅僅是一個物件呢？" 特別是考慮到在某些地方，data 並不是一個函數，比如在一些示例中的App組件中。 答案是，當組件被多次使用時，如果data不是一個函數，而是一個普通的物件，如下所示： data: { counter: 0 } 那麼根據JavaScript的工作方式，每個組件實例將共享這個屬性。 這在99.9%的情況下都不是你想要的，相反你應該這樣做： data: function() { return { counter: 0 } } 一開始可能不直觀，但一旦你接受這個解釋，並了解它對你的應用程式是有害的，也是可能引發錯誤的潛在來源，你就會記住總是使用一個函數來定義資料。

學習使用 Web Workers 在背景中運行 JavaScript 代碼的方法。 介紹 Web Workers 的瀏覽器支持 創建 Web Worker 與 Web Worker 通信 使用 Web Worker 物件中的 postMessage 傳回訊息 多個事件監聽器 使用 Channel Messaging API Web Worker 的生命週期 在 Web Worker 中加載庫 Web Worker 可用的 API Introduction JavaScript 是單線程的，無法同時並行運行。 這很好，因為我們不需要擔心並發編程中可能發生的一系列問題。 由於這個限制，JavaScript 代碼從一開始就被迫高效，否則用戶會有不好的體驗。昂貴的操作應該是異步的，以避免阻塞線程。 隨著 JavaScript 應用程序的需求越來越多，這在某些場景中開始成為一個問題。 Web Workers 在瀏覽器內引入了並行執行的可能性。 它們有幾個限制： 無法訪問 DOM：Window 對象和 Document 對象 它們可以通過消息與主 JavaScript 程序進行通信 它們需要從相同的源頭（域名、端口和協議）加載 如果使用文件協議（file://）提供頁面，它們就不能工作 Web Worker 的全局作用域是一個名為 WorkerGlobalScope 的對象，而不是在主線程中的 Window。 Browser support for Web Workers 非常好！...

今天我想談談在學習編程時可能遇到的一個問題。 我收到很多提到這個問題的電子郵件。 以下是一個例子。 你開始學習Python編程。過了一段時間後感到沮喪，失去動力，等等。然後你切換到JavaScript。 你開始學習JavaScript，直到遇到了一個阻礙點，事情變得比預期的困難，或者你不知道接下來應該學習什麼。 對於這個編程事情你感到疲倦，所以你放棄了。 或者你再次切換到另一種語言，希望這次能成功。 我稱之為「從一個語言跳到另一個」。 在網站開發中，從一個框架跳到另一個框架也很常見。你從Vue開始，然後切換到React，然後再切換到Svelte，然後又出現了一個新的框架。 草地並不比對岸更綠。 選擇一個事物。 堅持下去。 深入學習它。 將它了解透徹。 有一天你會意識到你真的想學習另一種語言，那很好。 但是在開始和成為一名開發者時，選擇一個語言。 每次切換語言，你都需要忘記一些東西，並學習新語言如何處理事物。 這也會讓你感到困惑。 你會開始混淆事情。 在一開始的時候，選擇哪種語言並不重要。 如果我必須建議一個，Python和JavaScript是非常好的選擇，因為它們的流行性和靈活性。

了解JavaScript中的事件冒泡和事件捕獲的工作原理 冒泡和捕獲是DOM事件用於傳播的兩種模型。 假設您的DOM結構如下： <div id="container"> <button>Click me</button> </div> 您希望在用戶點擊“button”時進行跟踪，並且有兩個事件監聽器，一個在button上，另一個在#container上。 請記住，除非您停止事件的傳播（參見後面的內容），否則對子元素的點擊事件將始終傳播到其父元素。 這些事件監聽器將按照順序調用，並且該順序由事件的冒泡/捕獲模型決定。 冒泡意味著事件從被點擊的項目（子項）向上傳播到其所有父層樹，從最近的父層開始。 在我們的示例中，button上的處理程序將在#container上的處理程序之前觸發。 捕獲則相反：外部事件處理程序在更具體的處理程序（例如button上的處理程序）之前觸發。 默認情況下，所有事件都會冒泡。 您可以通過將第三個參數應用於addEventListener並將其設置為true來選擇採用事件捕獲： document.getElementById('container').addEventListener( 'click', () => { //window loaded }, true ) 請注意，首先運行所有捕獲事件處理程序，然後運行所有冒泡事件處理程序。 順序遵循以下原則：DOM從Window對象開始，遍歷所有元素並尋找被點擊的項目。在此過程中，調用與事件關聯的任何事件處理程序（捕獲階段）。 一旦到達目標，它然後從父層樹重複此過程，直到Window對象，再次調用事件處理程序（冒泡階段）。

就像人人都可以學習數學基礎一樣。或者就像人人都可以學會開車，或學會使用智能手機一樣。 我相信每個人都可以學會編程。只要付出足夠的努力，使用好的培訓材料，並具備一定的動力，這是非常具有可行性的。 同時，我認為學習編程應該是有趣的。會計是無聊的。但是編程電腦呢？我們可以讓它們做很棒的事情，所以只是想到它是件無聊的事情就讓我笑出聲來。這是現代世界中最有趣的事情之一。 我在整個課程中都採用這種方法。讓我們一起學習編程JavaScript，並且讓它變得有趣！ 我不假設任何特定的背景知識 - 每個人都可以學會編程，而且你不需要知道計算機內部的工作原理！畢竟，我們可以拍攝出精彩的視頻和照片，而不必知道相機的內部工作原理，對吧？ 順便說一下，我也會解釋一點關於這方面的知識。 曾經在10年之前，我們是那些整天呆在房間裡，盯著螢幕的怪人。如今，幾乎全世界的每個人口袋裡都有一台計算機 - 我們征服了世界。 你可能會從不同的角度來學習編程。也許你正在轉行。也許你一直想成為一名網絡開發人員，但生活卻把你帶到了其他地方。也許你15歲，準備佔領世界。也許你85歲，只是想創造一些有趣的東西，不需要賺錢，只是為了樂趣和讓事情運行的滿足感。所有這些都是學習編程的很好且完全有效的理由。

了解 JAMstack 的意義以及這組技術的優勢 你在過去幾年中一定聽過 JAMstack 這個詞語。 JAMstack 是一組技術，結合使用以實現目標，如果你熟悉 LAMP 和 MEAN 的話，你可能已經知道了。 JAMstack 是什麼意思？ JAM 表示 JavaScript、API 和 Markup。 它描述了在創建網絡應用程式和網站時具有以下特點的趨勢： 有一個“愚蠢”的網絡伺服器（或者CDN），傳送運行應用所需的 HTML，通常是使用靜態站點產生器生成的。HTML 不是在伺服器上生成。 應用程式可以載入一些 JavaScript，從 API 中接收數據。頁面互動，如導航，可以導致從 API 獲取更多數據。認證也是通過 API 完成的。 這種新的方法是一種新的方式，與傳統的方式不同： 傳統網站提供應用程序中已有的內容（如靜態站點）。 基於 CMS 的網站從後端的數據庫中加載信息。 使用任何種類的後端語言進行服務器渲染的應用程式。 它也不同於具有服務器渲染部分的客戶端渲染網站（例如使用 React 構建）。JAMstack 完全不涉及服務器渲染。 使用 JAMstack 的優勢是什麼？ 它快速。HTML 已經生成並且網絡伺服器只需提供它，而無需進行從數據庫查找數據或為每個請求生成頁面 HTML 等任何後端操作。它可以通過 CDN（內容傳遞網絡）輕鬆提供。 它高效。由於沒有後端，所以沒有瓶頸（例如沒有數據庫）。 它更便宜，因為通過 CDN 提供資源比通過後端伺服器提供資源要便宜得多。 它更安全，因為後端僅通過 API 公開。 傳統的動態服務器渲染網站應用程序的方式（如 WordPress、Laravel 和 Rails）在許多情況下正被一種較輕的方式所取代。 一個典型的 WordPress 網站在每次頁面加載時可能對數據庫進行30-100次請求，這取決於安裝的插件數量。除非頁面被大量緩存，否則當一個 WordPress 網站在 Hacker News、Reddit 或任何其他大型網站上變得流行時，你會看到一個空白頁面-這意味著伺服器上發生了故障，因為該網站無法應對所有的流量。這往往是一個失去的機會，因為當網站以其最高的流行度時它無法運作。 相比於這些情況，提供一個靜態 HTML 頁面要有效得多，並且在 HTML 載入後可以根據需要仍然獲取動態數據，使用獨立的 API 呼叫。...