前端知识点随记

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标签

如需实现在谷歌浏览器能自动播放视频，需添加静音属性muted,修改为如下样式即可：

1.6 标签- 提示文字

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: none

2. 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.scrollTop

2.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)    // y 

2.14.2 charCodeAt

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

目的：判断用户按下了哪个键

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

2.15翻转数组

arr.reverse；

2.16 冒泡排序JavaScript sort()方法

sort() 方法用于对数组的元素进行排序。
语法：

arrayObject.sort(sortby)  // sortby可选参数：规定排序顺序，必须是函数。

返回值：对数组的引用。注意，数组在原数组上进行排序，不生成副本（直接覆盖）。

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。

1. instanceof 运算符 检测是否为数组；
   它表示的是一种继承关系，或者原型链的结构。
2. Array.isArray(参数) H5新增方法，IE9以上才支持。

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("05/19/2020");

警告：

• 在某些浏览器中，不带前导零的月或其会产生错误（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");

• 月和天能够以任意顺序出现；
• 月能够以全称 (January) 或缩写 (Jan) 来写；
• 逗号会被忽略，且对大小写不敏感；

var d = new Date("22 Feb 2019");        // 月和天能够以任意顺序出现；
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 创建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); // -46

2.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));// 输出 -7

2.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 2

Math.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 n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

代码解释：

• 计算一次 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：前置自减

var num=10 
++num      // 结果为11

3 ) 后置自增
与前置自增的区别在于，先返回原值，计算完成后，再自加1（如i++）。

2.28 %取余（取模）

1 ) 取余

3 % 5 = 3 

2 ) 浮点数
算术运算里会有精度问题；

3 ) 判断相等
不能直接用浮点数字判断是否相等。

问题：

1. 怎么判断一个数能够被整除： 如果余数是0，则说明这个数能被整除（取余的主要用途）；
2. 1+2*3等于几？ 算术运算符的优先级，同样遵循先乘除、后加减。

2.29 Boolean（逻辑）对象

Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）；
可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。

2.29.1 创建 Boolean 对象

使用关键词 new 来定义 Boolean 对象。
示例：定义一个名为 myBoolean 的逻辑对象：

var myBoolean=new Boolean(value)

返回值：

• 当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象；
• 如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值。

注释：如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 “false” 时）！

2.29.2 布尔值转换

Boolean(myBoolean)

1. 数字转换成布尔值，除了0与NaN，其余都是true；
2. 字符串转换成布尔值，除了空字符串""，其余都是true；
3. null与undefined会转换成false；
4. 对象会转换成true。

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>

完整代码：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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: `
                

                    

                        
{{item}}
                    
                    点击
                    增大父组件中的字体大小
                
 
            `
        })

        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>这是文本1p>
  		<p>这是文本2p>
  		<p>这是文本3p>
  	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
  只有在keyCode 是13 时，才调用vm.submit

  <input @keyup.13="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 下是窗口键

• 示例：组合使用

  
  <input @keyup.shift.83="handleSave">
  

  
  <div @click.ctrl="doSomething"> Do somethingdiv>
  

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 节点，而是虚拟节点。