（前端筆記補充，備忘錄使用。）

• 1. HTML/CSS/H5C3 知識點
• • 1.1 鼠標(biāo)樣式|十字|
  • 1.2 css 半透明樣式
  • 1.3 CSS3 transform 屬性
  • • 1.3.1 旋轉(zhuǎn)
    • 1.3.2 縮放
  • 1.4 特殊寫法 \9
  • 1.5 解決video標(biāo)簽在谷歌不能自動播放
  • 1.6 \ 標(biāo)簽- 提示文字
  • 1.7 placeholder-自定義占位文本
  • 1.8 去除 input 默認(rèn)邊框
• 2. Javascript 知識點
• 2.1 創(chuàng)建節(jié)點
• • 2.2 插入節(jié)點
  • 2.3 修改元素樣式
  • 2.4 獲取Element滾動距離
  • 2.5 根據(jù)索引號刪除相關(guān)數(shù)據(jù)
  • 2.6 清空Ol里面的元素的內(nèi)容
  • 2.7 數(shù)組轉(zhuǎn)換為字符串
  • 2.8 Query.js相關(guān)
  • • 2.8.1 獲取DOM對象
    • 2.8.2 獲取jQuery對象
  • 2.9 移動端300ms延時問題的處理
  • 2.10 event 事件對像
  • 2.11 “== ”和“===”比較符的區(qū)別
  • 2.12 innerText和innerHTML的區(qū)別
  • 2.13 替換- replace() 方法
  • 2.14 根據(jù)位置返回字符
  • • 2.14.1 charAt
    • 2.14.2 charCodeAt
  • 2.15翻轉(zhuǎn)數(shù)組
  • 2.16 冒泡排序JavaScript sort()方法
  • 2.17 添加或刪除數(shù)組元素-JavaScript
  • • 2.17.1 push()方法 數(shù)組末尾添加數(shù)組元素
    • 2.17.2 unshift()方法 在開頭添加數(shù)組
    • 2.17.3 pop() 刪除最后一個數(shù)組元素
    • 2.17.4 shift()方法 刪除數(shù)組中第一個元素
  • 2.18 檢測是否為數(shù)組instanceof
  • 2.19 Date 對象
  • • 2.19.1 日期格式。
    • 2.19.2 創(chuàng)建Date對象的語法
    • 2.19.3 Date對象屬性
    • 2.19.4 Date對象方法
  • 2.20 Math.floor()方法 向下取整
  • 2.21 Math.ceil()方法 向上取整
  • 2.22 Math.random() 隨機函數(shù)
  • 2.23 退出循環(huán)continue、break區(qū)別
  • 2.24 switch 多分支語句
  • 2.25 三元表達(dá)式
  • 2.26 邏輯中斷
  • • 2.26.1 邏輯與 && (and)
    • 2.26.2 邏輯或 || (or)
    • 2.26.3 邏輯非 ! (Not：取反)
  • 2.27 變量的自增、自減
  • 2.28 %取余（取模）
  • 2.29 Boolean（邏輯）對象
  • • 2.29.1 創(chuàng)建 Boolean 對象
    • 2.29.2 布爾值轉(zhuǎn)換
    • 2.29.3 Boolean對象方法
  • 2.30 獲取變量數(shù)據(jù)類型
• 3. Vue
• • 3.1 事件修飾符
  • • 3.1.1 prevent 禁止 a 標(biāo)簽的默認(rèn)行為
  • 3.2 組件 - props 屬性值類型
  • • 3.2.1 傳值 - 子組件向父組件傳值
  • 3.3 內(nèi)置指令
  • • 3.3.1 v-if 及元素復(fù)用
    • 3.3.2 V-for
  • 3.4 修飾符
  • • 3.4.1 常用事件修飾符
    • 3.4.2 常用按鍵修飾符
    • 3.4.3 組合修飾符
    • 3.4.4 自定義 具體按鍵：
    • 千位分隔符的轉(zhuǎn)換
  • 3.5 Vue選項
  • • 3.5.1 watch(偵聽屬性) 和 computed(計算屬性)的區(qū)別
    • 3.5.2 watch 選項的聲明方式
  • 3.6 DOM 渲染
  • • 3.6.1 渲染函數(shù)render

1. HTML/CSS/H5C3 知識點

1.1 鼠標(biāo)樣式|十字|

cursor:move;

1.2 css 半透明樣式

opacity:.5;

1.3 CSS3 transform 屬性

屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動或傾斜。

1.3.1 旋轉(zhuǎn)

/*定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度*/ rotate(angle)

示例：

div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }

1.3.2 縮放

scaleX(x) /*通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換*/ scaleY(y) /*通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換*/ scaleZ(z) /*通過設(shè)置 Z 軸的值來定義縮放轉(zhuǎn)換*/ transform:scale(x,y) /*定義 2D 縮放轉(zhuǎn)換*/ scale3d(x,y,z) /*定義 3D 縮放轉(zhuǎn)換*/ transform: scale(1) /*不縮放，保持原樣輸出*/

scale()括號中的參數(shù)：<1縮小；>1 是放大；=1不縮放。

filter: scale(0)過濾屬性，0 是不顯示

更多相關(guān)知識點擊這里：W3school 之 CSS3 transform 屬性

1.4 特殊寫法 \9

margin: 0 2px 0 2px\9; /*表示此屬性只在IE 6 7 8 9 下生效*/

1.5 解決video標(biāo)簽在谷歌不能自動播放

video標(biāo)簽

<video src"mov.mp4"></video>

如需實現(xiàn)在谷歌瀏覽器能自動播放視頻，需添加靜音屬性muted,修改為如下樣式即可：

<video src"mov.mp4" muted></video>

1.6 <input> 標(biāo)簽- 提示文字

placeholder 屬性提供提示信息。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。

<input placeholder="請輸入用戶名">

注：placeholder 屬性是 HTML5 中的新屬性。

1.7 placeholder-自定義占位文本

自定義占位文本（placeholder）的樣式

當(dāng)我們對input元素或者textarea元素寫 CSS 樣式 的時候, 如果需要自定義占位文本(也就是placeholder)的樣式的時候怎么辦?

CSS有一個偽元素選擇器::placeholder可以解決我們的問題.

【用法】

• HTML

  <input placeholder="請輸入用戶名！">
  

• CSS

  input::placeholder {font-size: 12px;font-style: italic; }

• 結(jié)果
  
  
  

1.8 去除 input 默認(rèn)邊框

去除上例中如圖的默認(rèn)外邊框

border: 0; outline: none

2. Javascript 知識點

2.1 創(chuàng)建節(jié)點

createElement('li')

2.2 插入節(jié)點

ol.appendChild(li)

2.3 修改元素樣式

e.target 可以得到事件監(jiān)聽里的當(dāng)前元素 并且可以修改元素樣式：

e.target.style.backGround='blue'

2.4 獲取Element滾動距離

// 獲取body滾動距離 var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop

2.5 根據(jù)索引號刪除相關(guān)數(shù)據(jù)

// 刪除數(shù)組中的某些元素； splice(i,n):splice;

(i,n)，i表示從哪個位置刪除，n表示刪除幾個元素）
修改數(shù)據(jù)，attr可以獲取自定義的屬性 獲取固有屬性是prop

2.6 清空Ol里面的元素的內(nèi)容

// 清空Ol里面的元素的內(nèi)容 $('ol').empty()

案例應(yīng)用：toDoList （本地存儲案例）http://www.todolist.cn/

2.7 數(shù)組轉(zhuǎn)換為字符串

localStorage.setItem('todo',JSON.stringify(todolist)) var data=localStorage.getItem("todo"); console.log(data)

獲取轉(zhuǎn)換后的字符串前，要先轉(zhuǎn)換回對象才能獲取：

data=JSON.parse(data) console.log(data) console.log(data[0].title)

2.8 Query.js相關(guān)

下載Query.js文件：https://jquery.com/download/
重點：DOM對象和jQuery對象
用原生js獲取的對象是DOM對象；而用jQuery獲取的對象是jQuery對象

2.8.1 獲取DOM對象

var div=document.querySelector('div')；

2.8.2 獲取jQuery對象

$('div')

注：jQuery對象只能使用jQuery方法，DOM對象只能使用原生javaScript屬性和方法。

2.9 移動端300ms延時問題的處理

WebAPI編程【v6.5】移動端插件使用及輪播圖的實現(xiàn)

運用插件：fastclick
GitHub官網(wǎng)地址：https://github.com/ftlabs/fastclick

2.10 event 事件對像

• 寫到監(jiān)聽函數(shù)里；

• 由系統(tǒng)創(chuàng)建；

• 是事件的一系列相關(guān)數(shù)據(jù)的集合；

• 可自己命名：event、evt、e （實際開發(fā)中常用e表示）

• 寫成 e 這樣有兼容性問題（IE 6 7 8）

  解決兼容性的寫法：

  e=e || window.event; console.log(e); // 針對現(xiàn)在的瀏覽器，已不大考慮兼容性問題

• 阻止節(jié)點默認(rèn)行為

  event.preventDefault ()
  

• 阻止事件冒泡

  event.stopPropagation ()

2.11 “== ”和“===”比較符的區(qū)別

“ == ” ：比較值，不比較類型；
“ === ”：全等。值、類型全部要比較；
如果都是字符串比較，則“ == ” 和“ === ”的效果一樣，可無區(qū)別使用；
數(shù)據(jù)類型：參與比較兩者的數(shù)據(jù)類型 ，主要是數(shù)字字符串、布爾值。其他的復(fù)雜數(shù)據(jù)類型不能做比較。

2.12 innerText和innerHTML的區(qū)別

1、innerText：不識別HTML標(biāo)簽，并且去除空格和換行；
2、innerHTML：識別HTML標(biāo)簽 ；
3、 innerText和innerHTML都可以獲取元素內(nèi)的內(nèi)容，保留空格和換行。

2.13 替換- replace() 方法

replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子字符串。

注：
replace只會替換第一個字符

語法：

stringObject.replace(regexp/substr,replacement) 參數(shù)描述

regexp/substr	必需。規(guī)定子字符串或要替換的模式的 RegExp 對象。注意，如果該值是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉(zhuǎn)換為 RegExp 對象。
replacement	必需。一個字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。

返回值
一個新的字符串，是用replacement替換了regexp的第一次匹配或所有匹配之后得到的。

2.14 根據(jù)位置返回字符

2.14.1 charAt

var str='andy' str.charAt(3) // y

2.14.2 charCodeAt

charCodeAt(index) // 返回索引號的字符的ASCII值。

目的：判斷用戶按下了哪個鍵

直接返回： str[index] 屬H5新增

2.15翻轉(zhuǎn)數(shù)組

arr.reverse；

2.16 冒泡排序JavaScript sort()方法

sort() 方法用于對數(shù)組的元素進(jìn)行排序。
語法：

arrayObject.sort(sortby) // sortby可選參數(shù)：規(guī)定排序順序，必須是函數(shù)。

返回值：對數(shù)組的引用。注意，數(shù)組在原數(shù)組上進(jìn)行排序，不生成副本（直接覆蓋）。

arr.sort

~ 需要配合排序函數(shù)進(jìn)行冒泡排序：

function mySort (a.b) {return a - b //升序 return b - a //降序 }

更多JavaScript sort()方法 　>> 點擊這里

2.17 添加或刪除數(shù)組元素-JavaScript

2.17.1 push()方法 數(shù)組末尾添加數(shù)組元素

push()向數(shù)組末尾添加一個或多個數(shù)組元素（即追加元素），并返回新數(shù)組的長度。

提示：將新項添加到數(shù)組開頭，使用unshift()方法。

語法：

arrayObject.push(newelement1,newelement2,....,newelementX) 參數(shù)描述

newelement1	必需。要添加到數(shù)組的第一個元素。
newelement2	可選。要添加到數(shù)組的第二個元素。
newelementX	可選。可添加多個元素。

返回值： 把指定的值添加到數(shù)組后的新長度。

說明
push()方法可把它的參數(shù)順序添加到arrayObject的尾部。它直接修改arrayObject，而不是創(chuàng)建一個新的數(shù)組。push()方法和pop()方法使用數(shù)組提供的先進(jìn)后出棧的功能。

push() 方法的更多內(nèi)容，請點擊：https://www.w3school.com.cn/js/jsref_push.asp

2.17.2 unshift()方法 在開頭添加數(shù)組

unshift() 方法可向數(shù)組的開頭添加一個或更多元素，并返回新的長度。

語法：

arrayObject.unshift(newelement1,newelement2,....,newelementX) 參數(shù)描述

newelement1	必需。向數(shù)組添加的第一個元素。
newelement2	可選。向數(shù)組添加的第二個元素。
newelementX	可選。可添加多個元素。

返回值： arrayObject 的新長度。

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple"); console.log(unshift) // 輸出 Lemon,Pineapple,Banana,Orange,Apple,Mango

更多unshift()方法的內(nèi)容點擊：https://www.w3school.com.cn/jsref/jsref_unshift.asp

2.17.3 pop() 刪除最后一個數(shù)組元素

pop() 方法用于刪除并返回數(shù)組的最后一個元素。

語法：

arrayObject.pop() // 括號內(nèi)不跟參數(shù)，一次只能刪除一個；

返回值： arrayObject 的最后一個元素。

說明
pop() 方法將刪除 arrayObject 的最后一個元素，把數(shù)組長度減 1，并且返回它刪除的元素的值。如果數(shù)組已經(jīng)為空，則 pop() 不改變數(shù)組，并返回 undefined 值。

2.17.4 shift()方法 刪除數(shù)組中第一個元素

shift() 方法用于把數(shù)組的第一個元素從其中刪除，并返回第一個元素的值。

語法：

arrayObject.shift() // 刪除數(shù)組中的第一個元素，一次只能刪除一個

返回值： 數(shù)組原來的第一個元素的值。

說明
如果數(shù)組是空的，那么 shift() 方法將不進(jìn)行任何操作，返回 undefined 值。請注意，該方法不創(chuàng)建新數(shù)組，而是直接修改原有的 arrayObject。

提示和注釋
【注釋】：該方法會改變數(shù)組的長度。
【提示】：要刪除并返回數(shù)組的最后一個元素，請使用 pop() 方法。

2.18 檢測是否為數(shù)組instanceof

對于值類型，可以通過typeof判斷，string/number/boolean都很清楚，但是typeof在判斷到引用類型的時候，返回值只有object/function，你不知道它到底是一個object對象、還是數(shù)組、還是new Number等等。
這個時候就需要用到instanceof。

instanceof 運算符 檢測是否為數(shù)組；
它表示的是一種繼承關(guān)系，或者原型鏈的結(jié)構(gòu)。

Array.isArray(參數(shù)) H5新增方法，IE9以上才支持。

2.19 Date 對象

Date 日期對象。是一個構(gòu)造函數(shù)，必須使用New來調(diào)用；

2.19.1 日期格式。

無論輸入格式如何，JavaScript 默認(rèn)將輸出全文本字符串格式

Mon Feb 19 2018 06:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)

ISO 8601 語法 (YYYY-MM-DD) 也是首選的 JavaScript 日期格式：

1 ) ISO日期

var d = new Date("2020-02-19"); // YYYY-MM-DD格式 var d = new Date("2020-03"); // YYYY-MM格式 不規(guī)定具體某天 var d = new Date("2020"); // YYYY格式 不規(guī)定具體的月和日 // 格式：YYYY-MM-DDTHH:MM:SS 大寫字母T用以分隔日期和時間 var d = new Date("2018-02-19T12:00:00");

UTC（Universal Time Coordinated）等同于 GMT（格林威治時間）。

注：UTC，協(xié)調(diào)世界時，又稱世界統(tǒng)一時間，世界標(biāo)準(zhǔn)時間，國際協(xié)調(diào)時間。

2 ) JavaScript 短日期
短日期通常使用 "MM/DD/YYYY" 這樣的語法

var d = new Date("05/19/2020");

警告：

• 在某些瀏覽器中，不帶前導(dǎo)零的月或其會產(chǎn)生錯誤（var d = new Date("2018-2-19");）；
• 有些瀏覽器會嘗試猜測格式。有些會返回 NaN（“YYYY / MM / DD”）；
• 有些瀏覽器會嘗試猜測格式。有些會返回 NaN(“DD-MM-YYYY”)。

3 ) JavaScript 長日期
長日期通常以 "MMM DD YYYY" 這樣的語法來寫：

var d = new Date("Feb 19 2019");

• 月和天能夠以任意順序出現(xiàn)；
• 月能夠以全稱 (January) 或縮寫 (Jan) 來寫；
• 逗號會被忽略，且對大小寫不敏感；

var d = new Date("22 Feb 2019"); // 月和天能夠以任意順序出現(xiàn)； var d = new Date("February 22 2019"); // 月能夠以全稱 (January) 或縮寫 (Jan) 來寫 var d = new Date("Feb 22 2019"); var d = new Date("FEBRUARY, 25, 2019"); // 逗號會被忽略，且對大小寫不敏感

4 ) JavaScript 完整日期
JavaScript 接受“完整 JavaScript 格式”的日期字符串：

var d = new Date("Mon Feb 19 2018 06:55:23 GMT+0100 (W. Europe Standard Time)");

JavaScript 會忽略日期名稱和時間括號中的錯誤：

var d = new Date("Fri Mar 26 2018 09:56:24 GMT+0100 (Tokyo Time)");

2.19.2 創(chuàng)建Date對象的語法

// Date 對象會自動把當(dāng)前日期和時間保存為其初始值。 var myDate=new Date()

2.19.3 Date對象屬性

屬性描述

constructor	返回對創(chuàng)建此對象的 Date 函數(shù)的引用。
prototype	使您有能力向?qū)ο筇砑訉傩院头椒ā?/td>

2.19.4 Date對象方法

方法描述

Date()	返回當(dāng)日的日期和時間。
getDate()	從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay()	從 Date 對象返回一周中的某一天 (0 ~ 6)。
getMonth()	從 Date 對象返回月份 (0 ~ 11)。
getFullYear()	從 Date 對象以四位數(shù)字返回年份。
getYear()	請使用 getFullYear() 方法代替。
getHours()	返回 Date 對象的小時 (0 ~ 23)。
getMinutes()	返回 Date 對象的分鐘 (0 ~ 59)。
getSeconds()	返回 Date 對象的秒數(shù) (0 ~ 59)。
getMilliseconds()	返回 Date 對象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒數(shù)。
getTimezoneOffset()	返回本地時間與格林威治標(biāo)準(zhǔn)時間 (GMT) 的分鐘差。
getUTCDate()	根據(jù)世界時從 Date 對象返回月中的一天 (1 ~ 31)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒數(shù)
UTC()	根據(jù)世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數(shù)。

2.20 Math.floor()方法 向下取整

floor() 方法 執(zhí)行的是向下取整計算。

語法：

Math.floor(x) // x 必需。任意數(shù)值或表達(dá)式。

返回值： 返回小于或等于指定數(shù)字的最大整數(shù)的數(shù)字。

示例：

Math.floor(45.95); // 45 Math.floor(45.05); // 45 Math.floor(4); // 4 Math.floor(-45.05); // -46 Math.floor(-45.95); // -46

2.21 Math.ceil()方法 向上取整

Math.ceil() 函數(shù)返回大于或等于給定數(shù)字的最小整數(shù)。

示例：

console.log(Math.ceil(.95)) // 輸出 1 console.log(Math.ceil(4)); // 輸出 4 console.log(Math.ceil(7.004)); // 輸出 8 console.log(Math.ceil(-7.004));// 輸出 -7

2.22 Math.random() 隨機函數(shù)

random() 返回一個0~1之間的偽隨機小數(shù)（浮點數(shù)）。在0（包括0）和1（不包括）之間。

返回值： 一個浮點型偽隨機數(shù)字

示例（生成隨機數(shù)）：

function getRandomInt(max) {return Math.floor(Math.random() * Math.floor(max)); } console.log(getRandomInt(3)); // 輸出 0, 1 or 2

Math.random() 不能提供像密碼一樣安全的隨機數(shù)字。不要用來處理有關(guān)安全的事情。應(yīng)使用Web Crypto API 來代替, 和更精確的window.crypto.getRandomValues() 方法。

random()更多內(nèi)容點擊這里：Math.random() 函數(shù) （MDN Web文檔）

2.23 退出循環(huán)continue、break區(qū)別

continue 跳出本次循環(huán)，繼續(xù)下一個循環(huán)；
break 退出整個循環(huán)。

2.24 switch 多分支語句

switch 語句評估一個表達(dá)式，將表達(dá)式的值與case子句匹配，并執(zhí)行與該情況相關(guān)聯(lián)的語句。
語法：

switch(表達(dá)式) {case n:代碼塊break;case n:代碼塊break;default:默認(rèn)代碼塊 }

代碼解釋：

• 計算一次 switch 表達(dá)式；
• 把表達(dá)式的值與每個 case 的值進(jìn)行對比；
• 如果存在匹配，則執(zhí)行關(guān)聯(lián)代碼 實例

執(zhí)行原理： 利用表達(dá)式里的值，和case后面的選項值相匹配，如果匹配上，就執(zhí)行該case里面的語句，如果都沒有匹配上，則執(zhí)行default里面的語句

default 關(guān)鍵詞
當(dāng)不存在 case 匹配時所運行的代碼。default相當(dāng)于if 語句中的else，把 default 放到其它 case 之上它仍然有效。
break 關(guān)鍵詞
退出循環(huán)。如果 JavaScript 遇到break關(guān)鍵詞，會跳出switch代碼塊。如果找到匹配，并完成任務(wù)，則中斷執(zhí)行（break），不會進(jìn)行更多測試。

注：switch 一般應(yīng)用于特定的表達(dá)式的匹配選擇中。

2.25 三元表達(dá)式

三元表達(dá)式語法結(jié)構(gòu)：

條件表達(dá)式？表達(dá)式1:表達(dá)式2

示例：

var num=10; var result = num > 5? '是的'：'不是'； console.log(result)

三元表達(dá)式就是 if else 分支選擇語句的簡化版。

2.26 邏輯中斷

原理：當(dāng)有多個表達(dá)式（或值）時，如果左邊的值可以確定結(jié)果，就不再繼續(xù)運算右邊的表達(dá)式的值。

2.26.1 邏輯與 && (and)

表達(dá)式1 && 表達(dá)式2

兩側(cè)表達(dá)式的結(jié)果都為 True，結(jié)果才為True；只要有一側(cè)為 False，結(jié)果就為 False。

123 && 456 // 返回 456 // 數(shù)字,除了0為假，全部為真 0 && 456 // 返回0

圖示如下：

運算法則：

• 如果第一個表達(dá)式的值為True，則返回 表達(dá)式2
• 如果第一個表達(dá)式的值為False，則返回 表達(dá)式1

2.26.2 邏輯或 || (or)

表達(dá)式1 || 表達(dá)式2

兩側(cè)表達(dá)式的結(jié)果都為 False，結(jié)果才為False；只要有一側(cè)為 True，結(jié)果就為 True。

123 || 456 // 返回 123 // 數(shù)字,除了0為假，全部為真 0 || 456 // 返回 456

圖示如下：

運算法則：

• 如果第一個表達(dá)式的值為True，則返回表達(dá)式1
• 如果第一個表達(dá)式的值為False，則返回表達(dá)式2

2.26.3 邏輯非 ! (Not：取反)

示例：

Console.log(!true)

2.27 變量的自增、自減

“++”是遞增，“- -”是遞減

1 ）變量自加1

• num=num+1；
• ++num

上面這兩種寫法效果一樣。

2 ) 前置自增、自減

• ++num：前置自增 ；
• –num：前置自減

var num=10 ++num // 結(jié)果為11

3 ) 后置自增
與前置自增的區(qū)別在于，先返回原值，計算完成后，再自加1（如i++）。

2.28 %取余（取模）

1 ) 取余

3 % 5 = 3

2 ) 浮點數(shù)
算術(shù)運算里會有精度問題；

3 ) 判斷相等
不能直接用浮點數(shù)字判斷是否相等。

問題：

怎么判斷一個數(shù)能夠被整除： 如果余數(shù)是0，則說明這個數(shù)能被整除（取余的主要用途）；

1+2*3等于幾？ 算術(shù)運算符的優(yōu)先級，同樣遵循先乘除、后加減。

2.29 Boolean（邏輯）對象

Boolean（邏輯）對象用于將非邏輯值轉(zhuǎn)換為邏輯值（true 或者 false）；
可以將 Boolean 對象理解為一個產(chǎn)生邏輯值的對象包裝器。

2.29.1 創(chuàng)建 Boolean 對象

使用關(guān)鍵詞 new 來定義 Boolean 對象。
示例：定義一個名為 myBoolean 的邏輯對象：

var myBoolean=new Boolean(value)

返回值：

• 當(dāng)作為一個構(gòu)造函數(shù)（帶有運算符 new）調(diào)用時，Boolean() 將把它的參數(shù)轉(zhuǎn)換成一個布爾值，并且返回一個包含該值的 Boolean 對象；
• 如果作為一個函數(shù)（不帶有運算符 new）調(diào)用時，Boolean() 只將把它的參數(shù)轉(zhuǎn)換成一個原始的布爾值，并且返回這個值。

注釋：如果邏輯對象無初始值或者其值為 0、-0、null、""、false、undefined 或者 NaN，那么對象的值為 false。否則，其值為 true（即使當(dāng)自變量為字符串 “false” 時）！

2.29.2 布爾值轉(zhuǎn)換

Boolean(myBoolean)

數(shù)字轉(zhuǎn)換成布爾值，除了0與NaN，其余都是true；

字符串轉(zhuǎn)換成布爾值，除了空字符串""，其余都是true；

null與undefined會轉(zhuǎn)換成false；

對象會轉(zhuǎn)換成true。

2.29.3 Boolean對象方法

toSource() // 返回該對象的源代碼。 toString() // 把邏輯值轉(zhuǎn)換為字符串，并返回結(jié)果。 valueOf() // 返回 Boolean 對象的原始值。

補充：
true：參與運算時，當(dāng)1； false：參與運算時，當(dāng)0。

2.30 獲取變量數(shù)據(jù)類型

獲取變量數(shù)據(jù)類型 Typeof

console.log(Typeof age)

prompt 獲取的數(shù)字是字符串型的

1、如果一個變量聲明未賦值，就是undefined 未定義數(shù)據(jù)類型；
2、undefined和數(shù)字相加，結(jié)果是NaN（不是一個數(shù)值）；
3、一個聲明變量給null值，里面存的值為空，null+1=1

3. Vue

Vue 的 核心 是 數(shù)據(jù) 與 視圖 的 雙向綁定。當(dāng)數(shù)據(jù)變化時，渲染的視圖就會立即更新。

3.1 事件修飾符

3.1.1 prevent 禁止 a 標(biāo)簽的默認(rèn)行為

• 用法 <a @click.prevent></a><!-- 或者 --><a v-on:click.prevent></a>

3.2 組件 - props 屬性值類型

• 字符串 String；
• 數(shù)值 Number；
• 布爾值 Boolean；
• 數(shù)組 Array；
• 對象 Object。

???????這些類型都是以組件屬性的方式進(jìn)行傳遞，但是，對于布爾和數(shù)值類型的，如果通過v-bind綁定，在子組件中就能得到對應(yīng)類型的數(shù)據(jù)。反之，如果不用v-bind做綁定，子組件中得到的數(shù)據(jù)，就都是字符串型的內(nèi)容。

3.2.1 傳值 - 子組件向父組件傳值

props 傳遞數(shù)據(jù)原則：單向數(shù)據(jù)流（也就是只允許父組件向子組件傳遞數(shù)據(jù)，而不允許子組件直接操作props中的數(shù)據(jù)）。

但是，子組件 可以 通過自定義事件向父組件傳遞信息 。

子組件模板中綁定 click事件，當(dāng)事件觸發(fā)時，要顯式的調(diào)用$emit方法（觸發(fā)父組件的自定義事件）。同時，在父組件模板中v-on（簡寫為@）監(jiān)聽 ，

<button @click='$emit('enlarge-text')'>增大父組件中的字體大小</button> <menu-item :parr="parr" @enlarge-text="handle"></menu-item>

在父組件中定義方法：

var vm = new Vue({el: '#app',data: {pmsg: '父組件中內(nèi)容',parr: ['apple', 'orange', 'banana'],fontSize:10,},methods:{handle:function(){// 擴大字體大小this.fontSize +=5，}} })

然后，再在父組件模板中進(jìn)行綁定：

<div :style="{fontSize: fontSize + 'px'}">{{pmsg}}</div>

完整代碼：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head><body><div id="app"><div :style="{fontSize: fontSize + 'px'}">{{pmsg}}</div><menu-item :parr="parr" @enlarge-text="handle"></menu-item></div><script>// 子組件向父組件傳值Vue.component('menu-item', {props: ['parr'],template: `<div><ul><li :key='index' v-for='(item,index) in parr'>{{item}}</li></ul><button @click='parr.push("lemon")'>點擊</button><button @click='$emit("enlarge-text")'>增大父組件中的字體大小</button></div> `})var vm = new Vue({el: '#app',data: {pmsg: '父組件中內(nèi)容',parr: ['apple', 'orange', 'banana'],fontSize: 10,},methods: {handle: function() {// 擴大字體大小this.fontSize += 2}}})</script> </body></html>

3.3 內(nèi)置指令

3.3.1 v-if 及元素復(fù)用

• 示例一

  <div id="app"><p v-if="status ===1"> status 為1 時顯示該行</p><p v-else-if="status === 2">當(dāng)status 為2 時顯示該行</p><p v-else>否則顯示該行</p> </div>

  v-else-if 要緊跟v-if, v-else 要緊跟 v-else-if 或v-if，表達(dá)式的值為真時，當(dāng)前元素 / 組件及所有子節(jié)點將被渲染，為假時被移除。如果一次判斷的是多個元素，可以在Vue.js內(nèi)置的＜template>元素上使用條件指令，最終渲染的結(jié)果不會包含該元素，例如：

  <div id="app"><template v-if="status ===1"><p>這是文本1</p><p>這是文本2</p><p>這是文本3</p></template> </div>

• 示例二：元素復(fù)用

  <template v-if="type ==='name'"><label>用戶名：</label><input placeholder="輸入用戶名" key="name-input"> </template> <template v-else><label>郵&nbsp;&nbsp;&nbsp;箱：</label><input placeholder="輸入郵箱" key="mail-input"> </template> <button @click="handleToggleClick">切換輸入</button> var vm = new Vue({el: '#app',data: {type: 'name'},methods: {handleToggleClick: function() {this.type = this.type === 'name' ? 'email' : 'name';}} })

  注意： Vue 在渲染元素時，出于效率考慮，會盡可能地復(fù)用已有的元素而非重新渲染，比如：

  如果不添加Vue.js提供的key屬性，那么input就會被復(fù)用：即，鍵入內(nèi)容后，點擊切換按鈕，雖然DOM變了，但是之前在輸入框鍵入的內(nèi)容并沒有改變，只是替換了placeholder 的內(nèi)容，說明＜input>元素被復(fù)用了。

3.3.2 V-for

• 遍歷 數(shù)組：表達(dá)式支持 1 個可選參數(shù)作為當(dāng)前項的 索引。

  <li v-for="(item,index) in list">

• 遍歷對象：有 2 個可選參數(shù)，分別是 鍵名（key） 和 索引（index）：

  <li v-for="( value,key,index ）in list">

v-for 也可以用在內(nèi)置標(biāo)簽＜template＞上， 將多個元素進(jìn)行渲染。

3.4 修飾符

3.4.1 常用事件修飾符

名稱可用版本可用事件說明

.stop	所有	任意	當(dāng)事件觸發(fā)時，阻止事件冒泡
.prevent	所有	任意	當(dāng)事件觸發(fā)時，阻止元素默認(rèn)行為
.capture	所有	任意	當(dāng)事件觸發(fā)時，阻止事件捕獲
.self	所有	任意	限制事件僅作用于節(jié)點自身
.once	2.1.4 以上	任意	事件被觸發(fā)一次后，即解除監(jiān)聽
.passive	2.3.0 以上	滾動	移動端，限制事件永不調(diào)用preventDefault()方法

3.4.2 常用按鍵修飾符

別名修飾符鍵值修飾符對應(yīng)按鍵

.delete	.8/.46	回格 / 刪除
.tab	.9	制表
.enter	.13	回車
.esc	.27	退出
.space	.32	空格
.left	.37	左
.up	.38	上
.right	.39	右
.down	.40	下

使用按鍵別名，無須記住按鍵的鍵值即可實現(xiàn)對特定按鍵的監(jiān)聽事件。如，監(jiān)聽
回車鍵：

• 示例1

  <input type="text" @keyup.13="console .log($event)" >

  可寫成：

  <input type="text" @keyup.enter="console .log($event)" >

• 示例2
  只有在keyCode 是13 時，才調(diào)用vm.submit

  <input @keyup.13="submit">

3.4.3 組合修飾符

為實現(xiàn)多鍵操作，Vue 提供了組合修飾符的機制，不過其必須配合系統(tǒng)按鍵修飾符方可生效，系統(tǒng)修飾符 如下表所示。

修飾符可用版本對應(yīng)按鍵

.ctrl	2.1.0 以上	Ctrl
.alt	2.1.0 以上	Alt
.shift	2.1.0 以上	Shift
.meta	2.1.0 以上	Mac 下是Command 鍵， Windows 下是窗口鍵

• 示例：組合使用

  <!-- Shift + S --> <input @keyup.shift.83="handleSave"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething"> Do something</div>

3.4.4 自定義 具體按鍵：

//全局定義后，就可以使用keyup.fl vue.config.keyCodes.fl=112

---

更多修飾符用法參見以下示例：

• 阻止單擊事件冒泡

  <a @click.stop="handle"></a>

• 提交事件不再重載頁面

  <form @submit.prevent="handle" ></form>

• 修飾符可以串聯(lián)

  <a @click.stop.prevent="handle" ></a>

• 只有修飾符<form @submit.prevent></form>

• 添加事件偵聽器時使用事件捕獲模式<div @click.capture=”handle ”> ... </div>

• 只當(dāng)事件在該元素本身（而不是子元素） 觸發(fā)時觸發(fā)回調(diào)

  <div @click.self="handle"> ... </div>

• 只觸發(fā)一次，組件同樣適用

  <div @click.once="handle"> ... </div>
  

千位分隔符的轉(zhuǎn)換

return val.toString().replace(/\B(?=(\d{3})+$)/g,',');

3.5 Vue選項

3.5.1 watch(偵聽屬性) 和 computed(計算屬性)的區(qū)別

• watch：更注重于處理數(shù)據(jù)變化時的 業(yè)務(wù)邏輯；
• computed：更注重于 衍生數(shù)據(jù)；
• 與 computed 相比，watch 還優(yōu)于可以 異步修改數(shù)據(jù)。
  
  

3.5.2 watch 選項的聲明方式

示例如下：

watch: {msg: {handler : 'logMsg' , //方法名deep: true, //深度觀察:對象任何層級數(shù)據(jù)發(fā)生變化， watch方法都會被觸發(fā)immediate: true //立即調(diào)用:在偵昕開始時立即調(diào)用一次watch方法},'msg.sender': ['logLine', 'logMsg'] //數(shù)組方式，可調(diào)用多個方法 }

3.6 DOM 渲染

el 選項，其屬性值僅限于css 選擇器、DOM 節(jié)點對象。

另，Vue 允許開發(fā)者使用$mount方法來掛載實例，示例如下：

let vm = new Vue({// el : '#app', //這里未使用el ，而是用其等效用法data () {return{msg: 'Hello World '}} })let handleMount = function () {vm.$mount ('#app') }

3.6.1 渲染函數(shù)render

render 函數(shù)同樣也可用于渲染視圖，它提供了回調(diào)方法createElement以供我們創(chuàng)建 DOM 節(jié)點。

案例源碼：https://pan.baidu.com/s/1zNDSf_mkTfaZq0nGUGsUUg
提取碼: 8vxa

render 函數(shù)的回調(diào)方法createElement允許開發(fā)者在合適的位置為 DOM 節(jié)點綁定 監(jiān)聽事件。

• 為按鈕綁定點擊事件的用法：

  on:{click () => {} }

  其他事件的綁定方法大致如此。
  
  

• 在render函數(shù)中，為事件綁定修飾符

  對于一些不易編寫的事件修飾符， Vue 提供了簡寫前綴：

  修飾符前 綴說明

  .passive	&	移動端，限制事件永不調(diào)用preventDefault()方法；
  .capture	!	當(dāng)事件觸發(fā)時，阻止事件捕獲；
  .once	~	事件被觸發(fā)一次后即解除監(jiān)聽；
  .capture.once/.once.capture	~!	事件被觸發(fā)一次后即解除監(jiān)聽并阻止事件捕獲。

  用法示例:

  on : {'!click':() => {}, // .capture'~keyup':() => {},I // .once'~!mouseover': () =>{} // .capture.once }
  

  其他的一些事件修飾符，可以使用原生JavaScript 編寫：

  修飾符原生 JS

  .stop	event.stopPropagation()
  .prevent	event.preventDefault()
  .self	if (event.target !== event.currentTarget) return
  .enter /.13	if (event.keyCode !== 13) return
  .ctrl	if (!event.ctrlKey) return

在 DOM 中查詢和更新節(jié)點是一件比較低效的工作，為此，Vue 提供了 render 函數(shù) 和 虛擬DOM 。虛擬DOM 將對真實DOM 發(fā)生的變化進(jìn)行追蹤，以降低DOM 查詢用時。

—— 與document.createElement 不同， render 中的createElement 創(chuàng)建的并不是真實的DOM 節(jié)點，而是虛擬節(jié)點。

總結(jié)

以上是生活随笔為你收集整理的前端知识点随记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。