Vue简介
- JavaScript框架
- 简化Dom操作
- 响应式数据驱动
创建vue程序步骤
- 导入Vue.js
- 创建vue实例对象，设置el属性和data属性
- 使用简洁的模板语言把数据渲染到页面上
el挂载点
vue实例的作用范围数什么？
vue会管理el选项命中的元素及内部的后代元素
是否可以使用其他的选择器？
可以，但是建议使用ID选择器
是否可以设置其他的dom元素？
可以使用其他的双标签，不能使用HTML和BODY
Data数据对象
vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可
Vue指令
vue指令是指以v-开头的一组特殊语法
v-text
设置标签的文本值
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
内部支持写表达式
v-html
设置标签的HTML
内容中有html结构会被解析为标签
v-on
为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
补充
传递自定义参数,事件修饰符
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符 可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种
v-show
根据表达值的真假,切换元素的显示和隐藏
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新
v-if
根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换v-show,反之使用v-if,前者的切换消耗小
v-bind
设置元素的属性(比如:src,title,class)
完整写法是 v-bind:属性名
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删class建议使用对象的方式
v-for
根据数据生成列表结构
数组经常和v-for结合使用
语法是( item,index ) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的
v-model
获取和设置表单元素的值(双向数据绑定)
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据←→表单元素的值
练习
计时器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <body>
<div id="app">
<button @click="subcount">-</button>
<span>{{count}}</span>
<button @click="addcount">+</button>
</div>
<script>
const app = new Vue({
el:"#app",
data: {
count: 1,
},
methods: {
addcount(){
this.count++;
},
subcount(){
this.count--;
},
},
});
</script>
</body>
|
建议图片切换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <body>
<div id="app">
<img v-bind:src="arr[index]">
<button @click="swap" v-show="index<arr.length-1">切换图片</button>
</div>
<script>
const app = new Vue({
el:"#app",
data: {
arr : ["../images/01.jpg","../images/02.jpg","../images/03.jpg","../images/04.jpg","05.jpg"],
index:0,
},
methods: {
swap(){
this.index++;
if(this.index==4){
this.index=0;
}
}
},
});
</script>
</body>
|
记事本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <body>
<div id="app"> <br>
<input type="text" placeholder="请输入内容！" v-model="inputValue">
<button @click="add">添加</button><br><br><hr>
<ol>
<li v-for="(item,index) in list" ::key="index">{{item}}</li>
</ol><br>
共计条数：<span id="count" v-text="list.length"></span><br>
<button @click="del(list.length-1)">清除当前记录</button>
<button @click="delAll">删除所有数据</button>
<input type="text" placeholder="请输入删除数据位置" v-model="count">
<button @click="delIndex">删除</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
list:[],
inputValue:'',
count:'',
},
methods: {
add(){
this.list.push(this.inputValue);
this.inputValue="";
},
del(nums){
this.list.splice(nums,1);
},
delAll(){
this.list=[];
},
delIndex(){
let a = parseInt(this.count);
if(a>0 && a<=this.list.length){
this.list.splice(a-1,1);
}else{
alert("您的输入有误，请重新输入！");
this.count="";
}
}
},
});
</script>
</body>
|
学生信息录入系统
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| <!DOCTYPE html>
<html lang="en">
<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>学生信息录入系统</title>
<script src="../vue.js"></script>
<style>
#app{
margin-left: 350px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="app">
<fieldset style="width: 600px;">
<legend>学生信息录入系统</legend>
<div>姓名：<input type="text" placeholder="请输入姓名" v-model="user.name"></div>
<br>
<div>年龄：<input type="text" placeholder="请输入年龄" v-model="user.age"></div>
<br>
<div>性别：
<select name="" id="" v-model="user.sex">
<option>男</option>
<option>女</option>
</select>
</div>
<br>
<div>手机：<input type="text" placeholder="请输入您的号码" v-model="user.phone"></div>
<br>
<button type="submit" @click="newUser">创建新用户</button>
<br>
</fieldset>
<br>
<table style="text-align: center;border:1px solid red;">
<tr style="background-color: red;">
<th width="100px">姓名</th>
<th width="100px">性别</th>
<th width="100px">年龄</th>
<th width="200px">手机</th>
<th width="100px">删除</th>
</tr>
<tr v-for="item in users">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.phone}}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
</table>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
user:{
name:"",
sex:"",
age:"",
phone:"",
},
users:[
{name:"ocean",sex:"男",age:"18",phone:"华为13promax冷锋蓝"},
{name:"canda",sex:"女",age:"22",phone:"安卓之光"},
]
},
methods: {
newUser(){
if(this.user.name==""){
alert("名字错误！");
}else if(this.user.age=="" || this.user.age<0){
alert("年龄有误！");
}else{
this.users.push({name:this.user.name,sex:this.user.sex,age:this.user.age,phone:this.user.phone})
}
},
del(index){
this.users.splice(index,1);
}
},
});
</script>
</body>
</html>
|
