写共公样式 | 事件修饰符 class与style样式

一 共公样式

1. 在main.js中引入

import '../css/global.css' /*引入公共样式*/

2. 在index.html引入

 <link rel="stylesheet" href="./css/global.css"> /*引入公共样式*/

二 事件修饰符

组件的事件在父元素页面不生效，采用native

<comp-self  @click.native=""></comp-self>　

对象一次性设置多个属性,采用sync。父子元素同步数据。

<comp-self v-bind.async="{a:1,b:2}"></comp-self>　　

自动过滤前后端的空白，v-mode.trim=""

只能是数字，v-mode.number=""

改变时才进行，v-mode.lazy=""  

 事件不会继续传播

@click.stop.prevent="" //只用一个也可，也可以串联使用

捕获：从最外层开始-到里层

@click.capture=""

 

三 样式的添加

参考：https://v2.cn.vuejs.org/v2/guide/class-and-style.html

:class="color"  color可以是类的样式，用于绑定属性

:class="{'类名'：'变量名'}"

:style="{fontFamily:arr.xx}"    arr:{xx:"",}

　class可以是对象，可以是数组

:class="{ active: isActive, 'text-danger': hasError }"
:class="classObject"
v-bind:class="[activeClass, errorClass]"
v-bind:class="[isActive ? activeClass : '', errorClass]"

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
<div class="active text-danger"></div>