Vue 入门实例

一、模块
1.创建Vue模版文件header.vue，定义模块

// header.vue

2.父文件中引入、注册、使用

// app.vue

三、父组件向子组件传值

// 父组件

// 子组件 ComponentA



/* Hello component */

四、子组件向父组件传值

// 子组件

// 父组件



/* Hello component */

五、todolist 知识点总结

// 循环、样式、事件

  {{ item.label }}


// 数据绑定 、回车键触发事件
 

六、css动画

      transition all 0.5s
      backdrop-filter blur(10px)
      &.fade-transition
        opacity 1
        background rgba(7, 17, 27, 0.8)
      &.fade-enter,&.fade-leave
        opacity 0
        background rgba(7, 17, 27, 0)

七、条件样式

// template
如果数量大于0就渲染这个样式

// style
  .logo
    position: absolute
    ...
    &.highlight
      color #fff  

八、计算属性

// payDesc 作为一个变量在页面中通过 {{payDesc}} 渲染，用于不同状态下，显示不同的内容
computed: {
    payDesc() {
        if (this.totalPrice === 0) {
            return `¥${this.minPrice}元起送`
        } else if (this.totalPrice < this.minPrice) {
            return `还差¥${this.minPrice - this.totalPrice}元起送`
        } else {
            return '去结算'
        }
    }
}