vue的入门第一课

news/2024/7/10 0:09:57 标签: vue.js, 前端, vue

Vue.js是一款流行的JavaScript框架，用于构建交互式Web应用程序。本文将详细介绍Vue.js的基础知识，包括Vue.js的历史、设计模式、构造函数参数、el、data、computed、method、watch以及差值的使用。

Vue.js是什么？

Vue.js是一款用于构建用户界面的渐进式框架。它可以在现有的项目中逐步采用，也可以作为一个完整的单页面应用程序来使用。Vue.js的核心库只关注视图层，因此它易于集成到其他项目中。

Vue.js的历史

Vue.js最初由Evan You在2014年创建。它的灵感来自于AngularJS和React。Evan You曾经在Google和Meteor工作，他发现AngularJS的学习曲线很陡峭，而React的API很复杂。因此，他决定创建一个简单易用的框架，Vue.js应运而生。

Vue.js的设计模式

Vue.js采用了MVVM（Model-View-ViewModel）的设计模式。它的模型层（Model）表示应用程序的数据和状态，视图层（View）表示用户界面，而视图模型层（ViewModel）则充当了两者之间的桥梁。ViewModel负责将数据绑定到视图上，并监听视图的变化，以便在数据发生变化时更新视图。

Vue.js的构造函数参数

在创建Vue实例时，可以传递一些参数来配置Vue实例的行为。常见的参数包括el、data、computed、method和watch。下面是一个示例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    greet: function () {
      alert('Hello!')
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

Vue.js的el

el选项指定Vue实例要挂载的元素。可以是CSS选择器、DOM元素或Vue组件。例如，如果要将Vue实例挂载到id为“app”的元素上，可以这样写：

new Vue({
  el: '#app'
})

Vue.js的data

data选项是一个对象，用于指定Vue实例的数据。在Vue实例中，可以通过this关键字访问这些数据。例如，如果要在Vue实例中定义一个名为message的数据属性，可以这样写：

new Vue({
  data: {
    message: 'Hello Vue.js!'
  }
})

Vue.js的computed

computed选项是一个对象，用于指定计算属性。计算属性是基于Vue实例中的数据计算得出的属性。它们的值会被缓存，只有在依赖的数据发生变化时才会重新计算。例如，如果要在Vue实例中定义一个名为reversedMessage的计算属性，可以这样写：

new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Vue.js的method

method选项是一个对象，用于指定Vue实例的方法。在Vue实例中，可以通过this关键字调用这些方法。例如，如果要在Vue实例中定义一个名为greet的方法，可以这样写：

new Vue({
  methods: {
    greet: function () {
      alert('Hello!')
    }
  }
})

Vue.js的watch

watch选项是一个对象，用于指定要监听的数据属性和它们的回调函数。当指定的数据属性发生变化时，回调函数会被调用。例如，如果要在Vue实例中监听名为message的数据属性，可以这样写：

new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})