VUE中style应该怎么写 css怎么写 样式书写规范 建议用less,东西少,sass有点多,不利于团队

238 阅读2分钟

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]">