v-bind 在标签上绑定属性

• v-bind:class
  • :class
• v-bind:style
  • :style

Vue 对 v-bind:class / style 进行了特殊的封装
形式比较多

• 对象和数组的绑定方式

  class

  对象方式 ```vue

// 不太建议，虽然视图可以写逻辑，但尽可能避免在视图中使用逻辑运算，逻辑部分应交给 computed 和 methods

父组件调用子组件的 class props 传到子组件并与其内的根元素的 class 结合，Vue2 所有组件都只有一个根元素<br />由于 Vue3 支持多个根元素，需要手动来传。 $attrs 父组件通过调用组件时的传递的属性的集合 $attributes
```vue
<div
     :class="[
               'my-alert',
               hasError ? errorClass : '',
               $attrs.class
             ]"
     >
</div>

const MyAlert = {
  data() {
      return {
        title: 'This is my first ALERT',
      content: 'This is my content for my first ALERT.'，
      isShow： true,
      hasError: true,
      //alertClassObject: {
        //    show: true,
      //    'bg-danger': true
        //},
      showClass: 'show',
      errorClass: 'danger'
    }
  },
  computed: {
      alertClassObject() {
        return {
          show: this.isShow,
        danger: this.isShow && this.hasError
      }
    }
  },
    template: `
        <!--<div class="my-alert danger show">-->
        <!--<div
            class="my-alert"
            :class="{
                // 加某个样式类名的真假条件
                show: 'isShow',
                danger: 'hasError'
            }"
        >-->
        <!--<div
            class="my-alert"
            :class="alertClassObject"
        >-->
        <!--<div
            :class="['my-alert', showClass, errorClass]"
        >-->
        <div
            :class="[
                'my-alert',
                isShow ? showClass : '',
                isShow && hasEvent ? errorClass : ''
            ]"
        >
            <header class="header">
                <h1>{{ title }}</h1>
            </header>
            <div class="content">
                <p>{{ conntent }}</p>
            </div>
            <div class="btn-group">
                <button>Confirm</button>
            </div>
        </div>
    `
};
const App = {
    components: {
      MyAlert
  },
  data() {
      return {
        showClass: 'show'
    }
  },
  template:`
        <my-alert :class="showClass"/>
    `
};
Vue.createApp(App).mount('#app');

各种变量命名法

camelCase 小驼峰命名法

• thisIsMyVariable
• 变量名、方法名

kebab-case 短横线命名法

• this-is-my-variable
• 脊柱命名法 spinal-case train-case
• 对象的属性名、CSS常规的类名 -> BEM规范

snake_case 蛇形命名法

• this_is_my_variable
• 大写的常量 const ERROR_TYPE = {}, pythone 推荐

匈牙利命名法 变量 => 属性 + 类型 -> 描述
lpszTest -> lpsz 以空字符为结尾的字符串长度整形指针 Test
PascalCase 大驼峰命名法

• ThisIsMyVariable
• 类名、组件名、大模块名

  style

  v-bind:style / :style 传入 JS 对象或数组，属性名可以用 camelCase 或 kebab-case

  data(){
    return {
      btnBgColor: 'red',
    btnStyle: {
        color: '#fff',
      backgroundColor: 'red'
    },
    commonBtnStyle: {
        borderRadius: '17px'
    }
  }
  }

  <button
        :style="{
                    color: '#fff',
                    //backgroundColor: 'red'
                    // 赋值变量
                    'background-color': btnBgColor
                }"
        >
  Confirm
  </button>

  <button :style="btnStyle" >
  Confirm
  </button>

  <button :style="[btnStyle, commonBtnStyle]" >
  Confirm
  </button>

  ```vue // 渲染数组中最后一个被浏览器支持的值，如果浏览器本身支持不带前缀的值，那就渲染不带前缀的值 Confirm

// 在 Chrome 运行时，-webkit- 会被去掉 // :style 使用中， Vue 会在运行时自动检测添加相应的前缀

Confirm ```