Color Picker Tool In React/Vue.js

這次的練習在於熟悉Vue元件的寫法，以及Bootstrap 4版面布局，Vue的元件第一個參數必須全部小寫，這點要特別注意。

  • Html
    • 注意codepen引用bootstrap時使用的版本(bootstrap 4)
      • 如果想要同一行顯示用row包起來
  • React
    • 思考如何取得與處理textarea的內容
  • Vue
    • 元件:第一個元件的參數開頭需要全部小寫
      • 使用元件的好處，能夠有自己的計算屬性
      • 從父類別繼承下來的屬性可以再重新計算成新的屬性
  • Javascript
    • Vue裡面的東西都是物件
    • html中都是用等號和引號取得vue的物件或資料
    • 用:style屬性接收物件的css設定的物件
      • :style=“card.csscolor”
      • :v-model=“color_cards”
      • :v-for=“card in color_cards”
    • computed裡面接的是object類型的東西
      • 計算出color_card字串切割後的值
  • CSS
    • hover:設定移動效果
      • transform: translate(5px, 5px);
      • transition: 4s
    • codepen編譯pug和sass差異
      • 編譯pug會重新整理頁面
      • 編譯sass不重新整理頁面,但會動態替換頁面的內容

Source Code如下:

📗:使用Vue.js建立sass色票工具