vue工具库vueuse的具体用法（Vue2.0的学习笔记Vue的Methods）

vue工具库vueuse的具体用法（Vue2.0的学习笔记Vue的Methods）正如前面提到的，函数必须在Vue中的methods属性下添加，这个有点类似于Vue中的计算属性computed。在Vue中，把methods被命名为方法，它也是让我们调用在对象上下文中的函数，它可以操作对象中包含的数据。在我们这个示例，对象其实就是Vue实例。除了上面两种方式，我们还可以添加一个方法，即函数，它也可以为我们做这个。let app = new Vue({ el: '#app' data () { return { firstName: 'Airen' lastName: 'Liao' } } computed: { fullName: function () { return this.firstName ' ' this.lastName } } }) 这个时候，我们在元素中插入fullName，如下：<div id="app"&

在前面的学习当中，学会了如何用文本插值输出数据。但如果我们需要根据某些规则或逻辑输出数据呢？在这种情况下，我们可以通地Vue中的计算属性，根据某些规则或逻辑输出数据。这种方式也很方便，但除了这些方式之外，还可以嵌入JavaScript的逻辑函数。有的时候我们还会从远程服务获取数据，使用前面提到的方式也是可以。那么，今天 我们学习一个新方法，使用methods属性向Vue实例引入新属性。该属性应该包含一个对象，其中键（key）为函数的名称，值（value）为函数本身。

let app = new Vue({ el: '#app' data () { return { firstName: 'Airen' lastName: 'Liao' } } })

比如我们要在页面中输出全名，我们有两种方式，一种是文本插值方式：

<div id="app"> <h1>{{ firstName }} {{ lastName }}</h1> </div>

可以看到输出我们需要的fullName，也就是"Airen Liao"：

除了文本插值的方式之外，我们还可以使用Vue中的computed属性，可以在computed中创建一个fullName方法。其中键名就是函数名，比如fullName，而键值是函数：

let app = new Vue({ el: '#app' data () { return { firstName: 'Airen' lastName: 'Liao' } } computed: { fullName: function () { return this.firstName ' ' this.lastName } } })

这个时候，我们在元素中插入fullName，如下：

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

最终输出的也是我们希望要的结果。

如果你从未接触Vue中的计算属性computed，建议你点击这里或这里进行了解。

除了上面两种方式，我们还可以添加一个方法，即函数，它也可以为我们做这个。

正如前面提到的，函数必须在Vue中的methods属性下添加，这个有点类似于Vue中的计算属性computed。在Vue中，把methods被命名为方法，它也是让我们调用在对象上下文中的函数，它可以操作对象中包含的数据。在我们这个示例，对象其实就是Vue实例。

let app = new Vue({ el: '#app' data () { return { firstName: 'Airen' lastName: 'Liao' } } methods: { } })

该对象中的键将是方法的名称。在本例中，fullName就是methods的方法名，其值就是一个函数：

let app = new Vue({ el: '#app' data () { return { firstName: 'Airen' lastName: 'Liao' } } methods: { fullName: function () { } } })

实际上，Vue中的方法可用做很多事情，但是现在我们这个示例中的方法只返回一个字符串值，它可以通过文本插值来输出。那么，我们如何访问该方法中的数据属性呢？Vue代理的数据和方法在此上下文中都可用，所以this.firstName就是访问了data中的firstName属性。注意这是必需的。有了这个，我们就可以很容易地连接第一个和最后一个名称并返回结果。

let app = new Vue({ el: '#app' data () { return { firstName: 'Airen' lastName: 'Liao' } } methods: { fullName: function () { return this.firstName ' ' this.lastName } } })

再次注意了，Vue中的data和methods都是上下文中的变量，所以我们可以通过this.firstName的方式访问data中的firstName属性。如果我们想要，我们可以通过使用相同的方法从fullName()方法中访问其他方法，只需要末尾插入括号，使其成为方法调用。

好了，现在我们已经实现了我们的方法，让我们看看在模板中怎么使用它。事实上也是你期望的那样简单，在方法后面紧跟着圆括号。

<div id="app"> <h1>{{ fullName() }}</h1> </div>