2019年六月工作记录

js

round() 方法

round() 方法可把一个数字舍入为最接近的整数。

Math.round(x)

注意事项

• 对于 0.5，该方法将进行上舍入。
• 例如，3.5 将舍入为 4，而 -3.5 将舍入为 -3。

Math.random()

Math.random() 函数返回一个浮点,系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值

Math.random()

一个浮点型伪随机数字，在0（包括0）和1（不包括）之间。

prototype

prototype 属性使您有能力向对象添加属性和方法。

object.prototype.name=value

preventDefault() 方法

preventDefault() 取消事件的默认动作。

event.preventDefault()

该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

cancelable 事件属性

cancelable 事件属性

event.cancelable

cancelable 事件返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。

clientY

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。

客户区指的是当前窗口。

event.clientY

注意，该坐标不考虑文档的滚动。如果事件发生在窗口的顶部，无论文档滚了多远，clientY 的值都是 0。但是，2 级 DOM 没有提供把窗口坐标转换为文档坐标的标准方法。在 IE 以外的浏览器，使用 window.pageXOffset 和 window.pageYOffset 即可。

clientX

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。

event.clientX

2 级 DOM 没有提供把窗口坐标转换为文档坐标的标准方法。在 IE 以外的浏览器，使用 window.pageXOffset 和 window.pageYOffset 即可。

vue

内联处理器中的方法

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

		
		<button v-on:click="warn('Form cannot be submitted yet.', $event)">
		  Submit
		</button>
		// ...
		methods: {
		  warn: function (message, event) {
		    // 现在我们可以访问原生事件对象
		    if (event) event.preventDefault()
		    alert(message)
		  }
		}

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

• event.preventDefault(): 阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

• event.stopPropagation():这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

• return false ；这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
  
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    
    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>
    
    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>
    
  
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
  

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

	<!-- 在“change”时而非“input”时更新 -->
	<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

	<input v-model.number="age" type="number">
	这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

	<input v-model.trim="msg">