《前端主流框架应用》课件——2-2 Vue中的选项.pptxVIP

Vue中的选项成员

2.2

方法

计算属性

监听

一、方法methods

Vue实例常用选项成员：

选项

说明

el

挂载点，唯一根元素

data

Vue实例数据对象

methods

Vue实例中的方法

computed

计算属性

watch

监听数据变化的成员

一、方法methods

methods属性用来集中定义方法，其值为一个对象。可以定义多个javascript方法，方法定义之间用逗号分隔。通过Vue实例可以直接访问这些方法。

在定义的方法中，如果访问data的数据，可以直接通过this.属性名的形式来访问。this指向Vue实例本身。

定义在methods属性中的方法可以作为页面中的事件处理方法被调用。

methods定义方法

基本语法：

ES6方法化简格式

传统js键值对格式

一、方法methods

事件绑定：在Vue中，v-on指令用来监听事件，即为元素绑定事件。语法格式：

v-on:事件名=方法调用或表达式

如果被调用方法没有形参，那么调用方法的（）可以省略。

divid=app

buttonv-on:事件名=方法(实参)点击/button

/div

这里是方法名或者语句表达式

事件绑定指令v-on

绑定的方法必须在vue实例methods成员定义。

v-on:可以简化为@

案例：点击按钮，年龄增长

点击按钮，页面中年龄增加1。v-on绑定事件格式可以化简为：@事件名

divid=app

h1姓名：{{name}}/h1

h2年龄：{{age}}/h2

!--绑定单击事件--

buttonv-on:click=age++年龄增长/button

/div

初始页面结构

定义vm实例

divid=app

h1姓名：{{name}}/h1

h2年龄：{{age}}/h2

!--绑定单击事件--

button@click=age++年龄增长/button

/div

初始页面结构

案例：点击按钮，页面文字变化

当你点击按钮时，页面上显示的消息会更新。

divid=app

!--为button按钮绑定click事件--

button@click=showInfo请单击/button

p{{msg}}/p

/div

初始页面结构

定义vm实例

综合案例：计数器

点击按钮减一，减到0不再减了

点击按钮加一，加到10不再加了

二、计算属性computed

computer，即计算属性，也是Vue的选项成员。computer用来集中定义计算属性，其值为一个对象。

当有一些数据需要随着其他数据变动而变动时，就需要用computed计算属性来定义。

计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。语法格式：

计算属性表面形式是方法，必须有返回值。

案例：用计算属性显示总金额

点击按钮，数量增减，总金额跟着变化。

总金额=单价*数量

varvm=newVue({

el:#app,

data:{price:20,num:0},

computed:{

totalPrice:function(){//总价格

returnthis.price*this.num

}

}

})

divid=app

p总价格：{{totalPrice}}/p

p单价：{{price}}/p

p数量：{{num}}/p

div

button@click=num=0?0:num--减少数量/button

button@click=num++增加数量/button

/div

/div

计算属性表面是方法,本质是属性！

三、监听watch

数据监听器（watch）：

作用：用来监测Vue实例中的数据变动。watch的值为一个对象，可以定义多个监听。

监听是Vue.js提供的一种用来监听和响应Vue实例中的数据变化的方式。对数据进行监听，一旦数据发生变化，则触发相应函数的执行，以达到改变其他数据的目的。语法格式：

watch:{

//要监视的数据变量名:回调函数

//newValue是变量的新值，oldValue是旧值

变量名：f