学习目标
1、掌握Vue的基本使用
2、掌握常用的系统指令
3、掌握使用指令系统完成用户信息展示案例
课程重点内容
1、Vue的基本使用
2、Vue系统指令
3、使用指令系统完成用户信息展示案例
一、Vue简介
[外链图片转存失败(img-pafsRLDS-1564101818292)(\img\为什么学习vue.png)]
二、Vue初体验
**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入vue文件 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 如果超出了vue的管辖范围,{{}}会失效 -->
<div>{{msg}}</div>
<div id="app">
<!-- 通过插值表达式{{}},来渲染数据 -->
{{msg}}
</div>
<script>
// 创建vue的实例,监管对应的html代码
var vm = new new Vue({
// 通过el属性来指定vue对象监管的范围,后面跟一个Id
el: '#app',
// data表示要展示的数据,后面跟一个对象。
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>**
三、什么是MVVM
-
M => Model(数据模型)
-
V => View(视图模型,负责将数据模型转化成UI展现出来,就是那些DOM结构)
-
VM => ViewModel(一个同步View和Model的对象)
[外链图片转存失败(img-wii50AGI-1564101844871)(.\img\MVVM.png)]
四、Vue系统指令
1、v-html
在上一个案例中,我们展示了文本的内容,但是,如果想展示一下HTML的效果,就要用到v-html指令。
例如:现在想让’hello world’这块内容加上h1标签,变成标题效果。如果直接在上面的案例中添加h1标签,发现整个内容并没有展示出h1的效果,而是原样的展示出来了。
如果想展示h1的效果,那么可以使用v-html这个指令。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-html="msg"></div>
</div>
<script>
// 创建vue的实例,监管对应的html代码
var vm = new new Vue({
// 通过el属性来指定vue对象监管的范围,后面跟一个Id
el: '#app',
// data表示要展示的数据,后面跟一个对象。
data: {
msg: '<h1>hello world</h1>'
}
})
</script>
</body>
</html>
2、v-for
1、展示数组中数据
如果想展示多条数据应该怎样进行处理呢?可以在data中定义数组,然后通过v-for这个指令来遍历数组,展示出对应的数据。
具体的使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- users表示数组,item表示从数组中取出的对象,这个名字可以随意取 -->
<!-- 注意 v-for必须结合key属性来使用,它会唯一标识数组中的每一项,未来当数组中的那一项改变的时候,它会只更新那一项,好处就是提升性能。注意key的值唯一,不能重复 -->
<li v-for="item in users" :key="item.id">
编号:{{item.id}} 姓名:{{item.name}}
</li>
</ul>
</div>
<script>
var vm = new new Vue({
el: "#app",
data: {
users: [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}, {
id: 3,
name: '老王'
}]
}
})
</script>
</body>
</html>
如果想让数组的索引值也要展示出来,应该怎样进行处理呢?
<div id="app">
<ul>
<!-- users表示数组,item表示从数组中取出的对象,这个名字可以随意取 -->
<!-- 注意 v-for必须结合key属性来使用,它会唯一标识数组中的每一项,未来当数组中的那一项改变的时候,它会只更新那一项,好处就是提升性能。注意key的值唯一,不能重复 -->
<!-- index表示数组的索引值,该名字可以随意定义 -->
<li v-for="(item,index) in users" :key="item.id">
编号:{{item.id}} 姓名:{{item.name}}---索引:{{index}}
</li>
</ul>
</div>
2、展示对象中的数据
对象中属性比较多,也可以通过v-for这个指令来循环对象,展示其属性的值,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- users表示数组,item表示从数组中取出的对象,这个名字可以随意取 -->
<!-- 注意 v-for必须结合key属性来使用,它会唯一标识数组中的每一项,未来当数组中的那一项改变的时候,它会只更新那一项,好处就是提升性能。注意key的值唯一,不能重复 -->
<!-- index表示数组的索引值,该名字可以随意定义 -->
<li v-for="(item,index) in users" :key="item.id">
编号:{{item.id}} 姓名:{{item.name}}---索引:{{index}}
</li>
<hr/>
<!-- 展示对象中的数据(也就是值) -->
<li v-for="stu in student" :key="stu">
<!-- 表示对象中的值 -->
{{stu}}
</li>
<!-- 展示对象的键和值 -->
<li v-for="(stu,key) in student" :key="stu">
{{key}}:{{stu}}
</li>
<!-- 展示出对象的键,值以及对应的索引 -->
<li v-for="(stu,key,index) in student" :key="stu">
{{key}}----{{stu}}----{{index}}
</li>
</ul>
</div>
<script>
var vm = new new Vue({
el: "#app",
data: {
users: [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}, {
id: 3,
name: '老王'
}],
// 添加对象
student: {
id: 3,
name: '马六',
age: 18
}
}
})
</script>
</body>
</html>
3、v-model
在前面讲解vue简介的时候,我们说过,如果model中的数据发生了改变,会通过ViewModel通知View更新数据,这个效果前面我们也已经演示了,现在演示一下当view中的数据发生了变化后,怎样通过ViewModel来通知model来完成数据的更新。
其实这就是我们常说的,“双向数据绑定”
怎样实现这种效果呢?可以通过v-model来实现。
<!-- v-model指令用来双向数据绑定:就是model和view中的值进行同步变化 -->
<!-- v-model只能在input/textarea/selet 也就是表单元素-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="userName">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
userName: 'zhangsan'
}
})
</script>
</body>
</html>
怎样验证v-model实现了双向数据绑定呢?
可以打开控制台,然后输入:vm.userName 发现输出的值为"zhangsan", 取的是模型中的数据。
当在文本框中输入新的值后,在敲一下vm.userName发现对应的数据发生了变化,也就是视图中的数据发生了变化,模型中的数据也 会发生变化。
那么在控制台中直接给vm.userName=“lisi”,发现文本框中的值也发生了变化。
4、v-on
怎样监听dom的事件呢?可以通过v-on指令完成,具体的代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<span>{{name}}</span>
<!-- 通过v-on来指定对应的事件,然后后面跟上对应的方法名,方法的定义在methods完成 -->
<button v-on:click="changeName">更换姓名</button>
</div>
<script>
var vm = new new Vue({
el: '#app',
data: {
name: 'zhangsan'
},
// 通过methods完成函数或方法的定义
methods: {
changeName() {
// 在methods中要获取data中的属性,需要通过this来完成,this表示的是vue实例。
this.name = "itcast"
}
}
})
</script>
</body>
</html>
还可以通过简写的形式。建议以后都使用简写的形式
<button @click="changeName">更换姓名</button>
带参数的形式如下:
<button @click="changeNameByArg('laowang')">带参数的情况</button>
<script>
var vm = new new Vue({
el: '#app',
data: {
name: 'zhangsan'
},
// 通过methods完成函数或方法的定义
methods: {
changeName() {
// 在methods中要获取data中的属性,需要通过this来完成,this表示的是vue实例。
this.name = "itcast"
},
changeNameByArg(userName) {
this.name = userName
}
}
})
</script>
5、v-if 与 v-show
### 4、删除用户信息
删除数据的时候,要明确具体删除数组中的哪一项内容,可以通过数组的下标来进行确定。
```html
<body>
<div id="app">
<div class="add">
用户编号:<input type="text"> 用户姓名:
<input type="text">
<input type="button" value="添加">
</div>
<div class="add">
用户姓名:<input type="text" placeholder="请输入搜索条件">
</div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>用户名</th>
<th>添加时间</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in userList" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
{{item.addDateTime}}
</td>
<td>
<a href="#" @click='deleteUserData(index)'>删除</a>
</td>
</tr>
<tr v-if="userList.length===0">
<td colspan="4">没有用户数据</td>
</tr>
<!-- 动态生成内容tr -->
</table>
</div>
</div>
</body>
<script>
var vm = new new Vue({
el: '#app',
data: {
userList: [{
id: 1,
name: '张三',
addDateTime: new Date()
}, {
id: 2,
name: '李四',
addDateTime: new Date()
}, {
id: 3,
name: '王五',
addDateTime: new Date()
}, ]
},
methods: {
deleteUserData(i) {
// 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,
// 并以数组形式返回被修改的内容。 此方法会改变原数组。
// 参数1:指定修改的开始位置(从0计数)
// 参数2:表示要移除的数组元素的个数。
this.userList.splice(i, 1)
}
}
})
</script>