一、在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做

 1         window.onload = function () {
 2           var c = new Vue({
 3               el : 'body',
 4               methods : {
 5                 say : function(){
 6                     alert( '欢迎学习vue' );
 7                 }
 8               }
 9           });
10        }
11
12 <input type="button" value="点我" v-on:click="say();"/>

添加方法,需要在vue实例的对象参数中,添加一项methods配置, methods是字面量方式,如上例,我们添加了一个say方法, 在按钮中绑定了一个点击事件,当事件触发的时候,执行say();

二、绑定双击事件,通过在methods方法中定义的函数,操作data中的数据

 1         window.onload = function () {
 2           var c = new Vue({
 3               el : 'body',
 4               data : {
 5                   arr : [ 10, 20, 30 ]
 6               },
 7               methods : {
 8                 change : function(){
 9                     this.arr.push( 40 );
10                 }
11               }
12           });
13        }
14
15         <input type="button" value="点我" v-on:dblclick="change();"/>
16         <ul id="box">
17             <li v-for="value in arr">{{value}}</li>
18         </ul>

上述例子,通过在按钮中绑定双击事件,当事件触发时,调用change方法, 通过this.arr 访问data中定义的数组arr, 向arr中push值40,那么data中的arr数据就被修改了,基于vue是MVVM驱动方式, 那么arr的修改 就会 实时更新到视图中.结果就是在ul下面新增一项li,值为40

三、指令:v-show,值为false/true.  当为false时,该元素隐藏,当为true时,该元素显示.

 1     <style>
 2         div {
 3             width: 200px;
 4             height: 200px;
 5             background: red;
 6             float:left;
 7             margin:20px;
 8         }
 9     </style>
10     <script src="../js/vue.js"></script>
11     <script>
12        window.onload = function () {
13           var c = new Vue({
14               el : 'body',
15
16           });
17        }
18     </script>

1 <div v-show="true"></div>
2 <div v-show="true"></div>
3 <div v-show="false"></div>

输出结果:

<div></div>
<div></div>
<div style="display: none;"></div>

四、点击按钮,实现div显示与隐藏

 1     <style>
 2         div {
 3             width: 200px;
 4             height: 200px;
 5             background: red;
 6         }
 7     </style>
 8     <script src="../js/vue.js"></script>
 9     <script>
10         window.onload = function () {
11             var c = new Vue({
12                 el: 'body',
13                 data: {
14                     flag: false
15                 },
16                 methods : {
17                     toggle : function(){
18                         this.flag = !this.flag;
19                     }
20                 }
21             });
22         }
23
24 <input type="button" value="点我" v-on:click="toggle();"/>
25 <div v-show="flag"></div>

[js高手之路] vue系列教程 - vue的事件绑定与方法(2)相关推荐

  1. [js高手之路] es6系列教程 - 迭代器与生成器详解

    什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...

  2. [js高手之路]设计模式系列课程-发布者,订阅者重构购物车

    发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...

  3. [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  4. 原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法

    最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支 ...

  5. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. 1 <head> 2 <met ...

  6. [js高手之路] 设计模式系列课程 - DOM迭代器(2)

    如果你对jquery比较熟悉的话,应该用过 eq, first, last, get, prev, next, siblings等过滤器和方法.本文,我们就用迭代设计模式来封装实现,类似的功能 1 & ...

  7. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  8. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  9. HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...

    canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...

最新文章

  1. mac 下周期调度命令或脚本
  2. linux 系统目录 java_Linux系统目录及说明
  3. Python zipfile 压缩文件夹
  4. 一个商场营销经理的实习总结
  5. 下一次装mysql 试一下这个方法
  6. NUC1776 Tiling Up Blocks【二维最长上升子序列+DP】
  7. Linux安装Django
  8. 光缆故障定位检测仪使用方法简介
  9. linux服务器密码策略设置:登录密码错误次数限制
  10. Win10使用PowerShell命令行查看cpu温度
  11. 性能常识 [踩坑总结] nf_conntrack: table full, dropping packet [新]
  12. 攒机笔记二十:改造笔记本电脑(华硕A555L)
  13. python实战(一)Python爬取猫眼评分排行前100电影及简单数据分析可视化
  14. RMAN duplicate 方式 做个备库
  15. w锋ndows用户组设置,第2章Wndows+Server+2008本地用户和组.ppt
  16. MySQL结课体会,听课心得体会小结
  17. HBuilderX用uni-app做微信小程序授权登录
  18. tl494cn逆变器电路图_TL494逆变器应用电路图
  19. 初始化 Microsoft Visual SourceSafe 源代码管理提供程序时失败问题处理
  20. Java开源的ERP系统源码带文字搭建教程,前后端分离架构

热门文章

  1. 第一个helloworld.c实例
  2. kux转换为mp4软件_kux2mp4(优酷kux转换为mp4软件)下载-kux2mp4(优酷kux转换为mp4软件)免费版下载v2021...
  3. linux 服务器 重新启动 慢,Linux系统启动缓慢解决方法[阮胜昌]
  4. mysql 临时表增加主键_MySQL之重建表
  5. linux内存free低cache高,Linux之free命令buff/cache过高
  6. django分页模块
  7. 京东数科上市首轮问询「答卷」:与蚂蚁集团有本质区别、信用风险损失有限
  8. 如何在命令提示符下编译运行含有Package的java文件
  9. nginx开启core dump文件
  10. #include *.c文件的妙用