vue-learning:17- js - methods
methods
函数是十分优雅的语言特性,它让我们可以采用可复用的方式存储一段逻辑,从而不用重复代码就可以在多处调用。函数、组件、模块等都有复用代码的考虑,函数应该是最早组织复用代码的实现。
在vue
中,函数被定义为方法来使用,配置在methods
属性中,methods
是一个对象,函数名和函数体分别作为methods
对象的键值对。
new Vue({
el: "#app",
data: {
count: 0,
},
methods: {
increase: function () {
this.count++
}
}
})
在学习事件绑定指令v-on
时介绍有几种写法,指令接收表达式写法,所以我们可以直接将简单的事件处理逻辑写在指令的表达式中。
<div id="#app">
<div>{{ count }}</div>
<button @click="count++">count+1<button>
</div>
但是在实现项目中,事件处理函数的逻辑往往都是比较复杂的,不可能向上面这样将处理逻辑写在HTML元素中,所以就可以定义函数,写在methods
方法中。
<div id="app">
<div>计数:{{ count }}</div>
<button @click="increase">count+1</button>
</div>
methods: {
addOneDay() {
this.count++
}
},
this
this
指向当前所处的组件,可以使用this
访问当前组件的配置对象Optiins
的所有属性值。并且经过vue
的封装,可以直接打点调用某个属性值。比如:
var vm = new Vue({
el: "#app",
data: {
count: 0,
},
computed: {
double() {return this.count *2}
}
methods: {
addCount() {this.count++}
}
})
此时this
指向这个vue
实例vm
。调用vm.data.count
属性不需要this.data.count
的写法,而是直接this.count
或this.double
或this.addCount
。在计算属性和方法或其它配置对象属性中使用也一样。
vue-learning:17- js - methods的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
- 前端(二十一)—— vue指令:文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令
文本类指令.v-bind指令.v-on指令.v-model指令.条件渲染指令.列表渲染指令 一.文本操作 v-text:文本变量 <p v-text='msg'></p> &l ...
- 前端(二十)—— vue介绍:引用vue、vue实例、实例生命周期钩子
vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战:个人博客第一版(axios+router)
前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单
前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
- Vue.js-01:第一章 - 一些基础概念
一.前言 Vue.React.Angular,当今前端界的三驾马车,作为传统的后端程序员,前端再也不是我们想的那种切切图就可以了,第一次接触的话,先了解了解一些基础的概念. 学习系列目录地址:http ...
- Vue.js-06:第六章 - 按键修饰符的使用
一.前言 上周末的时候,准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上,结果在一个接一个坑里面跳,最后 Supervisor 守护程序还是有问题,于是,采用重装系统大招, ...
- Vue.js-07:第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- 在被vue组件引用的 js 文件里获取组件实例this
思路: 通过调用函数 把 组件实例this 传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...
随机推荐
- 用Sketch和PaintCode快速得到绘制代码
http://www.cocoachina.com/ios/20150901/13155.html 作者:codeGlider 授权本站转载. 在我的上一篇文章中 swift10分钟实现炫酷的导航控制 ...
- HDU - 4725_The Shortest Path in Nya Graph
The Shortest Path in Nya Graph Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
- HDU_1021:Fibonacci Again
Problem Description There are another kind of Fibonacci numbers: F(0) = 7, F(1) = 11, F(n) = F(n-1) ...
- 数据人看Feed流-架构实践
背景 Feed流:可以理解为信息流,解决的是信息生产者与信息消费者之间的信息传递问题.我们常见的Feed流场景有:1 手淘,微淘提供给消费者的首页商品信息,用户关注店铺的新消息等2 微信朋友圈,及时获 ...
- SharpDX初学者教程第5部分:着色三角形
原文 http://www.johanfalk.eu/blog/sharpdx-beginners-tutorial-part-5-coloring-the-triangle 在第4部分中,我们创建了 ...
- 2019-7-25-VisualStudio-2019-新创建项目添加-git-仓库
title author date CreateTime categories VisualStudio 2019 新创建项目添加 git 仓库 lindexi 2019-7-25 15:8:15 + ...
- ROS出现“Couldn't find executable named listener below //home/xxx/catkin_ws/src/mypack”问题
在执行节点时出现了如下图所示的错误: 错误原因是在路径下找不到可执行的节点文件.但事实是已经对工作空间进行了编译,并且在devel /lib/my_serial_node 中已经生成了可执行文件. 如 ...
- Python基础:14生成器
yield表达式只用于定义生成器函数,且只能存在于函数的定义体中.只要一个函数内部使用了yield表达式,则该函数就成为生成器函数. 当调用生成器函数时,它返回一个称为生成器的迭代器.然后该生成器控制 ...
- python 清空文件夹
#!/usr/bin/env python# -*- coding:utf-8 -*-import os def del_file(path): for i in os.listdir(path): ...
- pandas数据框,统计某列或者某行数据元素的个数
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/sinat_38893241/articl ...