JavaWeb开发5
事件监听
事件：HTML事件是发生在HTML元素上的事情
-
按钮被点击
-
鼠标移动到元素上
-
按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码
事件绑定
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点访谈</title>
</head>
<body>
<input type="button" id="btn1" value="事件绑定1" οnclick="on()"><input type="button" id="btn2" value="事件绑定2">
</body>
<script>function on() {alert("ok");}
document.getElementById("btn2").οnclick=function () {alert("123");}
</script>
</html>
常见事件
Vue
是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM思想。实现数据的双向绑定，将编程的关注点放在数据上
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>hello</title><script src="vue.js"></script></head><body>
<div id="app"><input type="text" v-model="message">{{message}}</div><!-- built files will be auto injected --></body>
<script>new Vue({el:"#app",//vue接管区域data:{message:"hello vue"}})
</script>
</html>
插值表达式
{{表达式}}
内容可以是：
-
变量
-
三元运算符
-
函数调用
-
算术运算
Vue指令
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>hello</title><script src="vue.js"></script></head><body>
<div id="app"><a v-bind:href="url">链接1</a><a :href="url">链接2</a><input type="text" v-model="url"></div><!-- built files will be auto injected --></body>
<script>new Vue({el:"#app",//vue接管区域data:{url:"https://www.baidu.com"}})
</script>
</html>
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>hello</title><script src="vue.js"></script></head><body>
<div id="app"><input type="button" value="click" v-on:click="handle()"><input type="button" value="click" @click="handle()"></div><!-- built files will be auto injected --></body>
<script>new Vue({el:"#app",//vue接管区域data:{
},method:{handle:function () {alert("ok");}}})
</script>
</html>