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

Vue中的选项成员2.2方法计算属性监听一、方法methodsVue实例常用选项成员：选项说明el挂载点，唯一根元素dataVue实例数据对象methodsVue实例中的方法computed计算属性watch监听数据变化的成员一、方法methodsmethods属性用来集中定义方法，其值为一个对象。可以定义多个javascript方法，方法定义之间用逗号分隔。通过Vue实例可以直接访问这些方法。在定义的方法中，如果访问data的数据，可以直接通过this.属性名的形式来访问。this指向Vue实例本身。定义在methods属性中的方法可以作为页面中的事件处理方法被调用。

methods定义方法

基本语法：

ES6方法化简格式传统js键值对格式一、方法methods事件绑定：在Vue中，v-on指令用来监听事件，即为元素绑定事件。语法格式：

v-on:事件名="方法调用或表达式"如果被调用方法没有形参，那么调用方法的（）可以省略。<divid="app"><button

v-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>varvm=newVue({el:'#app',data:{name:"张三",age:18}});初始页面结构定义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>varvm=newVue({el:'#app',data:{msg:'好好学习，天天向上'},methods:{

//定义事件处理方法showInfoshowInfo:function(){this.msg='Daydayup，goodgoodstudy!'}}})初始页面结构定义vm实例综合案例：计数器点击按钮减一，减到0不再减了点击按钮加一，加到10不再加了二、计算属性computedcomputer，即计算属性，也是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是旧值

变量名：function(newValue,oldValue){

}}

watch:{

变量名(newValue,oldValue){

}}案例：监听字符串变量的值的变化用watch监听变量msg的变化，控制台中输出消息。在浏览器的控制台中查看运行效果：watch监测的是数据变量的变化，watch的方法名必须与data中的变量名一致。watch选项补充：v-modelv-model指令是双向数据绑定指令，用于将表单元素与Vue中的变量形成双向绑定关系。这样，你可以通过页面，操作表单元素，就可以修改vue中的数据变量。双向绑定后，可以把数据从视图层传递到模型层。案例：应用监听计算人民币与美元换算。

应用监听属性实现人民币和美元之间的汇率换算。实例小结Vue的选项成员有：el(挂载点),data(数据),methods(方法),computed(计算属性)