vue是一种流行的web开发框架，它提供了一个双向绑定的语法糖。在vue中，我们可以很容易地获取页面上的数据，并且可以实时的响应其变化。这篇文章将会探讨vue中如何获取值。
在vue中获取值主要有两种方式，一种是使用指令，另一种是使用计算属性。
使用指令获取值vue中提供了一些指令，可以方便地获取页面上的input、select等类型的值。
v-model指令v-model指令是vue中最常用的获取值的指令，它可以用于绑定表单元素的值，并在用户输入时自动更新数据。例如，在下面的代码中，我们使用v-model指令将输入框的值绑定到了data对象中的message属性：
<div id="app">  <input v-model="message">  <p>{{ message }}</p></div>
var app = new vue({  el: '#app',  data: {    message: ''  }})
现在，当你在输入框中输入文本时，vue会在后台自动更新data中的message属性值，同时在p标签中显示出来。
v-bind指令v-bind指令可以用来在模板中动态地绑定一个或多个属性。例如，在下面的代码中，我们使用v-bind绑定了a标签的href属性到data对象中的url属性：
<div id="app">  <a v-bind:href="url">vue.js</a></div>
var app = new vue({  el: '#app',  data: {    url: 'https://vuejs.org/'  }})
v-on指令v-on指令可以用来绑定事件。例如，在下面的代码中，我们使用v-on绑定了button标签的click事件，当按钮被点击时，vue会自动调用data对象中的increment方法：
<div id="app">  <button v-on:click="increment">{{ count }}</button></div>
var app = new vue({  el: '#app',  data: {    count: 0  },  methods: {    increment: function () {      this.count++    }  }})
使用计算属性获取值在vue中，我们还可以使用计算属性来获取值。计算属性是一种具有缓存机制的属性，它的值基于对其他数据的计算而来。当它所依赖的数据发生变化时，它会自动重新计算。
计算属性的基本用法例如，在下面的代码中，我们声明了一个名为reversedmessage的计算属性，它的值是data对象中的message属性的字符串反转：
<div id="app">  <input v-model="message">  <p>{{ reversedmessage }}</p></div>
var app = new vue({  el: '#app',  data: {    message: 'hello vue!'  },  computed: {    reversedmessage: function () {      return this.message.split('').reverse().join('')    }  }})
计算属性的get和set方法除了可以通过get方法来定义计算属性的值之外，我们还可以通过set方法来定义计算属性的值。例如，在下面的代码中，我们声明了一个名为fullname的计算属性，它的值是data对象中的firstname和lastname属性的拼接。当我们修改fullname的值时，vue会自动调用set方法，从而同时更新data对象中的firstname和lastname属性：
<div id="app">  <input v-model="firstname">  <input v-model="lastname">  <p>{{ fullname }}</p></div>
var app = new vue({  el: '#app',  data: {    firstname: 'john',    lastname: 'doe'  },  computed: {    fullname: {      get: function () {        return this.firstname + ' ' + this.lastname      },      set: function (newvalue) {        var names = newvalue.split(' ')        this.firstname = names[0]        this.lastname = names[names.length - 1]      }    }  }})
总结在vue中，我们可以使用v-model、v-bind、v-on等指令来获取页面上的数据，还可以使用计算属性来对数据进行计算，以便生成新的值。通过这些方法，vue提供了非常方便的数据获取方式，让我们轻松应对各种业务需求。
以上就是vue怎么获取值的详细内容。