Vue 入门

栀栀栀

已于 2024-06-22 21:35:01 修改

阅读量601

点赞数 16

文章标签： vue.js 前端 javascript

于 2024-03-23 20:51:34 首次发布

本文链接：https://blog.csdn.net/yesyesyes_yes/article/details/136967992

版权

什么是Vue

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。

Vue.js文件的下载

安装 — Vue.js (vuejs.org)

Vue快速入门

1.新建HTML页面，引入Vue.js文件

2.在JS代码区域，创建Vue核心对象，定义数据模型

3.编写视图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src='js/vue.js'></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="message">
			{{message}}
		</div>
	</body>
	
	<script>
		// 定义Vue
		new Vue({
			el:"#app",
			data:{
				message:"Hello"
			}
		})
	</script>
</html>

插值表达式：{{}}

Vue常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href,css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

<!-- v-bind v-model 的例子 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src='js/vue.js'></script>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="url">1</a>
			<a v-bind:href="url">2</a>
			
			<input type="text" v-model="url">
		</div>
	</body>
	
	<script>
		// 定义Vue
		new Vue({
			el:"#app",
			data:{
				url:"https://www.baidu.com"
			}
		})
	</script>
</html>

<!-- v-on -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src='js/vue.js'></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="点一下" v-on:click="handle()">
		</div>
	</body>
	
	<script>
		// 定义Vue
		new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				handle:function(){
					alert("你~干~嘛~")
				}
			}
		})
	</script>
</html>

<!-- v-show v-if -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src='js/vue.js'></script>
	</head>
	<body>
		<div id="app">
			年龄<input type="text" v-model="age">经判定，为
			<span v-if="age<=35">年轻人(小于35)</span>
			<span v-else-if="age<=60&&age>35">中年人(小于35，大于60)</span>
			<span v-else="age>60">老年人(大于60)</span>
			
			</br>
			
			年龄<input type="text" v-model="age">经判定，为
			<span v-show="age<=35">年轻人(小于35)</span>
			<span v-show="age<=60&&age>35">中年人(小于35，大于60)</span>
			<span v-show="age>60">老年人(大于60)</span>
		</div>
	</body>
	
	<script>
		// 定义Vue
		new Vue({
			el:"#app",
			data:{
				age:30
			},
			methods:{
				
			}
		})
	</script>
</html>

<!-- v-for -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src='js/vue.js'></script>
	</head>
	<body>
		<div id="app">
			<div v-for="(addr,index) in addrs">{{addr}}</div>
			
			<hr>
			
			<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>
		</div>
	</body>
	
	<script>
		// 定义Vue
		new Vue({
			el:"#app",
			data:{
				addrs:["辽宁","上海","北京"]
			},
			methods:{
				
			}
		})
	</script>
</html>

Vue生命周期

Vue对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

<!-- mounted演示 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src='js/vue.js'></script>
	</head>
	<body>
		<div id="app">
			
		</div>
	</body>
	
	<script>
		// 定义Vue
		new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				
			},
			mounted() {
				alert("vue挂载完成，发送请求到服务端")
			}
		})
	</script>
</html>

案例

<!-- 通过Vue完成表格数据的渲染展示 -->
<!-- gender:1男 2女 -->
<!-- score:>=85优秀  >=60及格  <60不及格 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></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="center" v-for="(user,index) in users">
					<td>{{index+1}}</td>
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
					<td>
						<span v-if="user.gender==1">男</span>
						<span v-else="user.gender==2">女</span>
					</td>
					<td>{{user.score}}</td>
					<td>
						<span v-if="user.score>=85">优秀</span>
						<span v-else-if="user.score>=60">及格</span>
						<span style="color: red;" v-else>不及格</span>
					</td>
				</tr>
			</table>
		</div>
	</body>
	
	<script>
		// 定义Vue
		new Vue({
			el:"#app",
			data:{
				users:[
					{name:"Tom",
					age:20,
					gender:1,
					score:78
					},
					
					{name:"Rose",
					age:18,
					gender:2,
					score:86
					},
					
					{name:"Jerry",
					age:26,
					gender:1,
					score:90
					},
					
					{name:"Tony",
					age:30,
					gender:1,
					score:52
					}
				]
			},
			methods:{
				
			}
		})
	</script>
</html>