前端知识点随记
（前端筆記補充，備忘錄使用。）
- 1. HTML/CSS/H5C3 知識點
- 1.1 鼠標樣式|十字|
- 1.2 css 半透明樣式
- 1.3 CSS3 transform 屬性
- 1.3.1 旋轉
- 1.3.2 縮放
- 1.4 特殊寫法 \9
- 1.5 解決video標簽在谷歌不能自動播放
- 1.6 \ 標簽- 提示文字
- 1.7 placeholder-自定義占位文本
- 1.8 去除 input 默認邊框
- 2. Javascript 知識點
- 2.1 創建節點
- 2.2 插入節點
- 2.3 修改元素樣式
- 2.4 獲取Element滾動距離
- 2.5 根據索引號刪除相關數據
- 2.6 清空Ol里面的元素的內容
- 2.7 數組轉換為字符串
- 2.8 Query.js相關
- 2.8.1 獲取DOM對象
- 2.8.2 獲取jQuery對象
- 2.9 移動端300ms延時問題的處理
- 2.10 event 事件對像
- 2.11 “== ”和“===”比較符的區別
- 2.12 innerText和innerHTML的區別
- 2.13 替換- replace() 方法
- 2.14 根據位置返回字符
- 2.14.1 charAt
- 2.14.2 charCodeAt
- 2.15翻轉數組
- 2.16 冒泡排序JavaScript sort()方法
- 2.17 添加或刪除數組元素-JavaScript
- 2.17.1 push()方法 數組末尾添加數組元素
- 2.17.2 unshift()方法 在開頭添加數組
- 2.17.3 pop() 刪除最后一個數組元素
- 2.17.4 shift()方法 刪除數組中第一個元素
- 2.18 檢測是否為數組instanceof
- 2.19 Date 對象
- 2.19.1 日期格式。
- 2.19.2 創建Date對象的語法
- 2.19.3 Date對象屬性
- 2.19.4 Date對象方法
- 2.20 Math.floor()方法 向下取整
- 2.21 Math.ceil()方法 向上取整
- 2.22 Math.random() 隨機函數
- 2.23 退出循環continue、break區別
- 2.24 switch 多分支語句
- 2.25 三元表達式
- 2.26 邏輯中斷
- 2.26.1 邏輯與 && (and)
- 2.26.2 邏輯或 || (or)
- 2.26.3 邏輯非 ! (Not：取反)
- 2.27 變量的自增、自減
- 2.28 %取余（取模）
- 2.29 Boolean（邏輯）對象
- 2.29.1 創建 Boolean 對象
- 2.29.2 布爾值轉換
- 2.29.3 Boolean對象方法
- 2.30 獲取變量數據類型
- 3. Vue
- 3.1 事件修飾符
- 3.1.1 prevent 禁止 a 標簽的默認行為
- 3.2 組件 - props 屬性值類型
- 3.2.1 傳值 - 子組件向父組件傳值
- 3.3 內置指令
- 3.3.1 v-if 及元素復用
- 3.3.2 V-for
- 3.4 修飾符
- 3.4.1 常用事件修飾符
- 3.4.2 常用按鍵修飾符
- 3.4.3 組合修飾符
- 3.4.4 自定義 具體按鍵：
- 千位分隔符的轉換
- 3.5 Vue選項
- 3.5.1 watch(偵聽屬性) 和 computed(計算屬性)的區別
- 3.5.2 watch 選項的聲明方式
- 3.6 DOM 渲染
- 3.6.1 渲染函數render
1. HTML/CSS/H5C3 知識點
1.1 鼠標樣式|十字|
cursor:move;1.2 css 半透明樣式
opacity:.5;1.3 CSS3 transform 屬性
屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
1.3.1 旋轉
/*定義 2D 旋轉，在參數中規定角度*/ 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) /*通過設置 X 軸的值來定義縮放轉換*/ scaleY(y) /*通過設置 Y 軸的值來定義縮放轉換*/ scaleZ(z) /*通過設置 Z 軸的值來定義縮放轉換*/ transform:scale(x,y) /*定義 2D 縮放轉換*/ scale3d(x,y,z) /*定義 3D 縮放轉換*/ transform: scale(1) /*不縮放，保持原樣輸出*/scale()括號中的參數：<1縮小；>1 是放大；=1不縮放。
filter: scale(0)過濾屬性，0 是不顯示更多相關知識點擊這里：W3school 之 CSS3 transform 屬性
1.4 特殊寫法 \9
margin: 0 2px 0 2px\9; /*表示此屬性只在IE 6 7 8 9 下生效*/1.5 解決video標簽在谷歌不能自動播放
video標簽
<video src"mov.mp4"></video>如需實現在谷歌瀏覽器能自動播放視頻，需添加靜音屬性muted,修改為如下樣式即可：
<video src"mov.mp4" muted></video>1.6 <input> 標簽- 提示文字
placeholder 屬性提供提示信息。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。
<input placeholder="請輸入用戶名">注：placeholder 屬性是 HTML5 中的新屬性。
1.7 placeholder-自定義占位文本
自定義占位文本（placeholder）的樣式
當我們對input元素或者textarea元素寫 CSS 樣式 的時候, 如果需要自定義占位文本(也就是placeholder)的樣式的時候怎么辦?
CSS有一個偽元素選擇器::placeholder可以解決我們的問題.
【用法】
-
HTML
<input placeholder="請輸入用戶名！">
-
CSS
input::placeholder {font-size: 12px;font-style: italic; }
- 結果
1.8 去除 input 默認邊框
去除上例中如圖的默認外邊框
border: 0; outline: none2. Javascript 知識點
2.1 創建節點
createElement('li')2.2 插入節點
ol.appendChild(li)2.3 修改元素樣式
e.target 可以得到事件監聽里的當前元素 并且可以修改元素樣式：
e.target.style.backGround='blue'2.4 獲取Element滾動距離
// 獲取body滾動距離 var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop2.5 根據索引號刪除相關數據
// 刪除數組中的某些元素； splice(i,n):splice;(i,n)，i表示從哪個位置刪除，n表示刪除幾個元素）
修改數據，attr可以獲取自定義的屬性 獲取固有屬性是prop
2.6 清空Ol里面的元素的內容
// 清空Ol里面的元素的內容 $('ol').empty()案例應用：toDoList （本地存儲案例）http://www.todolist.cn/
2.7 數組轉換為字符串
localStorage.setItem('todo',JSON.stringify(todolist)) var data=localStorage.getItem("todo"); console.log(data)獲取轉換后的字符串前，要先轉換回對象才能獲取：
data=JSON.parse(data) console.log(data) console.log(data[0].title)2.8 Query.js相關
下載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】移動端插件使用及輪播圖的實現
運用插件：fastclick
GitHub官網地址：https://github.com/ftlabs/fastclick
2.10 event 事件對像
-
寫到監聽函數里；
-
由系統創建；
-
是事件的一系列相關數據的集合；
-
可自己命名：event、evt、e （實際開發中常用e表示）
-
寫成 e 這樣有兼容性問題（IE 6 7 8）
解決兼容性的寫法：
e=e || window.event; console.log(e); // 針對現在的瀏覽器，已不大考慮兼容性問題
-
阻止節點默認行為
event.preventDefault ()
-
阻止事件冒泡
event.stopPropagation ()
2.11 “== ”和“===”比較符的區別
“ == ” ：比較值，不比較類型；
“ === ”：全等。值、類型全部要比較；
如果都是字符串比較，則“ == ” 和“ === ”的效果一樣，可無區別使用；
數據類型：參與比較兩者的數據類型 ，主要是數字字符串、布爾值。其他的復雜數據類型不能做比較。
2.12 innerText和innerHTML的區別
1、innerText：不識別HTML標簽，并且去除空格和換行；
2、innerHTML：識別HTML標簽 ；
3、 innerText和innerHTML都可以獲取元素內的內容，保留空格和換行。
2.13 替換- replace() 方法
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子字符串。
注：
replace只會替換第一個字符
語法：
stringObject.replace(regexp/substr,replacement)| regexp/substr | 必需。規定子字符串或要替換的模式的 RegExp 對象。注意，如果該值是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉換為 RegExp 對象。 |
| replacement | 必需。一個字符串值。規定了替換文本或生成替換文本的函數。 |
返回值
一個新的字符串，是用replacement替換了regexp的第一次匹配或所有匹配之后得到的。
2.14 根據位置返回字符
2.14.1 charAt
var str='andy' str.charAt(3) // y2.14.2 charCodeAt
charCodeAt(index) // 返回索引號的字符的ASCII值。目的：判斷用戶按下了哪個鍵
直接返回： str[index] 屬H5新增
2.15翻轉數組
arr.reverse；2.16 冒泡排序JavaScript sort()方法
sort() 方法用于對數組的元素進行排序。
語法：
返回值：對數組的引用。注意，數組在原數組上進行排序，不生成副本（直接覆蓋）。
arr.sort~ 需要配合排序函數進行冒泡排序：
function mySort (a.b) {return a - b //升序 return b - a //降序 }更多JavaScript sort()方法 >> 點擊這里
2.17 添加或刪除數組元素-JavaScript
2.17.1 push()方法 數組末尾添加數組元素
push()向數組末尾添加一個或多個數組元素（即追加元素），并返回新數組的長度。
提示：將新項添加到數組開頭，使用unshift()方法。
語法：
arrayObject.push(newelement1,newelement2,....,newelementX)| newelement1 | 必需。要添加到數組的第一個元素。 |
| newelement2 | 可選。要添加到數組的第二個元素。 |
| newelementX | 可選。可添加多個元素。 |
返回值： 把指定的值添加到數組后的新長度。
說明
push()方法可把它的參數順序添加到arrayObject的尾部。它直接修改arrayObject，而不是創建一個新的數組。push()方法和pop()方法使用數組提供的先進后出棧的功能。
push() 方法的更多內容，請點擊：https://www.w3school.com.cn/js/jsref_push.asp
2.17.2 unshift()方法 在開頭添加數組
unshift() 方法可向數組的開頭添加一個或更多元素，并返回新的長度。
語法：
arrayObject.unshift(newelement1,newelement2,....,newelementX)| newelement1 | 必需。向數組添加的第一個元素。 |
| newelement2 | 可選。向數組添加的第二個元素。 |
| newelementX | 可選。可添加多個元素。 |
返回值： arrayObject 的新長度。
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple"); console.log(unshift) // 輸出 Lemon,Pineapple,Banana,Orange,Apple,Mango更多unshift()方法的內容點擊：https://www.w3school.com.cn/jsref/jsref_unshift.asp
2.17.3 pop() 刪除最后一個數組元素
pop() 方法用于刪除并返回數組的最后一個元素。
語法：
arrayObject.pop() // 括號內不跟參數，一次只能刪除一個；返回值： arrayObject 的最后一個元素。
說明
pop() 方法將刪除 arrayObject 的最后一個元素，把數組長度減 1，并且返回它刪除的元素的值。如果數組已經為空，則 pop() 不改變數組，并返回 undefined 值。
2.17.4 shift()方法 刪除數組中第一個元素
shift() 方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值。
語法：
arrayObject.shift() // 刪除數組中的第一個元素，一次只能刪除一個返回值： 數組原來的第一個元素的值。
說明
如果數組是空的，那么 shift() 方法將不進行任何操作，返回 undefined 值。請注意，該方法不創建新數組，而是直接修改原有的 arrayObject。
提示和注釋
【注釋】：該方法會改變數組的長度。
【提示】：要刪除并返回數組的最后一個元素，請使用 pop() 方法。
2.18 檢測是否為數組instanceof
對于值類型，可以通過typeof判斷，string/number/boolean都很清楚，但是typeof在判斷到引用類型的時候，返回值只有object/function，你不知道它到底是一個object對象、還是數組、還是new Number等等。
這個時候就需要用到instanceof。
它表示的是一種繼承關系，或者原型鏈的結構。
2.19 Date 對象
Date 日期對象。是一個構造函數，必須使用New來調用；
2.19.1 日期格式。
無論輸入格式如何，JavaScript 默認將輸出全文本字符串格式
Mon Feb 19 2018 06:00:00 GMT+0800 (中國標準時間)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格式 不規定具體某天 var d = new Date("2020"); // YYYY格式 不規定具體的月和日 // 格式：YYYY-MM-DDTHH:MM:SS 大寫字母T用以分隔日期和時間 var d = new Date("2018-02-19T12:00:00");UTC（Universal Time Coordinated）等同于 GMT（格林威治時間）。
注：UTC，協調世界時，又稱世界統一時間，世界標準時間，國際協調時間。
2 ) JavaScript 短日期
短日期通常使用 "MM/DD/YYYY" 這樣的語法
警告：
- 在某些瀏覽器中，不帶前導零的月或其會產生錯誤（var d = new Date("2018-2-19");）；
- 有些瀏覽器會嘗試猜測格式。有些會返回 NaN（“YYYY / MM / DD”）；
- 有些瀏覽器會嘗試猜測格式。有些會返回 NaN(“DD-MM-YYYY”)。
3 ) JavaScript 長日期
長日期通常以 "MMM DD YYYY" 這樣的語法來寫：
- 月和天能夠以任意順序出現；
- 月能夠以全稱 (January) 或縮寫 (Jan) 來寫；
- 逗號會被忽略，且對大小寫不敏感；
4 ) JavaScript 完整日期
JavaScript 接受“完整 JavaScript 格式”的日期字符串：
JavaScript 會忽略日期名稱和時間括號中的錯誤：
var d = new Date("Fri Mar 26 2018 09:56:24 GMT+0100 (Tokyo Time)");2.19.2 創建Date對象的語法
// Date 對象會自動把當前日期和時間保存為其初始值。 var myDate=new Date()2.19.3 Date對象屬性
| constructor | 返回對創建此對象的 Date 函數的引用。 |
| prototype | 使您有能力向對象添加屬性和方法。 |
2.19.4 Date對象方法
| Date() | 返回當日的日期和時間。 |
| getDate() | 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 |
| getDay() | 從 Date 對象返回一周中的某一天 (0 ~ 6)。 |
| getMonth() | 從 Date 對象返回月份 (0 ~ 11)。 |
| getFullYear() | 從 Date 對象以四位數字返回年份。 |
| getYear() | 請使用 getFullYear() 方法代替。 |
| getHours() | 返回 Date 對象的小時 (0 ~ 23)。 |
| getMinutes() | 返回 Date 對象的分鐘 (0 ~ 59)。 |
| getSeconds() | 返回 Date 對象的秒數 (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 對象的毫秒(0 ~ 999)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒數。 |
| getTimezoneOffset() | 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。 |
| getUTCDate() | 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒數 |
| UTC() | 根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。 |
2.20 Math.floor()方法 向下取整
floor() 方法 執行的是向下取整計算。
語法：
Math.floor(x) // x 必需。任意數值或表達式。返回值： 返回小于或等于指定數字的最大整數的數字。
示例：
Math.floor(45.95); // 45 Math.floor(45.05); // 45 Math.floor(4); // 4 Math.floor(-45.05); // -46 Math.floor(-45.95); // -462.21 Math.ceil()方法 向上取整
Math.ceil() 函數返回大于或等于給定數字的最小整數。
示例：
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));// 輸出 -72.22 Math.random() 隨機函數
random() 返回一個0~1之間的偽隨機小數（浮點數）。在0（包括0）和1（不包括）之間。
返回值： 一個浮點型偽隨機數字
示例（生成隨機數）：
function getRandomInt(max) {return Math.floor(Math.random() * Math.floor(max)); } console.log(getRandomInt(3)); // 輸出 0, 1 or 2Math.random() 不能提供像密碼一樣安全的隨機數字。不要用來處理有關安全的事情。應使用Web Crypto API 來代替, 和更精確的window.crypto.getRandomValues() 方法。
random()更多內容點擊這里：Math.random() 函數 （MDN Web文檔）
2.23 退出循環continue、break區別
continue 跳出本次循環，繼續下一個循環；
break 退出整個循環。
2.24 switch 多分支語句
switch 語句評估一個表達式，將表達式的值與case子句匹配，并執行與該情況相關聯的語句。
語法：
代碼解釋：
- 計算一次 switch 表達式；
- 把表達式的值與每個 case 的值進行對比；
- 如果存在匹配，則執行關聯代碼 實例
執行原理： 利用表達式里的值，和case后面的選項值相匹配，如果匹配上，就執行該case里面的語句，如果都沒有匹配上，則執行default里面的語句
default 關鍵詞
當不存在 case 匹配時所運行的代碼。default相當于if 語句中的else，把 default 放到其它 case 之上它仍然有效。
break 關鍵詞
退出循環。如果 JavaScript 遇到break關鍵詞，會跳出switch代碼塊。如果找到匹配，并完成任務，則中斷執行（break），不會進行更多測試。
注：switch 一般應用于特定的表達式的匹配選擇中。
2.25 三元表達式
三元表達式語法結構：
條件表達式？表達式1:表達式2示例：
var num=10; var result = num > 5? '是的'：'不是'； console.log(result)三元表達式就是 if else 分支選擇語句的簡化版。
2.26 邏輯中斷
原理：當有多個表達式（或值）時，如果左邊的值可以確定結果，就不再繼續運算右邊的表達式的值。
2.26.1 邏輯與 && (and)
表達式1 && 表達式2
兩側表達式的結果都為 True，結果才為True；只要有一側為 False，結果就為 False。
123 && 456 // 返回 456 // 數字,除了0為假，全部為真 0 && 456 // 返回0圖示如下：
運算法則：
- 如果第一個表達式的值為True，則返回 表達式2
- 如果第一個表達式的值為False，則返回 表達式1
2.26.2 邏輯或 || (or)
表達式1 || 表達式2兩側表達式的結果都為 False，結果才為False；只要有一側為 True，結果就為 True。
123 || 456 // 返回 123 // 數字,除了0為假，全部為真 0 || 456 // 返回 456圖示如下：
運算法則：
- 如果第一個表達式的值為True，則返回表達式1
- 如果第一個表達式的值為False，則返回表達式2
2.26.3 邏輯非 ! (Not：取反)
示例：
Console.log(!true)2.27 變量的自增、自減
“++”是遞增，“- -”是遞減
1 ）變量自加1
- num=num+1；
- ++num
上面這兩種寫法效果一樣。
2 ) 前置自增、自減
- ++num：前置自增 ；
- –num：前置自減
3 ) 后置自增
與前置自增的區別在于，先返回原值，計算完成后，再自加1（如i++）。
2.28 %取余（取模）
1 ) 取余
3 % 5 = 32 ) 浮點數
算術運算里會有精度問題；
3 ) 判斷相等
不能直接用浮點數字判斷是否相等。
問題：
2.29 Boolean（邏輯）對象
Boolean（邏輯）對象用于將非邏輯值轉換為邏輯值（true 或者 false）；
可以將 Boolean 對象理解為一個產生邏輯值的對象包裝器。
2.29.1 創建 Boolean 對象
使用關鍵詞 new 來定義 Boolean 對象。
示例：定義一個名為 myBoolean 的邏輯對象：
返回值：
- 當作為一個構造函數（帶有運算符 new）調用時，Boolean() 將把它的參數轉換成一個布爾值，并且返回一個包含該值的 Boolean 對象；
- 如果作為一個函數（不帶有運算符 new）調用時，Boolean() 只將把它的參數轉換成一個原始的布爾值，并且返回這個值。
注釋：如果邏輯對象無初始值或者其值為 0、-0、null、""、false、undefined 或者 NaN，那么對象的值為 false。否則，其值為 true（即使當自變量為字符串 “false” 時）！
2.29.2 布爾值轉換
Boolean(myBoolean)2.29.3 Boolean對象方法
toSource() // 返回該對象的源代碼。 toString() // 把邏輯值轉換為字符串，并返回結果。 valueOf() // 返回 Boolean 對象的原始值。補充：
true：參與運算時，當1； false：參與運算時，當0。
2.30 獲取變量數據類型
獲取變量數據類型 Typeof
console.log(Typeof age)prompt 獲取的數字是字符串型的
1、如果一個變量聲明未賦值，就是undefined 未定義數據類型；
2、undefined和數字相加，結果是NaN（不是一個數值）；
3、一個聲明變量給null值，里面存的值為空，null+1=1
3. Vue
Vue 的 核心 是 數據 與 視圖 的 雙向綁定。當數據變化時，渲染的視圖就會立即更新。
3.1 事件修飾符
3.1.1 prevent 禁止 a 標簽的默認行為
- 用法 <a @click.prevent></a><!-- 或者 --><a v-on:click.prevent></a>
3.2 組件 - props 屬性值類型
- 字符串 String；
- 數值 Number；
- 布爾值 Boolean；
- 數組 Array；
- 對象 Object。
???????這些類型都是以組件屬性的方式進行傳遞，但是，對于布爾和數值類型的，如果通過v-bind綁定，在子組件中就能得到對應類型的數據。反之，如果不用v-bind做綁定，子組件中得到的數據，就都是字符串型的內容。
3.2.1 傳值 - 子組件向父組件傳值
props 傳遞數據原則：單向數據流（也就是只允許父組件向子組件傳遞數據，而不允許子組件直接操作props中的數據）。
但是，子組件 可以 通過自定義事件向父組件傳遞信息 。
子組件模板中綁定 click事件，當事件觸發時，要顯式的調用$emit方法（觸發父組件的自定義事件）。同時，在父組件模板中v-on（簡寫為@）監聽 ，
<button @click='$emit('enlarge-text')'>增大父組件中的字體大小</button> <menu-item :parr="parr" @enlarge-text="handle"></menu-item>在父組件中定義方法：
var vm = new Vue({el: '#app',data: {pmsg: '父組件中內容',parr: ['apple', 'orange', 'banana'],fontSize:10,},methods:{handle:function(){// 擴大字體大小this.fontSize +=5，}} })然后，再在父組件模板中進行綁定：
<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: '父組件中內容',parr: ['apple', 'orange', 'banana'],fontSize: 10,},methods: {handle: function() {// 擴大字體大小this.fontSize += 2}}})</script> </body></html>3.3 內置指令
3.3.1 v-if 及元素復用
-
示例一
<div id="app"><p v-if="status ===1"> status 為1 時顯示該行</p><p v-else-if="status === 2">當status 為2 時顯示該行</p><p v-else>否則顯示該行</p> </div>v-else-if 要緊跟v-if, v-else 要緊跟 v-else-if 或v-if，表達式的值為真時，當前元素 / 組件及所有子節點將被渲染，為假時被移除。如果一次判斷的是多個元素，可以在Vue.js內置的＜template>元素上使用條件指令，最終渲染的結果不會包含該元素，例如：
<div id="app"><template v-if="status ===1"><p>這是文本1</p><p>這是文本2</p><p>這是文本3</p></template> </div>
-
示例二：元素復用
<template v-if="type ==='name'"><label>用戶名：</label><input placeholder="輸入用戶名" key="name-input"> </template> <template v-else><label>郵 箱：</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 在渲染元素時，出于效率考慮，會盡可能地復用已有的元素而非重新渲染，比如：
如果不添加Vue.js提供的key屬性，那么input就會被復用：即，鍵入內容后，點擊切換按鈕，雖然DOM變了，但是之前在輸入框鍵入的內容并沒有改變，只是替換了placeholder 的內容，說明＜input>元素被復用了。
3.3.2 V-for
-
遍歷 數組：表達式支持 1 個可選參數作為當前項的 索引。
<li v-for="(item,index) in list"> -
遍歷對象：有 2 個可選參數，分別是 鍵名（key） 和 索引（index）：
<li v-for="( value,key,index ）in list">
v-for 也可以用在內置標簽＜template＞上， 將多個元素進行渲染。
3.4 修飾符
3.4.1 常用事件修飾符
| .stop | 所有 | 任意 | 當事件觸發時，阻止事件冒泡 |
| .prevent | 所有 | 任意 | 當事件觸發時，阻止元素默認行為 |
| .capture | 所有 | 任意 | 當事件觸發時，阻止事件捕獲 |
| .self | 所有 | 任意 | 限制事件僅作用于節點自身 |
| .once | 2.1.4 以上 | 任意 | 事件被觸發一次后，即解除監聽 |
| .passive | 2.3.0 以上 | 滾動 | 移動端，限制事件永不調用preventDefault()方法 |
3.4.2 常用按鍵修飾符
| .delete | .8/.46 | 回格 / 刪除 |
| .tab | .9 | 制表 |
| .enter | .13 | 回車 |
| .esc | .27 | 退出 |
| .space | .32 | 空格 |
| .left | .37 | 左 |
| .up | .38 | 上 |
| .right | .39 | 右 |
| .down | .40 | 下 |
使用按鍵別名，無須記住按鍵的鍵值即可實現對特定按鍵的監聽事件。如，監聽
回車鍵：
-
示例1
<input type="text" @keyup.13="console .log($event)" >可寫成：
<input type="text" @keyup.enter="console .log($event)" >
-
示例2
<input @keyup.13="submit">
只有在keyCode 是13 時，才調用vm.submit
3.4.3 組合修飾符
為實現多鍵操作，Vue 提供了組合修飾符的機制，不過其必須配合系統按鍵修飾符方可生效，系統修飾符 如下表所示。
| .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>
-
修飾符可以串聯
<a @click.stop.prevent="handle" ></a>
- 只有修飾符<form @submit.prevent></form>
- 添加事件偵聽器時使用事件捕獲模式<div @click.capture=”handle ”> ... </div>
-
只當事件在該元素本身（而不是子元素） 觸發時觸發回調
<div @click.self="handle"> ... </div>
-
只觸發一次，組件同樣適用
<div @click.once="handle"> ... </div>
千位分隔符的轉換
return val.toString().replace(/\B(?=(\d{3})+$)/g,',');3.5 Vue選項
3.5.1 watch(偵聽屬性) 和 computed(計算屬性)的區別
- watch：更注重于處理數據變化時的 業務邏輯；
- computed：更注重于 衍生數據；
- 與 computed 相比，watch 還優于可以 異步修改數據。
3.5.2 watch 選項的聲明方式
示例如下：
watch: {msg: {handler : 'logMsg' , //方法名deep: true, //深度觀察:對象任何層級數據發生變化， watch方法都會被觸發immediate: true //立即調用:在偵昕開始時立即調用一次watch方法},'msg.sender': ['logLine', 'logMsg'] //數組方式，可調用多個方法 }3.6 DOM 渲染
el 選項，其屬性值僅限于css 選擇器、DOM 節點對象。
另，Vue 允許開發者使用$mount方法來掛載實例，示例如下：
let vm = new Vue({// el : '#app', //這里未使用el ，而是用其等效用法data () {return{msg: 'Hello World '}} })let handleMount = function () {vm.$mount ('#app') }3.6.1 渲染函數render
render 函數同樣也可用于渲染視圖，它提供了回調方法createElement以供我們創建 DOM 節點。
案例源碼：https://pan.baidu.com/s/1zNDSf_mkTfaZq0nGUGsUUg
提取碼: 8vxa
render 函數的回調方法createElement允許開發者在合適的位置為 DOM 節點綁定 監聽事件。
-
為按鈕綁定點擊事件的用法：
on:{click () => {} }其他事件的綁定方法大致如此。
-
在render函數中，為事件綁定修飾符
對于一些不易編寫的事件修飾符， Vue 提供了簡寫前綴：
修飾符前 綴說明 .passive & 移動端，限制事件永不調用preventDefault()方法； .capture ! 當事件觸發時，阻止事件捕獲； .once ~ 事件被觸發一次后即解除監聽； .capture.once/.once.capture ~! 事件被觸發一次后即解除監聽并阻止事件捕獲。 用法示例:
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 中查詢和更新節點是一件比較低效的工作，為此，Vue 提供了 render 函數 和 虛擬DOM 。虛擬DOM 將對真實DOM 發生的變化進行追蹤，以降低DOM 查詢用時。
—— 與document.createElement 不同， render 中的createElement 創建的并不是真實的DOM 節點，而是虛擬節點。
總結
- 上一篇： Vue-touch的使用
- 下一篇： JS前端常用工具方法