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设计模式——单例模式（static修饰）
1.类的构造器私有化 2.本类内部创建对象(用本类内部public static静态方法返回该静态对象) 3.创建静态变量指向该类. 饿汉式和懒汉式的差异: 1.创建对象的时机不同!(饿汉模式在使用静 ...
- winCE/Windows 应用程序消息提示框自动消失功能
近期在做winCE系统的扫描枪应用程序,遇到了一些问题,其中包括消失提示框在手持终端显示过小, 用户要求提示框提示几秒后自动关闭,Windows平台可以通过调用系统API以定时器的方式进行自动销毁. ...
- Spring Boot 中的 Tomcat 是如何启动的？
作者:木木匠 https://my.oschina.net/luozhou/blog/3088908 我们知道 Spring Boot 给我们带来了一个全新的开发体验,让我们可以直接把 Web 程序打 ...
- 系统盘(c盘)空间清理方法总结（转）
我们一般会把系统安装在C盘,但是使用一段时间后会发现C盘的空间越来越少.尤其我们做开发的,会在电脑中装上很多软件的.比如我的机器上C盘空间15G,平时安装软件时只要可以选择我都会把它装到其他盘的, ...
- Handle Refresh Token Using ASP.NET Core 2.0 And JSON Web Token
来源: https://www.c-sharpcorner.com/article/handle-refresh-token-using-asp-net-core-2-0-and-json-web ...
- FMC228- 四路16位1.2Gsps DA FMC子卡模块
FMC228- 四路16位1.2Gsps DA FMC子卡模块 一.概述 FMC连接器是一种高速多pin的互连器件,广泛应用于板卡对接的设备中,特别是在xilinx公司的所有开发板中 ...
- [转]Tomcat9.0安装教程 Tomcat9.0环境变量配置教程
[转]Tomcat9.0安装教程 Tomcat9.0环境变量配置教程 [转]超详细MySQL安装及基本使用教程
- 4. jaxp----dom解析器（DocumentBuilderFactory、DocumentBuilder）
1.DocumentBuilderFactory--解析器工厂(抽象类 javax.xml.parsers.DocumentBuilderFactory) newInstance() 获取 Docu ...
- oracle 11g 执行先决条件检查失败的解决方法
在安装oracle 11g时,出现执行先决条件失败的情况如下: 你可以忽略所有强制安装,一般不会影响功能,但如果你想知道为什么会产生这种错误, 并且当出现以上情况时又该如何解决呢?如下列出了原因和解决 ...
- Selenium-三种等待方式
在UI自动化测试中,必然会遇到环境不稳定,网络慢的情况,这时如果不做任何处理的话,代码会由于没有找到元素而报错.这时我们就要用到wait,而在Selenium中,我们可以用到一共三种等待,每一种等待都 ...