VueJS 常用系统指令
1. v-on:(等同于@)
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码
2. v-on:click(等同于@click)
demo2.html
【需求】:点击按钮事件,改变message的值
<!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="fun('good')">改变</button>-->
<button @click="fun('good')">改变</button>
</div>
</body>
<script>
//view model
var vm = new Vue({
el:"#app",
data:{
message:"hello world"//model
},
methods:{
fun:function(msg){
// this代表的是vue对象,或者使用vm
this.message=msg;
}
}
});
</script>
</html>
3. v-on:keydown
表示键盘按下事件。
http://www.t086.com/article/4315
Keycode对照表
demo3.html
【需求】:对文本输入框做校验,使用键盘按下事件,如果按下0-9的数字,正常显示,其他按键则阻止事件执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:keydown="fun($event)">
</div>
</body>
<script>
//view model
new Vue({
el: "#app",
data: {
message: 10 //model
},
methods: {
fun: function(e) {
//1.捕获keyCode 判断它是否是0-9 需要使用event对象
var keyCode = e.keyCode;
if(!(keyCode >= 48 && keyCode <= 57)) {
//2.阻止默认行为执行
e.preventDefault();
}
}
}
});
</script>
</html>
输入框中只能输入0-9的数字,如果不是0-9的数字,不能输入。
4 . v-on:mouseover
鼠标移入区域事件
demo4.html
【需求1】:给指定区域大小的div中添加样式,鼠标移到div中,弹出窗口。
【需求2】:在div中添加<textarea>,鼠标移动到<textarea>,再弹出一个窗口
【需求3】:阻止上一层事件的执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @mouseover="fun1" id="div" style="width: 70%;height: 80%">
12345
<textarea @mouseover="fun2($event)">abc</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el: "#app",
methods:{
fun1:function(){
alert("div区域......");
},
fun2:function(e){
alert("textarea区域......");
// 阻止冒泡(如果2个方法重叠,阻止上一层fun1方法的执行 )
e.stopPropagation();
}
}
});
</script>
</html>
5. 事件修饰符(了解)
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop // 停止触发,阻止冒泡修饰符(阻止上一层事件)
.prevent // 阻止事件发生,阻止事件默认行为
.capture // 捕获
.self //只点自己身上才运行
.once // 只执行一次
demo5.html
【需求】:在表单中,点击“提交”按钮,阻止执行(.prevent);在超链接中,点击url,阻止上一层事件执行(.stop)
<!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">
<form v-on:submit.prevent action="http://www.itcast.cn">
<input type="submit" value="提交">
</form>
<div @click="fun1">
<a @click.stop href="http://www.itcast.cn">itcast</a>
</div>
</div>
</body>
<script>
//view model
new Vue({
el: "#app",
methods: {
fun1:function(){
alert("hello");
}
// fun2:function (e) {
// e.preventDefault();
// },
// fun3:function (e) {
// e.stopPropagation();
// }
}
});
</script>
</html>
6. 按键修饰符(了解)
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名:
.enter // 表示键盘的enter键
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
demo6.html
【需求】:在输入框中,如果输入回车键,就执行弹出窗口事件(可用于网页登录)。
<!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">
<!--当按下按键enter的时候,触发fun1事件-->
<input type="text" @keydown.enter="fun1">
</div>
</body>
<script>
//view model
new Vue({
el: "#app",
methods: {
fun1:function(){
alert("输入的回车键!");
}
// fun1:function (e) {
// var keyCode = e.keyCode;
// //alert(keyCode);
// if(keyCode == 13){
// alert("输入的回车键!")
// }
// }
}
});
</script>
</html>
7. v-text与v-html
使用{{}}可以输出文本的值。
v-text:输出文本内容,不会解析html元素
v-html:输出文本内容,会解析html元素
demo7.html
【需求】:使用message属性赋值“<h1>hello world</h1>”,查看页面输出内容。
<!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>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>hello world</h1>"//model
}
});
</script>
</html>
8. v-bind
插值语法不能作用在 HTML 属性上,遇到这种情况应该使用 v-bind指令
demo8.html
【需求】:使用vue定义属性ys,对页面中的字体标签<font>赋值颜色(color)。
使用vue定义属性info,对页面中的超链接<a>传递参数(href)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">传智播客</font>
<font size="5" :color="ys2">黑马程序员</font>
<hr>
<a v-bind={href:"http://www.itcast.cn/"+info}>itcast</a>
</div>
</body>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
ys1:"red",
ys2:"green",
info:"subject/javaeezly/index.shtml"
}
});
</script>
</html>
v-bind简写方式
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
9. v-model
用于读取数据。
demo9.html
【需求】:使用vue赋值json数据,并显示到页面的输入框中(表单回显)。
点击提交按钮,改变json数据,验证同时输入框的内容也发生改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
用户名:<input type="text" v-model="user.username"><br>
密码:<input type="text" v-model="user.password"><br>
<input type="button" @click="fun" value="按钮">
</div>
</body>
<script>
//view model
new Vue({
el: "#app",
data: {
user: {
username: "tom",
password: "123"
}
},
methods: {
fun: function() {
alert(this.user.username+" "+this.user.password);
this.user.username = "fox";
this.user.password = "456";
}
}
});
</script>
</html>
10. v-for
用于操作array/集合,遍历
demo10.html
【需求1】:使用vue赋值list集合,分别存放数组和集合,并把数据遍历到页面上的<li>标签中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历数组</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,index) in arr">{{value}}----{{index}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,index) in list">
{{value.username}}----{{value.age}}----{{index}}
</li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:['aaa','bbb','ccc'], //model
list:[{username:"张三",age:18},{username:"李四",age:22}]
}
});
</script>
</html>
demo11.html
【需求2】:使用vue赋值json数据,并把数据遍历到页面上的<table>里的<tr>标签中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="(p,index) in products">
<td>{{index+1}}</td>
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el: "#app",
data: {
products: [{
id: 'itcast001',
name: "电视机",
price: 1000
}, {
id: "itcast002",
name: "洗衣机",
price: 2000
}] //model
}
});
</script>
</html>
11. v-if与v-show
v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
demo12.html
【需求】:使用vue赋值flag变量(boolean类型),用来判断<span>元素中的内容是否显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if和v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">传智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切换</button>
</div>
</body>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
flag:false
},
methods:{
toggle:function(){
this.flag=!this.flag;
}
}
});
</script>
</html>