文章目录
一、v-on
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
1. v-on:click
点击事件的处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('Vue v-on')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",//表示当前vue对象接管了div区域
data:{
message:"Hello Vue!"
},
methods:{
fun1:function(msg){
alert("Hello");
this.message = msg;
}
}
});
</script>
</html>
2. v-on:keydown
键盘输入控制
<body>
<div id="app">
Vue:<input type="text" v-on:keydown="fun($event)">
<hr/>
传统JS：<input type="text" onkeydown="showKeyCode()"/>
</div>
</body>
<script>
//view model
new Vue({
el: "#app",
methods: {
/* $event 它是vue中的事件对象 和我们传统js的event对象是一样的 */
fun: function (event) {
var keyCode = event.keyCode;
if (keyCode < 48 || keyCode > 57) {
//不让键盘的按键起作用
event.preventDefault();
}
}
}
});
//传统js的键盘按下事件
function showKeyCode() {
//event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
var keyCode = event.keyCode;
if (keyCode < 48 || keyCode > 57) {
//不让键盘的按键起作用
event.preventDefault();
}
// alert(keyCode);
// if(event.keyCode == 13){
// alert("你按的是回车");
// }
}
</script>
</html>
3. v-on:mouseover
鼠标控制
<body>
<div id="app">
<div @mouseover="fun1" id="div">
<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
</div>
<!--<div onmouseover="divmouseover()" id="div">
<textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
</div>-->
</div>
</body>
<script>
//view model
/**
* @事件名称 就是 v-on:事件名称的简写方式
* @mouseover它就等同于v-on:mouseover
*/
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠标悬停在div上了");
},
fun2:function(event){
alert("鼠标悬停在textarea上了");
//不再派发事件，不然会再次弹出“鼠标悬停在div上了”，因为文本域在div域上
event.stopPropagation();
}
}
});
//传统的js方式
function divmouseover(){
alert("鼠标移动到了div上了");
}
function textareamouseover(){
alert("鼠标移动到了textarea上了");
event.stopPropagation();
}
</script>
</html>
4. 事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或
event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop：类似于 js 里的 preventDefault()，通知浏览器不要执行与事件关联的默认动作。
.prevent：类似于 js 里的 stopPropagation()，不再派发事件
.capture
.self
.once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修饰符</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--阻止表单提交的执行-->
<form @submit.prevent action="http://www.baidu.com" method="post" >
<input type="submit" value="提交">
</form>
<!--<form action="http://www.baidu.com" method="post" onsubmit="return checkForm()">
<input type="submit" value="提交">
</form>-->
<hr/>
<div @mouseover="fun1" id="div">
<!--该事件执行后，停止继续派发-->
<textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠标悬停在div上了");
},
fun2:function(event){
alert("鼠标悬停在textarea上了");
}
}
});
//传统js方式
function checkForm(){
alert(1);
//表单验证必须有一个明确的boolean类型返回值
//在应用验证方法时必须加上 return 方法名称
return false;
}
</script>
</html>
5. 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:按键修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
Vue:<input type="text" @keydown.tab="fun1">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("按下的是Tab 键");
}
}
});
</script>
</html>
二、v-text与v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--获取元素的内容，不包含产生的效果-->
<div v-text="message"></div>
<!--获取元素的内容，包含标签产生的效果-->
<div v-html="message"></div>
<!--<div id="div1"></div>
<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//传统js的innerText和innerHTML
window.onload = function(){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
</html>
三、v-bind
插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令
扫描二维码关注公众号，回复：
11340606 查看本文章
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
四、v-model
五、v-for
- 操作 array
- 操作对象
- 遍历对象
六、v-if 与 v-show
v-if 是根据表达式的值来决定是否渲染元素
v-show 是根据表达式的值来切换元素的display css属性
