props => 元件可以控制自己內部的狀態

1
2

import React, {Component} from 'react';

state

JSX

JSX用於React裡面快速定義HTML模板，其與HTML的差異

• HTML有些標籤不用有 “/“結尾符號，在JSX裡面一定要

  • ```HTML
    correct
    error

    1 2 3 4 5

    * HTML裡面的"class"要變成"className", "for"要變成"htmlFor" * ```HTML <div className="..."></div> <label htmlFor="check"></label>

• 駝峰式命名

  •   onclick -> onClick
      className
      ...
    

• 大括號{} 可用大括號定義值或表達式，沒用大括號就如同HTML是字串

NPM與Yarn基本指令

• 目前的npm安裝速度已經大幅的上升了，但整體上仍是yarn稍微快一點。
• 但目前yarn在網路上有發生衝突的狀況
• 以下為個人較常使用之指令

模板語法

• 雙大括號中插入數值或文字
• v-once : (只印出一次，後續不會改變值)
• v-html : 可印出包含html字串的東西。有危險(可以包可能有攻擊行為)
• v-bind : 指定屬性為資料，要使用v-bind(ex: v-bind:checked=”selected”)
  • 縮寫(:)
  • ex:

    1	v-bind:checked="count%2===0" -> :checked="count%2===0"

• v-on : 偵聽DOM輸入事件的方法
  • 縮寫(@)
  • ex:

    1	v-on:click="add" -> @click="add"

• v-model : 雙向綁定
  • ex: https://codepen.io/dasre/pen/dqoeWO

Vue 實例(instance)

• 實例 instance(具體的個體)
• 類別 Class(廣泛描述的概念)

Human -> class
const me = new Human(); -> instance
const you = new Human(); -> instance

me !== me

Vue ->

1

const vm  = new Vue({}) 

• el : 元素(使用CSS選擇器)
• $mount : 掛載(連結el的動作)
  • 掛載只會掛載到第一個符合的元素上(所以一般都會用id)
  • ex : https://codepen.io/dasre/pen/ZMGZEV?editors=1010
  • 掛載方式2 : https://codepen.io/dasre/pen/vzOMNy?editors=1010
  • 需要時再掛載

    1 2 3

    vm.$mount('#app'); //也可以寫成 vm.$mount(document.getElementById('app'));

• template : 模板(定義掛載上去長怎樣)
  • ex : 可以寫在js裡面取代html那個東西

    1 2 3 4 5 6 7

    const vm = new Vue({ el:'#app', template:"<div><h2>{{msg}}{{msg}}</h2></div>", data:{ msg:'Hello', }, });

• data : 狀態
  • ex : https://codepen.io/dasre/pen/RYPOjZ?editors=1011
• methods : 方法
  • methods和data裡面的命名不要一樣(避免衝突)
  • methods裡面不可以使用箭頭函式(會造成this是global的)
  • ex : https://codepen.io/dasre/pen/xaGemE?editors=1010
• computed : 計算屬性
  • ex : https://codepen.io/dasre/pen/oPXKEY
• watch : 偵聽器
  • 偵聽data methods computed裡面的值
  • ex : https://codepen.io/dasre/pen/WgQevB
  • 不要濫用watch

條件判斷

• v-if : 控制元素要不要看的見(不是用CSS方法看不見，而是直接刪除那段code)
  • template : HTML5 <template></template>
  • 用來包住其他元素
  • ex : https://codepen.io/dasre/pen/NLNYqZ
• v-else : 一定要接再v-if之後
  • v-if 和 v-else之間不能有其他tag存在
  • v-else和v-if東西不會共存(不是用CSS方法看不見)
  • ex : https://codepen.io/dasre/pen/NLNYRQ
• v-else-if : 提供不只兩種選擇
  • ex : https://codepen.io/dasre/pen/yxOKXJ
• v-show : show或不show(顯示出來或不顯示出來)
  • 用 display:none CSS這個方法
  • v-show後面沒有v-else
  • v-show不能和template在一起(因為HTML本來就沒有template這東西)，所以如果是True的狀況，無法顯示
  • ex : https://codepen.io/dasre/pen/NLNYwP

2

LSTM的input須為三維，其一些參數介紹

假設現在有10000筆測試資料

• epoch = 10 -> 訓練10000筆資料10次
• batch size = 100 -> 一次處理這10000筆資料的其中100筆，再來是另外100筆…
• timesteps = 5 -> 相當於用(Xn-4,Xn-3,Xn-2,Xn-1,Xn)預測Xn+1時刻的值。
• data_dim = 3 -> 等於特徵值有3個