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面向对 ...
随机推荐
- html5新媒体播放器标签video、audio 与embed、object
html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...
- Java基础-开篇
之前在新浪博客写了不少springmvc的相关技术,但新浪博客毕竟不是专业的技术博客,添加代码很不方便,就开始在博客园试试了. 使用java开发也不少年了,准备再次整理一些java基础知识,当然,这次 ...
- Python3的编码整理总结
python3在内存中是用unicode编码方式存储的,所以不能直接储存和传输,要转化为其他编码进行储存和传输. 字符串通过编码转换成字节码,字节码通过解码成为字符串 encode:str --> ...
- PHP list的赋值
List右边的赋值对象是一个以数值为索引的数组,左边的变量的位置和赋值对象的键值一一对应,有些位置的变量可以省略不写.非末尾的被赋值变量省略时,分隔的逗号不能省略.左边变量被赋值的顺序是从右到左的. ...
- C#数据转换
C 货币 2.5.ToString("C") ￥2.50 D 十进制数 25.ToString("D5") 00025 E 科学型 25000.ToString ...
- Java TCP协议字节处理工具类
1.使用 tcp 协议 读取 输入流的固定长度的字节数 public static byte[] getTcpSpecificBytes(BufferedInputStream bis,int len ...
- KMP算法关键
Knuth-Morris-Pratt Algorithm 当初写这个博客之后一年多,再次看发现当初并不是完全弄明白了.这里为了“避免重复制造轮子”,引用大神博客. http://blog.csdn.n ...
- 开发架构+osi七层协议+socket(day26)
目录 软件开发架构 C/S架构 B/S架构 网络编程 互联网协议/OSI七层协议 传输层 网络层 数据链路层 物理连接层 socket 什么是socket 为什么用socket 如何使用 软件开发架构 ...
- 设计模式（八）Abstract Factory模式
抽象工厂的工作是将“抽象零件”组装为“抽象产品”.在抽象工厂模式中将会出现抽象工厂,它会将抽象零件组装为抽象产品.也就是说,我们并不关心零件的具体实现,而是只关心接口.我们仅适用该接口将零件组装起来成 ...
- unityevent与持续按键触发
上一篇中提到一种鼠标按下时的事件触发,即采用eventtrigger设定pointerdown和pointerup并绑定相应事件.但是若要实现持续按键则需要对绑定的每个方法都添加实现持续按键方法.所以 ...