vue事件的绑定
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<button v-on:click="handleClick">Click Me</button>
<button @click="handleClick">Click Me</button>
<h5>select</h5>
<select v-on:change="handleChange">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="pink">粉色</option>
</select>
<h5>表单提交</h5>
<form v-on:submit.prevent="handleSubmit">
<input type="checkbox" :checked="false" v-on:click="handleDisabled"/>
是否同意本站协议
<br>
<button :disabled="isDisabled">提交</button>
</form>
</div>
<script>
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
isDisabled:false
},
//methods对象
methods:{
//通过methods来定义需要的方法
handleClick:function(){
console.log("btn is clicked");
},
handleChange:function(event){
console.log("选择了某选项"+event.target.value);
},
handleSubmit:function(){
console.log("触发事件");
},
handleDisabled:function(e){
if(event.target.checked==true){
this.isDisabled = true;
}
else{
this.isDisabled = false;
}
}
}
})
</script>
</body>
</html>
vue事件的绑定的更多相关文章
- vue事件双向绑定
事件 案例: vue的事件绑定原理:改变图片的背景颜色问题来实现这个框架的使用方法, new Vue({ el:"", data:{}, methord:{}, computed: ...
- Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
- Vue事件绑定原理
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
随机推荐
- 一份完整的 MySQL 开发规范，进大厂必看！
作者:听风 https://www.cnblogs.com/huchong/p/10219318.html 一.数据库命令规范 1.所有数据库对象名称必须使用小写字母并用下划线分割 2.所有数据库对象 ...
- [BZOJ 3173] [TJOI 2013] 最长上升子序列(fhq treap)
[BZOJ 3173] [TJOI 2013] 最长上升子序列(fhq treap) 题面 给定一个序列,初始为空.现在我们将1到N的数字插入到序列中,每次将一个数字插入到一个特定的位置.每插入一个数 ...
- 汇编移位: SHL、SHR、SAL、SAR、ROL、ROR、RCL、RCR
SHL.SHR.SAL.SAR: 移位指令 ;SHL(Shift Left): 逻辑左移 ;SHR(Shift Right): 逻辑右移 ;SAL(Shift Arithmetic ...
- 谈Apache OFbiz 会员模块表结构设计
数据库表的结构设计可谓是ofbiz除技术框架之外,另一个非常值得学习的方向.这篇文章我们来谈谈ofbiz对电子商务会员表的设计. PARTY ofbiz对人.团体进行了抽象,称之为party,翻译为中 ...
- numpy中tile的用法
a=arange(1,3) #a的结果是: array([1,2]) 1,当 tile(a,1) 时: tile(a,1) #结果是 array([1,2]) tile(a,2) #结果是 array ...
- objectMaaper 反序列化json字段多于或少于实体处理
两种方式 1 忽略json上未知的字段 设置实体类注解 @JsonIgnoreProperties(ignoreUnknown = true) public class Foo { ... } 2 配 ...
- yum软件包管理
一.yum常用命令 #yum -y install [软件包名] //安装 #yum erase [软件包名] //卸载 #yum clean all //清除缓存 #yum makecache // ...
- java selenium常用API汇总
(WebElement.iFrame.select.alert.浏览器窗口.事件.js) 一 WebElement相关方法 1.点击操作 WebElement button = driver. ...
- bzoj2325 [ZJOI2011]道馆之战 树链剖分+DP+类线段树最大字段和
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2325 题解 可以参考线段树动态维护最大子段和的做法. 对于线段树上每个节点 \(o\),维护 ...
- 使用Node，Vue和ElasticSearch构建实时搜索引擎
(译者注:相关阅读:node.js,vue.js,Elasticsearch) 介绍 Elasticsearch是一个分布式的RESTful搜索和分析引擎,能够解决越来越多的用例. Elasticse ...