vanilla js
// get an Element object
document.getElementById('id');
document.getElementsByClassName('');
document.getElementsByTagName('');
const el = document.querySelector('#myId'); // 返回第一个匹配的element
document.querySelectorAll('selector'); // 返回所有匹配element// 解析json
JSON.parse(string)// 获取属性值
el.getAttribute('name');
// 设置属性值
el.setAttribute('name', 'abc');// hide
el.style.display = 'none';
// show
el.style.display = '';// 设置Style
el.style.boarderWidth = '20px';
el.style.color = '#ff0011';
// 添加class
el.classList.add(className);
// remove class
el.classList.remove(className);// bing search input
document.getElementById('sb_form_q').value = 'JavaScript';let el = document.getElementById('btn_1');
// eventHandler is a function
el.addEventListener('click', eventHandler);ES6规范指定了对象{}内部的字面量定义可以省略function
// 省略 key-value 形式
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}等价于
// 传统k-v形式
const Counter = {
data: function() {
return {
counter: data.num
}
},
mounted: function() {
setInterval(() => {
this.counter++
}, 1000)
}
}
// ?. 空安全访问
let a = null;
let b = a?.name; // b被赋值为undefined，而不是报错
// ?? 左侧的操作数为 null 或者 undefined 时，返回其右侧操作数
let a = 0 ?? ''; // a赋值为0
let b = 0 || ''; // b赋值为''