YX.S

點我進行遊戲

最近在學Vue，想說找個簡單的小練習來讓自己熟悉一下

於是乎，就決定寫個OOXX（井字遊戲）了！

Vue是一個現在非常流行的前端框架

以前在專案的時候有寫過一陣子的React

那時候覺得React非常的複雜，不說props跟state一直讓人摸不著頭緒

如果加上Redux，更是讓人看不懂到底是怎麼傳資料的...

不過可能因為之前的經驗，這次學Vue感覺蠻順手的

雖然也可能只是我還沒學到後面精髓的地方就是🤔

因為只是簡單的練習

所以就只有寫一個

，來當格子ＸＤ

然後內容在包目前每個格子的狀態

分別是 『-、O、X』三個內容

然後我的Vue的資料有

data: {

  initialContents: {

    '0': '-',

    '1': '-',

    '2': '-',

    '3': '-',

    '4': '-',

    '5': '-',

    '6': '-',

    '7': '-',

    '8': '-',

},

  contents: {},

  state: 'O',

  over: false,

  clickCount: 0

},

initialContents：遊戲開始的樣子

contents：目前格子樣子，在mounted的時候從initialContents做深拷貝過來～

created：在渲染HTML前调用，初始化某些属性值，然后再渲染成HTML。

mounted：在渲染HTML後调用，頁面完成后，再對HTML的dom進行一些需要的操作。

state：目前輪到O or X

over：結束與否

clickCount：用於判斷結束與否（點了9次代表結束了～）

然後在每個

我是把所有可能的獲勝狀態先寫下來，然後再比對目前的樣子是否 等於 某個狀態。

這樣就結束囉～

感覺挺好的，使用到Vue的一些技巧，然後又不是太複雜的挑戰。

算是熟悉Vue蠻快的一個練習！