Vue 入门实例

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

// header.vue
<template>
  <div class="header">
      I am header
  </div>
</template>
<script type="text/ecmascript-6">
  export {}
</script>

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

// app.vue
<template>
  <div id="app">
    <v-header></v-header>                                  // 使用
  </div>
</template>

<script type="text/ecmascript-6">
  import header from './components/header/header.vue'      // 引入

  export default {
    components: {
      'v-header': header                                   // 注册
    }
  }
</script>

三、父组件向子组件传值

// 父组件
<template>
  <component-a  msgfromfather="Hello component"> </component-a>
</template>

<script>
import ComponentA from './components/componentA.vue'
export default {
  data () {
  },
  components: { ComponentA },
}
</script>

// 子组件 ComponentA
<template>
  <h1> {{ msgfromfather }} </1h>
</template>

<script>
export default{
  data () {
  },
  props: ['msgfromfather']  
}
</script>
/* Hello component */

四、子组件向父组件传值

// 子组件
<template>
  <button v-on:click="btnClick">Click me!</button>
</template>

<script>
export default{
  data () {
    return {
      msg: 'hello from component A!'
    }
  },
  methods: {
    btnClick: function () {
      this.$emit('child-event', this.msg)
    }
  }
}
</script>

// 父组件
<template>
  <component-a v-on:child-event="listenToBoy"></component-a>
  <p>child tells me :  {{ childWords }} </p>
</template>

<script>
import ComponentA from './components/componentA.vue'
export default{
  data () {
    return {
      childWords: ''
    }
  },
  components: { ComponentA },
  methods: {
    listenToMyBoy: function (msg) {
      this.childWords = msg
    }    
  }
}
</script>
/* Hello component */

五、todolist 知识点总结

// 循环、样式、事件
<li v-for="item in items" v-bind:class="{finished: bool}"  v-on:click="functionName(item)" >
  {{ item.label }}
</li>

// 数据绑定 、回车键触发事件
<input v-model="newItem"  v-on:keyup.enter="addNew"> 

六、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
<div class="logo" :class="{'highlight': totalCount > 0}">如果数量大于0就渲染这个样式</div>

// 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 '去结算'
        }
    }
}