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框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
随机推荐
- 什么是 Java 对象深拷贝？面试必问！
点击上方蓝色链接,关注并"设为星标" Java干货,每天及时推送 介绍 在Java语言里,当我们需要拷贝一个对象时,有两种类型的拷贝:浅拷贝与深拷贝. 浅拷贝只是拷贝了源对象的地址 ...
- 中标麒麟系统安装rpm文件
打开终端,获得su权限. cd到rpm所在文件夹,输入指令,rpm -ivh rpm的名称
- spark复习笔记(6):数据倾斜
一.数据倾斜 spark数据倾斜,map阶段对key进行重新划分.大量的数据在经过hash计算之后,进入到相同的分区中,zao
- 帝国CMS 调用专题[eshowzt]标签改为灵动标签[e:loop]的方法
1.eshowzt说明及示例 [eshowzt]标签模板ID,专题类别ID,显示专题数[/eshowzt] 示例需求:将推荐专题后,显示9个指定专题 原来写法: <span>[eshowz ...
- Vue+elementui 实现复杂表头和动态增加列的二维表格
先上完成的效果图:列是根据查询结果增加的 数据格式: 表头的数据取出: data.data.forEach(element => { this.thead.push({ 品名: element. ...
- js中reduce（）的牛掰所在 本质作用：实现数值累计，筛选过滤，类似递归
先看w3c官说 array.reduce(function(total, currentValue, currentIndex, arr), initialValue); /* total: ...
- EL表达式多条件判断
${bndExport.containerList[0].kind eq '01' || bndExport.containerList[0].kind eq '02'}
- maven整合S2SH
1.pom.xml <?xml version="1.0"?> <project xsi:schemaLocation="http://maven.ap ...
- Unity 官网无法访问|国外网站访问过慢|国外网站访问加速器
目录 1. 文档地址 2. 按 3. 工具下载地址 1. 文档地址 GitHub博客 https://coco5666.github.io/blog/articles/20190704-01/ 2. ...
- Airbnb JavaScript 编码风格指南（2018年最新版）
原网址 : https://segmentfault.com/a/1190000013040555 类型 基本类型:直接存取 string number boolean null undefined ...