前端知识点随记
(前端筆記補充,備忘錄使用。)
- 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前端常用工具方法