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. Scrum立会报告+燃尽图（十月十日总第一次）：选题

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2190 Scrum立会master:付佳 一.小组介绍 组长:付佳 组员: ...

  2. 软件工程第七周psp

    1.PSP表格 类别 任务 开始时间 结束时间 中断时间 delta时间 立会 汇报昨天的成绩,分配任务,部署计划 10月27日18:00 10月27日18:36 0 36分钟 准备工作 查阅有关资料 ...

  3. Beta阶段第一次网络会议

    Beta阶段第一次网络会议 游戏问题 游戏细节特征不够明显,大小虽然随着电脑分辨率的不同变化着,但是存在清楚的问题 游戏中的提示信息不够,玩家无法快速了解游戏 游戏中背景声音过于单一 游戏AI太简单 ...

  4. 【线段树求区间第一个不大于val的值】Lpl and Energy-saving Lamps

    https://nanti.jisuanke.com/t/30996 线段树维护区间最小值,查询的时候优先向左走,如果左边已经找到了,就不用再往右了. 一个房间装满则把权值标记为INF,模拟一遍,注意 ...

  5. OA--对于每个form表单(<s:iterator>生成)的处理

    由于是后台传过来的,我们不知道form 有几个 也不能指定form的id和name,(其实也可以就是可能会冲突我们还是用下面讲的方法把) 之前有想过 对于每个form 里面都有一些参数,举个例子 项目 ...

  6. <浪潮之巅>读书笔记

    <浪潮之巅>这本书通过介绍AT&T.IBM.微软.苹果.google等IT公司的发展历史,揭示科技工业的胜败规律,说明这些公司是如何在每一次科技革命浪潮到来时站在浪尖,实现跨越式发 ...

  7. map的默认排序和自定义排序

    STL的容器map为我们处理有序key-value形式数据提供了非常大的便利,由于内部红黑树结构的存储,查找的时间复杂度为O(log2N). 一般而言,使用map的时候直接采取map<typen ...

  8. POJ题目分类推荐 （很好很有层次感）

    著名题单,最初来源不详.直接来源:http://blog.csdn.net/a1dark/article/details/11714009 OJ上的一些水题(可用来练手和增加自信) (POJ 3299 ...

  9. Java多线程下单例

    /* 多线程下的单例 */ //饿汉式 class Single { private static final Single s = new Single(); private Single(){} ...

  10. 分页---Vue+.net+bootstrap实现

    通过学习Vue,的确觉的Vue的双向绑定使用起来十分方便,因此研究了一下列表显示时分页的实现,这里我使用了bootstrap的样式,所以在页面中引用bootstrap的样式文件,后台提数据源使用.ne ...