关于vue
一、什么是vue?
1、官网https://cn.vuejs.org/
2、vue是一套前端框架,免除原生JS中的DMO操作,简化书写。
3、基于MVVM思想,实现数据的双向绑定,将编程的关注点放在数据上。
1、MVVM模型
二、vue快速入门
1、国内vue3.js
https://cdn.staticfile.org/vue/3.0.5/vue.global.js
直接打开,另保存就行了
2、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 3、将模型数据绑定到视图中-->
<div id="app">
<!-- {{message}}:插值表达式,将变量的值显示在标签内容体 -->
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
<!-- 1、引入vue.js文件 -->
<script src="js/vue.js"></script>
<!-- 创建vue对象,定义模型数据 -->
<script>
// 方法一
// new Vue({
// data(){
// return{
// //返回的就是模型数据
// message:"hello vue"
// }
// }
// })
//方法二
new Vue({
el:"#app",//定义Vue接管的区域,只有在这个区域,才可以使用vue的表达式获取数据
data:{
message:"hello vue"
}
})
</script>
</body>
</html>
三、vue的常用命令
1、v-bind和v-model(输入框)
案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/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>
</body>
<script>
// 定义vue
new Vue({
el: "#app",
data:{
url:"http://www.baidu.com"
}
})
</script>
</html>
2、v-on
案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">
</div>
</body>
<script>
// 定义vue对象
new Vue({
el:"#app",
data:{
},
methods:{
//此处定义事件绑定的函数,这些函数都是自定义函数
handle(){
console.log("被点击了");
}
}
})
</script>
</html>
3、v-if、v-else-if、v-else和v-show
案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 用v-if/v-else-if/v-else -->
年龄<input type="text" v-model="age">经判丁,为:
<span v-if="age<=35">年轻人(35及一下)</span>
<span v-else-if="age>35 && age<60">中年人(35-60)</span>
<span v-else>老年人(60以上)</span>
<br><br>
<!-- 用v-show
-->
年龄<input type="text" v-model="age">经判丁,为:
<span v-show="age<=35">年轻人(35及一下)</span>
<span v-show="age>35 && age<60">中年人(35-60)</span>
<span v-show="age>=60">老年人(60以上)</span>
</div>
</body>
<script>
//定义vue对象
new Vue({
el:"#app",
data:{
age:20
}
})
</script>
</html>
两者的区别是:
1、v-if 对条件判断,不符合的语句则不加载,减少空间占用
2、v-show 不符合的标签,也会加载,比较占用内存
4、v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
<!-- 遍历addrs数组,展示元素的值到p标签中 -->
<p v-for="addr in addrs"> {{addr}}</p>
<!-- 遍历addrs数组,展示索引和元素的值到p标签中 -->
<p v-for="(item,i) in addrs"> {{i+1}} {{item}}</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
addrs:["a","1","2","3"]
}
})
</script>
</html>
三、总结案例
做一个这样的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="content" v-for="(user, index) in users" :key="index">
<th>{{index+1}}</th>
<th>{{user.name}}</th>
<th>{{user.age}}</th>
<th>{{user.gender==1?"男":"女"}}</th>
<th>{{user.score}}</th>
<th v-if="user.score<60" style="color: red;">不及格</th>
<th v-else-if="user.score>=60&& user.score<80">及格</th>
<th v-else>优秀</th>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
users:[{
name:"Tom",age:20,gender:1,score:78
},{
name:"shirly",age:18,gender:2,score:86
},{
name:"liming",age:18,gender:2,score:35
}]
}
})
</script>
</html>