Vue基础系列（二） |
您所在的位置：网站首页 › vue中el是什么意思 › Vue基础系列（二） |
Vue基础系列（二）
|
VUE基础系列目录
《VUE基础系列（一）——VUE入坑第一篇》 《VUE基础系列（二）——VUE中的methods属性》 《VUE基础系列（三）——VUE模板中的数据绑定语法》 《VUE基础系列（四）——VUE中的指令（上）》 《VUE基础系列（五）——VUE中的指令（中）》
一.前言 上一篇《VUE基础系列（一）——VUE入坑第一篇》我们学习并实践了下面的几个点： 创建了一个vue实例 将实例挂载到了div#box这个DOM节点上 在html使用双花括号插值法引用显示了data中的数据 那么这篇呢，主要是学习总结给如何给在VUE构造函数中添加一些方法。 二.在VUE构造函数中添加methods属性 #创建项目目录
#基本语法 var vm = new Vue({ methods:{ //在此处定义方法 方法名：function(){ } } }); 备注：在构造函数外部定义方法，直接使用vm.方法名 = function(){}；同样，若想在构造函数外部调用methods中定义的方法，直接使用 vm.方法名 即可 #示例 在这个示例之前需要补充一个知识点：如在methods方法中访问data的数据 。 前一篇文章我们介绍了在Vue构造函数外部使用vm.$data.属性名去访问data中的数据。而在methods方法中，我们可以直接使用this.属性名去访问data中的数据，其中this表示的就是vue实例对象。 DOCTYPE html> 给vue添加methods属性 {{name}} {{age}} var vm = new Vue({ el: '#box', data:{ name: 'todo', age: 20, }, methods:{ add: function(){ //在methods内部访问data中的数据：this.属性名 console.log(this.name); // 'todo' return this; } } }); // 构造函数外部调用add方法 var obj = vm.add(); //验证methods中的this对象是否是vue的实例 console.log(obj == vm); //true 三.总结1.使用methods属性给vue定义方法 2.在方法中使用this.属性名就可以直接访问data中的数据 3.在构造函数外部可以使用vm.方法名定义或者调用方法 要加油鸭
|
【本文地址】
今日新闻 |
推荐新闻 |