1.首先你需要新建路由，这个就不多说了

2.然后在你的新的.vue里面需要如下所示的添加methods：{方法}，然后按钮的里面你会看到v-on:click，这就是点击这个按钮会触发的动作，这个就是触发methods里的highlight函数，当然v-on:click也可以写成@click这两个是一样的

 <html>

 <head>

     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

 </head>

 <body>

     <div id='app'>

         {{ message }}

         <br/>

         <button v-on:click='highlight' style='margin-top: 50px'>真的吗</button>

     </div>

     <script>

         var app = new Vue({

             el: '#app',

             data: {

                 message: '学习Vuejs使我快乐~ '

             },

             methods:  {

19                 highlight: function() {

20                     this.message = this.message + '是的， 工资还会涨~!'

21                 }

22             }

         })

     </script>

 </body>

 </html>

3.最关心的结果来了，点击真的嘛按钮后就会变成图2哦

Vue.js随笔四(方法的声明和使用)的更多相关文章

  1. Vue.js学习 Item8 -- 方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...

  2. iOS 或者Android调用vue.js 里面的方法

    1.原生调用vue.js 某个vue组件下的方法. 比如**.vue里面有个这样的方法: 如果这样的话,在iOS或者Android里面是调用不了这个ajax方法的. 需要在**.vue (我的版本是v ...

  3. 第三节.vue.js属性与方法

    1. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>I ...

  4. vue.js 第四课

    (1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...

  5. 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. Vue.js随笔二(新建路由+component+添加样式+变量的显示)

    创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...

  7. Vue.js随笔一(Webpack + Vue.js开发准备，含VNM、NPM、Node、Webpack等相关工具)

    想入门工具是必须的,这一章将向大家带来vue.js相关的程序安装步骤. ①首先你需要有一个NVM(一个非常好用的Node版本管理器): 1.NVM下载地址:https://github.com/cor ...

  8. vue.js中created方法作用

    这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...

  9. Vue.js NPM 安装方法

    由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v ...

随机推荐

  1. zend安装及破解

    Zend下载 https://pan.baidu.com/s/1fCfUQ0j7dxEtOzbNnsgODg 破解: 1.打开dmg文件安装,将Zend Studio拖拽至applications进行 ...

  2. 基础系列（1）—— NET框架及C#语言

    一.在.NET之前的编程世界 C#语言是在微软公司的.NET框架上开发程序而设计的,首先作者给大家纠正了一下C#的正确发音:See Sharp (一) 20世纪90年代末的Windows编程 这时大多 ...

  3. 团队Alpha冲刺（十）

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  4. 【Nginx】nginx为目录或网站加上密码认证

    第一步生成pwd用户名密码文件 工具:http://trac.edgewall.org/export/10770/trunk/contrib/htpasswd.py 步骤: chmod 777 htp ...

  5. 小记IptabLes和IptabLex病毒清理过程

    去年有台Linux服务器被黑了,看了500万行日志(现在觉得当时好厉害呀),反正当时的日志文件有700Mb以上大.前两天师兄告诉我,信息中心的老师给他说我们有台服务器应该是被人入侵了,当作内网的跳板, ...

  6. C语言 aabbcc、abc、fabc、aabc

    输入一个字符串,匹配字符串中连续出现的字符串.并且连续个数相等 如输入 aabbcc.abc.fabc.aabc.aabbc 分别输出yes还是no #include<stdio.h>#i ...

  7. kafka 基础知识梳理-kafka是一种高吞吐量的分布式发布订阅消息系统

    一.kafka 简介 今社会各种应用系统诸如商业.社交.搜索.浏览等像信息工厂一样不断的生产出各种信息,在大数据时代,我们面临如下几个挑战: 如何收集这些巨大的信息 如何分析它 如何及时做到如上两点 ...

  8. HDU4786_Fibonacci Tree

    题目很新颖的,略带智商,很好. 题目的意思是给你一些白色边和黑色边,现在问你能否用两色边构造出一颗生成树,且树中白色边的数量为一个Fibonacci数. 其实在没做题目之前我就已经听说了这个题目的解题 ...

  9. HDU4701_Game

    很有意思,很好的一个题目. 题目的意思是两个人初始状态分别有A和B元,现在有N件可买的商品.两人轮流买,商品必须从左到右买过去,一次可以买若干个.第一个无法买到商品的人输. 一看就知道是博弈题目,但是 ...

  10. 【Java】CSVUtils

    package com.msk.ds.logic; import java.io.*; import java.util.List; /** * Created by Administrator on ...