学习Vue框架中必掌握的重点知识

组件基础

Vue的组件是Vue应用的基本模块。组件是可复用的，Vue应用将一个页面划分为多个组件并组成组件树。组件是拥有自己的状态和生命周期的可复用模块。了解组件的定义、注册、渲染以及组件之间的通信是掌握Vue的关键。

组件的定义和注册

组件的定义是通过Vue.extend()和Vue.component()方法来实现的。Vue.extend()方法可以创建一个组件的构造函数，可定义组件的属性、方法和生命周期函数。Vue.component()方法是将组件定义为全局组件，它接收两个参数：组件名称和组件构造函数。

//创建一个组件构造函数
let MyComponent = Vue.extend({
  props:{
    msg: String
  },
  template: '<div> {{ msg }} </div>',
  created () {
    console.log('组件MyComponent已创建')
  }
})

//注册全局组件
Vue.component('my-component', MyComponent)

组件的渲染

组件的渲染是通过Vue的template和render方法来实现的。template是一个字符串模板，可以包含组件的html、css和js代码，用于显示组件的UI。render方法是一个函数，它会返回一个VNode（虚拟节点）对象，用于渲染组件的UI。

//使用template渲染组件
let MyComponent = Vue.extend({
  props:{
    msg: String
  },
  template: '<div> {{ msg }} </div>',
  created () {
    console.log('组件MyComponent已创建')
  }
})

//使用render方法渲染组件
let MyComponent = Vue.extend({
  props:{
    msg: String
  },
  render: function (h) {
    return h('div', this.msg)
  },
  created () {
    console.log('组件MyComponent已创建')
  }
})

组件之间的通信

组件之间的通信是通过props和events来实现的。props允许父组件向子组件传递数据，events允许子组件向父组件传递数据。

//父组件向子组件传递数据
Vue.component('child', {
  props: ['msg'],
  template: '<div> {{ msg }} </div>'
})

Vue.component('parent', {
  template: '<div><child :msg="parentMsg"></child></div>',
  data () {
    return {
      parentMsg: 'Hello'
    }
  }
})

//子组件向父组件传递数据
Vue.component('child', {
  template: '<div><button @click="onClick">click</button></div>',
  methods: {
    onClick () {
      this.$emit('my-event', '传递数据')
    }
  }
})

Vue.component('parent', {
  template: '<div><child @my-event="onMyEvent"></child></div>',
  methods: {
    onMyEvent (data) {
      console.log(data) //输出：传递数据
    }
  }
})

数据绑定和计算属性

数据绑定是Vue的核心特性之一，通过数据绑定可以实现数据的动态更新。Vue支持多种数据绑定方式，例如文本绑定、HTML绑定、属性绑定、类绑定、样式绑定等。计算属性是Vue提供的一个属性，它可以实现对数据的复杂计算和处理。

文本绑定和HTML绑定

Vue提供了v-text、v-html指令用于实现文本绑定和HTML绑定。v-text指令可以将元素的textContent设置为指定的值，v-html指令可以将元素的innerHTML设置为指定的值。

<div id="app">
  <p v-text="msg"></p>
  <p v-html="htmlMsg"></p>
</div>

<script>
  let vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello',
      htmlMsg: '<strong>Hello</strong>'
    }
  })
</script>

属性绑定、类绑定和样式绑定

Vue提供了v-bind指令用于实现属性绑定、类绑定和样式绑定。v-bind指令可以将元素的属性设置为指定的值，可以设置类和样式，可以设置复杂表达式。

<div id="app">
  <p v-bind:title="title">hover me!</p>
  <div v-bind:class="{ active: isActive, 'text-red': isRed }"></div>
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</div>

<script>
  let vm = new Vue({
    el: '#app',
    data: {
      title: 'title',
      isActive: true,
      isRed: false,
      activeColor: 'red',
      fontSize: 14
    }
  })
</script>

计算属性

Vue提供了computed属性用于实现计算属性。计算属性是一个函数属性，它的返回值会被缓存，只有依赖的数据发生改变时才会重新计算。

<div id="app">
  <p>{{ fullName }}</p>
</div>

<script>
  let vm = new Vue({
    el: '#app',
    data: {
      firstName: 'Tom',
      lastName: 'Smith'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

生命周期

Vue提供了多个生命周期钩子函数，用于在组件周期的不同时间节点执行特定的操作。理解生命周期函数能够帮助我们更好的管理组件的状态和行为，避免出现不必要的问题和错误。

Vue组件的生命周期钩子包括：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

Vue.component('my-component', {
  template: '<div> {{ msg }} </div>',
  data () {
    return {
      msg: 'Hello'
    }
  },
  beforeCreate () {
    console.log('组件钩子beforeCreate')
  },
  created () {
    console.log('组件钩子created')
  },
  beforeMount () {
    console.log('组件钩子beforeMount')
  },
  mounted () {
    console.log('组件钩子mounted')
  },
  beforeUpdate () {
    console.log('组件钩子beforeUpdate')
  },
  updated () {
    console.log('组件钩子updated')
  },
  beforeDestroy () {
    console.log('组件钩子beforeDestroy')
  },
  destroyed () {
    console.log('组件钩子destroyed')
  }
})

示例说明

示例1：实现一个动态列表

需求：实现一个动态列表，可以添加和删除条目。

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
      <button @click="removeItem(index)">remove</button>
    </li>
  </ul>
  <input v-model="newItem">
  <button @click="addItem">add</button>
</div>

<script>
  let vm = new Vue({
    el: '#app',
    data: {
      items: ['item1', 'item2'],
      newItem: ''
    },
    methods: {
      addItem () {
        if (this.newItem) {
          this.items.push(this.newItem)
          this.newItem = ''
        }
      },
      removeItem (index) {
        this.items.splice(index, 1)
      }
    }
  })
</script>

示例2：实现一个倒计时组件

需求：实现一个Vue组件，可以显示倒计时，如：01:59。

<div id="app">
  <countdown time="120"></countdown>
</div>

<script>
  Vue.component('countdown', {
    props: ['time'],
    data () {
      return {
        remaining: this.time,
        intervalId: null
      }
    },
    computed: {
      displayTime () {
        let minutes = Math.floor(this.remaining / 60)
        let seconds = this.remaining % 60
        return ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2)
      }
    },
    mounted () {
      this.intervalId = setInterval(() => {
        if (this.remaining > 0) {
          this.remaining--
        } else {
          clearInterval(this.intervalId)
        }
      }, 1000)
    },
    template: '<div>{{ displayTime }}</div>',
    beforeDestroy () {
      clearInterval(this.intervalId)
    }
  })

  let vm = new Vue({
    el: '#app'
  })
</script>

以上是“学习Vue框架中必掌握的重点知识”的完整攻略，包含组件基础、数据绑定和计算属性、生命周期等内容，同时也提供了两个示例说明。希望对你学习Vue有所帮助。