初识Vue-事件 & 样式

目录

事件

事件修饰符 

自定义事件

双向绑定

样式style

class

 style

Scoped(防止样式污染)

---

事件

<button @click="add($event, 2)">add</button>
add(event, num) {
    event.stopPropagation()// 防止冒泡
    this.count += num; 
    // this在方法里指向当前Vue实例
}

事件修饰符 

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis" />

<!-- 提交事件不再重载页面 -->
<form submit.prevent="onSubmit" />

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat" />

<!-- 只有修饰符，没有响应事件 -->
<form submit.prevent />

<!-- 添加事件监听器时使用事件捕捉模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为（即滚动行为）将会立即触发 -->
<!-- 而不会等待'onScroll'完成 -->
<!-- 这其中包含'event.preventDefault()'的情况 -->
<div @scrool.passive="onScroll">...</div>

<!-- 只有在'key'是'Enter'时调用'vm.submit()' -->
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />
<input @keyup.13="submit" />

<!-- Alt + C -->
<input @keyup.alt.67="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething" />

<!-- 即使Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有Ctrl被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

为了保证methods方法只有纯粹的数据逻辑（和DOM解耦，易于单元测试），不去处理DOM相关的操作。

自定义事件

子组件给父组件传递信息的事件

this.$emit('upData', 'hi')

双向绑定

子组件通过$emit()通知父组件修改data，data修改之后通过prop传给子组件

单项数据流

如上简写必需时@updata:子组件父组件变量名，可以写成：msg.sync="msg"

样式style

class

 style

:class="{'class1': true, 'class2': false}"
:style="{
    'width': `${width}px`,
    'height': `${height}px`,
    'backgroundColor': bgColor
}"

Scoped(防止样式污染)

BEM

<style scoped>
.text {
    color:red;
}
</style>