Learn More →
Benson
曾炳章 🧑
Benson
Frontend developer & web designer 💻
Learing backend & database 👨💻
The director of pop dance club 🕺
Great oaks from little acorns grow 🌳
Don't lose your curiosity & always exploring 🔎
Working harder and harder and harder… 🔥
⭐Always remeber:
GOOD THING TAKE TIME :)
They abstract more complex code away from you, providing some easier syntax to use in its place.
HTTP
text formate(XML, JSON)
GET
POST
PUT
DELETE
The most common formats found in modern APIs
Less Verbose
Readable
High compatibility
{
"crust": "original",
"toppings": ["cheese", "pepperoni", "garlic"],
"status": "cooking",
"customer": {
"name": "Brian",
"phone": "573-111-1111"
}
}
the tool u must need when reading JSON
https://jsoneditoronline.org/
choose a pokemon u like the most & search its english name from google.
(I use eevee as example)
put your pokemon name
at the bottom of the API link
use JSON formatter to fomate it.
Dot notation
Bracket notation
Dot Notation 🏆
It’s a lot easier to read
It’s way faster to type.
Dot Notation limitation:
Issue working with Identifiers
Issue working with Variables
const obj = {
123: 'digit',
123name: 'start with digit',
name123: 'does not start with digit',
$name: '$ sign',
name-123: 'hyphen',
NAME: 'upper case',
name: 'lower case'
};
obj.123; // ❌ SyntaxError
obj.123name; // ❌ SyntaxError
obj.name123; // ✅ 'does not start with digit'
obj.$name; // ✅ '$ sign'
obj.name-123; // ❌ SyntaxError
obj.'name-123';// ❌ SyntaxError
obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'
obj['123']; // ✅ 'digit'
obj['123name']; // ✅ 'start with digit'
obj['name123']; // ✅ 'does not start with digit'
obj['$name']; // ✅ '$ sign'
obj['name-123']; // ✅ 'does not start with digit'
obj['NAME']; // ✅ 'upper case'
obj['name']; // ✅ 'lower case'
const variable = 'name';
const obj = {
name: 'value'
};
// Bracket Notation
obj[variable]; // ✅ 'value'
// Dot Notation
obj.variable; // undefined
const variable = 'name';
const obj = {
name: 'value',
variable: '👻'
};
obj[variable] = ?
obj.variable = ?
const variable = 'name';
const obj = {
name: 'value',
variable: '👻'
};
// Bracket Notation
obj[variable]; // ✅ 'value'
// Dot Notation
obj.variable; // '👻'
Vue.js methods & Event Handling
axios
async/await
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
methods: {
greet(event) {
// `this` inside methods point to the Vue instance
alert('Hello ' + this.name + '!')
// `event` is the native DOM event
alert(event.target.tagName)
}
}
Promise based HTTP client for the browser and node.js
function yayOrNay() {
return new Promise((resolve, reject) => {
const val = Math.round(Math.random() * 1); // 0 or 1
val ? resolve('Lucky!!') : reject('Nope 😠');
});
}
async function msg() {
try {
const msg = await yayOrNay();
console.log(msg);
} catch(err) {
console.log(err);
}
}
type in the "methods" in script
methods:{
}
create your function
methods:{
async search(){
}
}
type in the following code
methods:{
async search() {
const poke = this.pokemon.toLowerCase()
this.res = await this.$axios.$get(
`https://pokeapi.co/api/v2/pokemon/${poke}`
)
this.pic = `https://pokeres.bastionbot.org/images/pokemon/${this.res.id}.png`
this.test = true
}
}
run the code
$ yarn dev
hope u guys still sober ..
btw…