vue学习v-on:click绑定HTML的单击事件

vue学习v-on:click绑定HTML的单击事件

v-on:click缩写为@click

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>125jz.com-vue</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
   <button @click="greet">123</button>
  </div>
  <script>
   var app=new Vue({
    el:"#app",
    data:{
     name:'vue.js!'
    },
    methods:{
     greet:function(){
      alert(this.name+'的方法被调用了!')
     }					
    }
   })
  </script>
 </body>
</html>

v-on指令绑定一个事件监听器,通过它调用VUE实例中定义的方法。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/7199.html

(1)
江山如画的头像江山如画管理团队
vue学习-我的第一个vue代码
上一篇 2020年6月14日 上午9:15
9个免费好用的ftp软件-上传网页必备
下一篇 2020年6月18日 上午8:22

99%的人还看了以下文章

  • js实现两个页面表单传值并接收

    网页制作时,需要两个页面之间传值,通过JS就可轻松实现。 js 实现两个页面表单传值并接收源码 A页面: <input type=”text” id=”txt”> <input type=”button” value=”测试” onclick=”test()”/> <SCRIPT LANGUAGE=”JavaScript”&gt…

    2019年7月10日
    5.9K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    8.9K0
  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    7.0K0
  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    4.4K0
  • 6个实例教你学会JavaScript的箭头函数

    在看别人JS代码时,经常会看到一些类似下面代码的箭头函数,如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

    2018年2月17日
    11.5K0
  • 12款纯CSS3实现的优秀导航菜单(含源码下载)

    12款纯CSS3实现的优秀导航菜单(含源码下载)12款纯CSS3实现的优秀导航菜单(含源码下载)12款纯CSS3实现的优秀导航菜单(含源码下载)12款纯CSS3实现的优秀导航菜单(含源码下载)

    选12款纯CSS3实现的优秀面包屑导航,只提供在线演示的面包屑导航,你可以点击在线演示,在打开的Demo页面中,右键另存为网页,即可得到源码。

    2022年5月10日 网页制作
    15.4K0

发表回复

登录后才能评论