Vue

你可能對於像 React、Vue 或 Svelte 這樣的現代 JavaScript 框架中的屬性概念很熟悉。 注意：我之前寫過相關文章，你可以在 React Props、Vue Props 和 Svelte Props 找到這些文章。 屬性是我們將信息傳遞給組件的方式。這包括變數和函數。 Astro 組件 也支持屬性。 以下是如何使用它們。 假設你在 src/components/Hello.astro 中定義了一個 Hello 組件： <p>Hello！</p> 在使用組件時，你可以為它傳遞一個名為 name 的屬性，像這樣：<Hello name="Flavio" />，你可以使用以下語法在組件輸出中顯示名稱： <p>Hello {Astro.props.name}！</p> 通常，在組件的 frontmatter 部分使用對象解構將屬性提取到單獨的變量中，這在擁有複雜組件時很方便： --- const { name } = Astro.props --- <p>Hello {name}！</p> 下面是如何處理多個屬性，以支持這樣的使用方式：<Hello name="Flavio" message="歡迎" /> --- const { name, message } = Astro.props --- <p>{message} {name}！</p> 以這種方式，你可以為未設置的屬性提供默認值： --- const { name = '', message = 'Hello' } = Astro....

如何使用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()可以前進和後退，接受一個可能為正或負的數字來倒退或前進歷史記錄：...

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.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>

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

學習如何在Vue中根據條件動態應用類別或其他類別。 假設您希望根據isDark屬性的值來將background-dark類別應用於元素上，如果它是true的話，否則添加background-light類別。 在Vue中，您該如何做到這一點？ 使用 :class="[ isDark ? 'background-dark' : 'background-light' ]"。 以下是一個示例： <template> <div :class="[ isDark ? 'background-dark' : 'background-light' ]"> <h1>{{ msg }}</h1> </div> </template> <script> export default { props: { isDark: Boolean } } </script> <!-- 添加“scoped”屬性將CSS限制在此元件內部 --> <style scoped> .background-dark { background-color: #000; } .background-light { background-color: #fff; } </style> （非常感謝Adam Wathan在Tailwind Slack上提出這個建議）

學習如何自動將Vuex數據存儲到localStorage或sessionStorage中。 在談到數據存儲時，有各種不同的方法可以持久化數據。 其中一種非常簡單，非常適合原型，就是使用Web Storage API：localStorage和sessionStorage。 使用Vue，您可以以多種方式使用該API。其中最簡單的方法之一是依賴於vuex-persist庫。 您可以使用npm或Yarn安裝它： npm install vuex-persist #或者 yarn add vuex-persist 打開Vuex存儲文件，添加以下代碼： import VuexPersist from 'vuex-persist' 初始化VuexPersist： const vuexPersist = new VuexPersist({ key: 'my-app', storage: window.localStorage }) key是在localStorage數據庫中使用的鍵。 使用sessionStorage替換localStorage以使用其他存儲系統（每個存儲系統都有其自身的特點，請參閱上面我提供的Web Storage API文檔）。 接下來，在初始化store時，將vuexPersist添加到Vuex插件列表中： const store = new Vuex.Store({ //...初始化 plugins: [vuexPersist.plugin] }) 就這樣！每次更改store，該庫將把數據持久化到瀏覽器中。 您可以在官方文檔中找到更多高級功能，但這些是入門的基礎內容。

許多人問我對於 React 和 Vue.js 的意見。以下是我的想法。 作為對 Vue 和 React 製作電子書和課程的經驗者，我也在許多小型專案中使用它們，因此我認為我可以回答這個問題，幫助你在這兩者之間作出選擇。 下面是我的印象。 兩者都很好且快速 在技術細節上沒有差別，它們都達到相同的目的，且都執行得很好。 Vue 更適合初學者 這是我的印象。 React 正試圖追趕 Vue.js 最大的賣點，即 Vue 的初學者友善性。反之，React 針對略有不同的受眾，這在其文件中得以體現。 相較於 Vue，React 需要相當程度的現代 JavaScript 知識。 JSX 比模板語言更難理解。另一方面，Vue 與 Angular 相似，這使得從 Angular 遷移更加簡單。 Vue 更像一個完整的套件，React 則有大量可供選擇的庫 在 Vue 中，擁有官方套件來滿足主要需求（如路由或狀態管理），而 React 則讓庫自由競爭最受歡迎解決方案的位置。這可能從不同的觀點來看是好或壞。 我認為擁有官方套件來滿足常見需求非常方便，尤其是這意味著所有事物都保持同步，而系統的整體變更也被整體思考。 React 擁有較大的使用者群和就業機會 React 的市場份額很大。我不會提及任何形式的調查或研究，因為在Google上輕鬆搜尋即可找到最新資訊。 Vue 也在不斷增長，但若你想專攻某項技術以獲得工作或自由工作機會，React 絕對是更大的池塘。當然，這個池塘中有更多開發人員，而較不熟悉的 Vue 可能也會有更多機會，因為開發人員相對較少。很難說。 Vue 是獨立的，React 受 Facebook 支援 有什麼不同呢？我有時在 React 的發行說明中（或其他地方）看到類似「在 Facebook，我們有 XXXXX 個 React 組件」或「在 Facebook，嘀嘀咕咕…」的語句。React 是 Facebook 工程師的副產品。它並非獨立產品，也永遠不會是。如果 Facebook 需要某種特定需求導致對 React 進行修改或變更，那會被引進。這也意味著有時會進行變更，而你應該跟上快速的發展，否則就「落伍了」。...

解決 JavaScript 疲勞的旅程 直到幾個月前，我一看到 JavaScript 就會感到焦慮不安。 我完全受困於所謂的 JavaScript 疲勞中，無法擺脫它。 這種情況持續了好幾年。 今天，我喜歡 JavaScript 及其生態系統。 這是怎麼發生的呢？ 我從九十年代就開始以某種形式使用 JavaScript，而現在我架上有一些書，看起來在今天顯得非常有趣，書中滿滿的 document.write 陳述。 大概是在 2012-2013 年間，關於 ES6 將會帶來的巨大變化的消息在各處都跳著。 起初，我無法掌握所有事情的進展。我無法一次接受這麼多變化。JavaScript 改變了，但我表示抗拒。學好它已經費了我很多時間，而它卻在我腳下改變。 我在一篇博文的評論中看到一個真實的 點子，它表示“如果你從一開始就一直在這裡的話（對，我就是那個老人），學習現代 JavaScript 會更加困難”： 我會認為，以前（對，我就是那麼老）在那裡是更加困難的 - Tim Tate 我在 2012 年正式開始深入研究 JavaScript 和 Node.js，之前從未經歷過像 ES6 這樣的語言變革。此前一個重大變化發生在 2009 年的 ES5。ES6 徹底改變了一切。它是 JavaScript 的一次巨大改進，每天你都會遇到很多可能出現在 ES6 規範中的新功能，但你真的不知道它們是否真的會包含進去，需要每天跟上進度，其他人在推特上都在談論這些也許會成為下一個大事的東西。 var 被抛棄了。 function 不再存在。 花了很長時間才學會的原型繼承，被類（class）的奧妙所覆蓋。 這只是冰山一角。整個 JavaScript 生態系統在過去幾年中發生了巨大變化。 建置一切事物 正在發生的一個重大轉變是"建置"。 我們從一個非常簡單的東西（使用 script 標籤引入 JavaScript）發展到需要構建步驟將我們的語言編譯到某個難以理解的巨大文件中。起初我強烈抵抗，我站在我的塔樓上，拿著大砲抵抗建置的部隊。 但當 Babel 軍力出現時，我起初更加抵抗，但最終我舉起了白旗，並加入了敵人。 我意識到 Babel 不僅僅是一個引入未來、邊緣功能的時髦庫，而是在未來可以使用作為 ES2017 的工具，同樣地適用於 ES2018、ES2019 等。無路可逃。擁抱未來，Babel 是你的朋友。...