1. 程式人生 > >使用 Vue.js 改寫 React 的官方教程井字棋

使用 Vue.js 改寫 React 的官方教程井字棋

React 的官方[教程][react-tutorial-zh]井字棋很好的引導初學者一步步走進 React 的世界,我想類似的教程對 Vue.js 的初學者應該也會有啟發,於是使用 Vue.js 進行了改寫 可以先檢視最終的[結果][codepen-done],嘗試點選體驗,我們將逐步地實現這個效果 ## 初始狀態程式碼 ### 初始狀態檢視 開啟[初始狀態][codepen-init]直接編輯,或者將對應的檔案複製下來放置在同一資料夾中 此時只是一個簡單的井字棋格子,以及寫死的下一個選手 ### 初始程式碼分析 目前定義了三個元件,分別為 Square,Board 和 Game Square 目前只是一個普通的按鈕 ``` Vue.component('Square', { template: ` ` }) ``` - 這樣定義了元件後,別的元件就可以直