# axios
https://github.com/axios/axios
Promise based HTTP client for the browser and node.js

## cdn
`<script src="https://unpkg.com/axios/dist/axios.min.js"></script>`

## Performing a GET request

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

## performing post method

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

## Performing multiple concurrent requests

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

# vuejs
https://vuejs.org/index.html

## Capturing User Inputs

<div id="app">
  <label for="name">Name:</label>
  <input id="name" type="text" v-model="name" /> <!--v-model is doing the magic here-->
  <p>{{ name }}</p>
</div>

//this is a vue instance
new Vue({
  //this targets the div id app
  el: '#app',
  data: {
    name: '' //this stores data values for ‘name’
  }
})

`v-model`會監視`name`的改變，改變的值會響應到前端上。

## Storing User Input On A Single Event

<div id="app">
  <label for="name">Name:</label>
  <input id="name" type="text" v-model.lazy="name" />
  <p>{{ name }}</p>
</div>

//this is a vue instance
new Vue({
  el: '#app',
  data: {
    name: ''
  }
});

`v-model.lazy`會等數入完成後才響應到網頁上

## Toggling Classes

<div id="app">
  <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Toggle me</button>
  <p :class="{ red: active }">Sometimes I need to be styled differently</p>
</div>

.red {
  color: red;
}

JS
new Vue({
  el: '#app',
  data: {
    active: false
  }
})

* `@click`:`v-on`的縮寫，完整式`v-on:click`，click的監聽器
* `@click="active = !active"`:把active做not 運算
* `:aria-pressed="active ? 'true' : 'false'"`:`v-bind`縮寫，完整式`v-bind:aria-pressed`，`aria-pressed`是button的attribute規則
* If `aria-pressed="true"` is used the button is a toggle button that is currently pressed.
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
* `:class="{ red: active }"`:如果是active狀態，把class套用紅色的css規則

## Hiding And Showing

<div id="app">
  <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'">
    Toggle Panel
  </button>
  <p v-if="show">hello</p>
</div>

new Vue({
  el: '#app',
  data: {
    show: true
  }
})

`v-if`:if 規則
`v-show`:當參數值不為null時顯示

<div id="app">
  <label for="textarea">What is your favorite kind of taco?</label>
  <textarea id="textarea" v-model="tacos"></textarea>
  <br>
  <button v-show="tacos">Let us know!</button>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      tacos: ''
    }
  }
})

## Submitting A Form

<div id="app">
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Name:</label><br>
      <input id="name" type="text" v-model="name" required/>
    </div>
    <div>
      <label for="email">Email:</label><br>
      <input id="email" type="email" v-model="email" required/>
    </div>
    <div>
      <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br>
      <textarea id="caps" v-model="caps" required></textarea>
    </div>
    <button :class="[name ? activeClass : '']" type="submit">Submit</button>
    <div>
      <h3>Response from server:</h3>
      <pre>{{ response }}</pre>
    </div>
  </form>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      email: '',
      caps: '',
      response: '',
      activeClass: 'active'
    }
  },
  methods: {
    submitForm() {
      axios.post('//jsonplaceholder.typicode.com/posts', {
        name: this.name,
        email: this.email,
        caps: this.caps
      }).then(response => {
        this.response = JSON.stringify(response, null, 2)
      })
    }
  }
})

event.preventDefault()：
如果事件可以被取消，就取消事件（即取消事件的預設行為）。但不會影響事件的傳遞，事件仍會繼續傳遞。submit.prevent為vuejs的呼叫方式。