vue学习04 v-on指令
vue学习04 v-on指令
v-on的作用是为元素绑定事件,比如click单击,dbclick双击
v-on指令可简写为@
代码测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 2.html的结构 -->
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on指令" @click="doIt">
<input type="button" value="v-on双击事件" @dblclick="doIt">
<h3 @click="changeFood">{{ food }}</h3>
</div>
<!-- 1.开发环境版本 -->
<script src="js/vue.js"> </script>
<!-- 3.创建vue实例 -->
<script>
var app = new Vue({
el:"#app",
data:{
food: "西红柿炒鸡蛋"
},
methods:{
doIt: function(){
alert("点我嘎哈!");
},
changeFood: function(){
console.log(this.food);
this.food+="好好吃!"
}
},
})
</script>
</body>
</html>
效果图
vue学习04 v-on指令的更多相关文章
- Vue学习之路5-v-model指令
1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...
- Vue学习之路4-v-bind指令
1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v- ...
- Vue学习系列(三)——基本指令
前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...
- vue学习-day02(自定义指令,生命周期)
目录: 1.案例:品牌管理 2.Vue-devtools的两种安装方式 3.过滤器,自定义全局或私有过滤器 4.鼠标按键事件的修饰符 5.自定义全局指令:让文本框获取焦点 ...
- Vue学习之路8-v-on指令学习简单事件绑定之属性
前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...
- Vue学习之路7-v-on指令学习之简单事件绑定
前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...
- Vue学习五:v-for指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...
- Vue学习二:v-model指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...
- vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点
需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...
随机推荐
- 如何理解Vue.js中的ref及$ref,$
1.vue官方文档 首先我们来看一下vue官方是怎么解释的 好了,我知道很多刚接触的vue的小白其实都不太看的懂官方文档在讲什么,下面我用自己的话翻译一下. 2.ref以及$ref 通过 ref 标注 ...
- 数据分析-RFM模型用户分析
RFM模型 根据美国数据库营销研究所Arthur Hughes的研究,客户数据库中有3个神奇的要素,这3个要素构成了数据分析最好的指标: 最近一次消费 (Recency) 消费频率 (Frequenc ...
- TCP为什么需要握手
一.TCP握手流程 二.为什么不是4次握手 TCP的每次请求都是成对的,原则上应该是四次 [Client to Server]第一次SYN,seq=x [Server to Client]第二次ACK ...
- 微信小程序发送订阅消息(之前是模板消息)
之前的模板消息已经废弃,现在改为订阅消息,订阅消息发布前,需要用户确认后才能接收订阅消息. 小程序端 index.wxml <button bindtap="send"> ...
- win环境下安装配置openCV-4.3.0
win环境下安装openCV-4.3.0 首先下载 推荐国内镜像 官网太太太慢了 附上 下载地址 下载之后打开exe解压到目录都是常规操作 环境变量的配置 依次打开到系统变量的path 新建一个路径为 ...
- Unity - NGUI - 优化ScrollView的一些心的
ScrollView是NGUI非常好用的一个内置组件,但是效率不好,当子物体过多的时候,一旦开始拖动就帧数狂掉,我目前有3个解决思路: 1. NGUI自带的Example 8 - Scroll Vie ...
- Spine学习九 - 冰冻效果
想象这样一个效果,一个人被冰霜攻击命中,然后这个人整个就被冰冻了,那么spine动画要如何实现这个效果呢? 1.首先需要一个Spine动画,这个动画应该是相对静止的,因为人物已经被冰冻了,那么这个人儿 ...
- Spine学习四 - 在动作上绑定回调事件
Spine事件特性: SpineEvent(string startsWith = "", string dataField = "", bool includ ...
- I - 乓 (BFS+邻接表)
USTC campus network is a huge network. There is a bi-directional link between every pair of computer ...
- Oracle 回滚段undo
Undo的作用 数据的回滚 一致性读 表的闪回(事务,查询的闪回..) 失败会话的恢复 回滚rollback操作 SQL> archive log list; ORA-01031: 权限不足 S ...