Vue基础系列（二）——Vue中的methods属性
写在前面的话：
文章是个人学习过程中的总结，为方便以后回头在学习。
文章中会参考官方文档和其他的一些文章，示例均为亲自编写和实践，若有写的不对的地方欢迎大家指出。
作者简介：
一个不知名的前端开发，正在为能走向更高更远的地方而努力。
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实例对象。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给vue添加methods属性</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>{{name}}</h1>
<h1>{{age}}</h1>
</div>
<script type="text/javascript">
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
</script>
</body>
</html>
三.总结
1.使用methods属性给vue定义方法
2.在方法中使用this.属性名就可以直接访问data中的数据
3.在构造函数外部可以使用vm.方法名定义或者调用方法
要加油鸭
Vue基础系列（二）——Vue中的methods属性的更多相关文章
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（四）——Vue中的指令（上）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础以及指令, Vue组件
Vue基础篇一 Vue指令 Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上. <div ...
- 【C++自我精讲】基础系列二 const
[C++自我精讲]基础系列二 const 0 前言 分三部分:const用法.const和#define比较.const作用. 1 const用法 const常量:const可以用来定义常量,不可改变 ...
- python基础系列教程——Python中的编码问题，中文乱码问题
python基础系列教程——Python中的编码问题,中文乱码问题 如果不声明编码,则中文会报错,即使是注释也会报错. # -*- coding: UTF-8 -*- 或者 #coding=utf-8 ...
- vue 基础（二）
Vue对象提供的属性功能 一.过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1. 全局过滤器 Vue.filter 写在vm 对象外.必须要有 ...
- Vue 基础自查——watch、computed和methods的区别
1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
随机推荐
- e课表项目第二次冲刺周期第四天
昨天干了什么? 昨天,我在网上搜集了相关的资料,即连接安卓自带的数据库,查询了连接的方法,然后在电脑上,做了简单的练习,发现可以用,所以对我们的软件进行数据库的连接,设置了完成按钮的活动,即先保存到数 ...
- 用 Python 爬取网易严选妹子内衣信息，探究妹纸们的偏好
网易商品评论爬取 分析网页 评论分析 进入到网易精选官网,搜索“文胸”后,先随便点进一个商品. 在商品页面,打开 Chrome 的控制台,切换至 Network 页,再把商品页Python入门到精通学 ...
- POJ 3784 Running Median (模拟水过带翻译)
Description Moscow is hosting a major international conference, which is attended by n scientists fr ...
- 快速入门Maven（一）
一.Maven简介 1.什么是maven Apache组织中的一个颇为成功的开源项目,Maven主要服务于基于Java平台的项目构建.依赖管理和项目信息管理. 2.Maven的好处 构建是程序员每天要 ...
- 告诉你如何回答"线上CPU100%排查"面试问题
不知道在大家面试中,有没有遇到这个问题: 生产服务器上部署了几个java程序,突然出现了CPU100%的异常告警,你如何定位出问题呢? 这个问题分为两版回答!高调版对不起,我是做研发的,这个问题在生产 ...
- 像智能手机一样管理云端应用：阿里云联合微软全球首发开放应用模型（OAM）
2019 年 10 月 17 日上午 9 点 15 分,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟在 QCon 上海<基于云架构的研发模式演进>主题演讲中,正式宣布: " ...
- splinter操作ie浏览器
splinter 是在selenium上的封装,很多操作更方便,但是默认似乎不能直接操作ie,通过修改browser.py文件,splinter\driver\webdriver下增加ie.py文件, ...
- [JZOJ5778]【NOIP提高A组模拟2018.8.8】没有硝烟的战争
Description 被污染的灰灰草原上有羊和狼.有N只动物围成一圈,每只动物是羊或狼.该游戏从其中的一只动物开始,报出[1,K]区间的整数,若上一只动物报出的数是x,下一只动物可以报[x+1,x+ ...
- mycat+mysql搭建高可用集群1--垂直分库
mycat垂直分库 本文主要介绍了如何使用mycat对mysql数据库进行垂直分库,包括: 垂直分库的步骤 垂直分库的环境准备 配置mycat垂直分库 1. 垂直分库的步骤 收集分析业务模块间的关系 ...
- MyBatis之启动分析（一）
前言 MyBatis 作为目前最常用的持久层框架之一,分析其源码,对我们的使用过程中可更好的运用它.本系列基于mybatis-3.4.6进行分析. MyBatis 的初始化工作就是解析主配置文件,映射 ...