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

一 共公样式

1. 在main.js中引入

?

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

2. 在index.html引入

?

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

二 事件修饰符

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

?

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

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

?

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

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

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

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

 事件不会继续传播

?

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

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

?

1	@click.capture=""

 

三 样式的添加

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

?

1 2 3 4 5

:class="color"  color可以是类的样式，用于绑定属性   :class="{'类名'：'变量名'}"   :style="{fontFamily:arr.xx}"    arr:{xx:"",}

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

?

1 2 3 4 5 6 7 8 9 10 11

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