vue-第三天

Dom：文档对象模型，web 上构成文档结构和内容的对象的数据表示。

它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。

事件种类：

用户界面事件、焦点事件、鼠标事件、滚轮事件、输入事件、键盘事件、输入法事件。

1.内联方式响应事件：（v-on绑定事件，=后直接用js语句处理）

 <div id="app">  

    <button v-on:click="length++">改变边长</button>

    <p>正方形的边长是{{length}}，面积是{{area}}。</p>

  </div>

2.事件处理方法

<div id="app">  

<button v-on:click="changeLength">改变边长</button>

<p>正方形的边长是{{length}}，面积是{{area}}。</p>

</div>

......

methods: {

changeLength(){

    this.length++;

}}

V-on可简写为@

3.使用事件对象

methods: {

changeLength(event){

    this.length += Number(event.target.value);

}}

event则为事件对象，通过event.target获得触发事件的dom元素

方法调用使用事件对象：

<button v-on:click="changeLength($event)" value="1">边长+1</button>

<button v-on:click="changeLength($event)" value="10">边长+10</button>

4.事件修饰符：以声明而非命令方式实现一些功能（阻止事件的默认行为或阻止事件的传播等）

①.stop例：v-on:click.stop="click"阻止单击事件继续传播

<div id="outer" v-on:click="show('外层div被点击');">

    <div id="inner" v-on:click.stop="show('内层div被点击');"></div>

事件修饰符.stop自动调用stopProgation（）方法，阻止事件的传播。

当加入.stop修饰符后，单击内层div时，只会弹出内层被点击，不会触发外层div单击事件。

②.self例：v-on:click.self="click"只有事件目标是当前元素自身时，才会触发处理函数

<div id="outer" v-on:click.self="show('外层div被点击');">

    <div id="inner" v-on:click="show('内层div被点击');"></div>

</div>

③.capture例：v-on:click.capture="click"改变事件流的处理方式，由默认的冒泡方式改为捕获方式。

冒泡方式：事件源本身没有处理能力，要寻找能够处理的函数，以点击按钮为例，事件由按钮向上传播（就像一杯水向上冒泡）

<div id="outer" v-on:click.capture="show('外层div被点击');">

    <div id="inner" v-on:click="show('内层div被点击');"></div>

</div>

④.once 每次刷新后，只触发一次事件

<div id="outer" v-on:click.once="show('外层div被点击');">

⑤．prevent，自动调用event.preventDefault()方法，取消事件触发的默认行为

<a href="http://www.artech.cn" v-on:click.prevent="show('链接被点击')" >

如此时，单击链接则只会弹出提示框，而不会跳转到链接

作用：

①独立使用事件修饰符

<form v-on:submit.prevent></form>

②串联使用事件修饰符

<a v-on:click.stop.prevent=””>既能取消默认行为，又能阻止事件的传播

（有些会因为顺序不同产生不同的效果）

5.按键修饰符

1.与案件相关的三个事件：keydown、keypress、keyup

2.按键修饰符绑定按键名称（多单词按键命名：全部单词小写，“-”连接）

<input  v-on:keyup.enter=”submit”>

系统修饰键：组合使用 如v-on:keyup.ctrl.c（只要包含就会绑定）

但v-on:keyup.ctrl.exact.c（只有按ctrl和c才会绑定）

Exact是一个事件修饰符

6.鼠标按键修饰符.left .right .middle