css 样式存放目录(待定,选用less或scss)这里我不会把style抽到外头,但是可以写一些全局样式放在这里,里面注意放入common.less normalize.less,里面直接写.el-button那么所有的el-button就会被影响,这里要提一下style的书写,el的样式用class包一下再再style里面写,而普通的就用style scoped来写,注意要用class来包一下,不包也行,因为已经scoped了,变成局部的了。
这个style就放在src下面,也可以放在asset下面
├── style
│ ├── base // 基础样式存放目录
│ │ ├── _base.scss // 基础样式文件
│ │ ├── _color.scss // 项目颜色配置变量文件
│ │ ├── _mixin.scss // scss 混入文件
│ │ └── _reset.scss // 浏览器初始化文件
│ ├── scss // 页面样式文件夹
│ │ ├── _content.scss // 内容页面样式文件
│ │ └── _index.scss // 列表样式文件
└── style.scss // 主样式文件
备注:
1.绑定html css\
1.1对象语法:\
传给 v-bind:class 一个对象,以动态地切换 class\
<div v-bind:class="{ active: isActive }"></div>\
上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值\
1.2我们也可以在对象中传入更多属性用来动态切换多个 class,此外, v-bind:class 指令可以与普通的 class 属性共存\
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>\
data: {\
isActive: true,\
hasError: false\
}\
1.3你也可以直接绑定数据里的一个对象\
<div v-bind:class="classObject"></div>\
data: {\
classObject: {\
active: true,\
'text-danger': false\
}\
}\
<div v-bind:class="classObject"></div>\
data: {\
isActive: true,\
error: null\
},\
computed: {\
classObject: function () {\
return {\
active: this.isActive && !this.error,\
'text-danger': this.error && this.error.type === 'fatal',\
}\
}\
}
2.数组语法\
2.1我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表:\
<div v-bind:class="[activeClass, errorClass]">\
data: {\
activeClass: 'active',\
errorClass: 'text-danger'\
}\
渲染为:<div class="active text-danger"></div>\
2.2如果你也想根据条件切换列表中的 class ,可以用三元表达式:\
<div v-bind:class="[isActive ? activeClass : '', errorClass]">\
<div v-bind:class="[{ active: isActive }, errorClass]">
3.用在组件上\
3.1.当你在一个定制的组件上用到 class 属性的时候,这些类将被添加到根元素上面,这个元素上已经存在的类不会被覆盖。\
Vue.component('my-component', {\
template: '<p class="foo bar">Hi</p>'\
})\
然后在使用它的时候添加一些 class:\
<my-component class="baz boo"></my-component>\
HTML 最终将被渲染成为:\
<p class="foo bar baz boo">Hi</p>\
3.2同样的适用于绑定 HTML class :\
<my-component v-bind:class="{ active: isActive }"></my-component>\
当 isActive 为 true 的时候,HTML 将被渲染成为:\
<p class="foo bar active">Hi</p>
4.绑定内联样式:\
4.1对象语法:v-bind:style 的对象语法十分直观——看着非常像 CSS ,其实它是一个 JavaScript 对象\
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>\
data: {\
activeColor: 'red',\
fontSize: 30\
}\
直接绑定到一个样式对象通常更好,让模板更清晰:\
div v-bind:style="styleObject"></div>\
data: {\
styleObject: {\
color: 'red',\
fontSize: '13px'\
}\
}
5.数组语法:\
5.1.v-bind:style 的数组语法可以将多个样式对象应用到一个元素上:\
<div v-bind:style="[baseStyles, overridingStyles]">