初始Vue

最新推荐文章于 2024-11-12 23:16:45 发布

yananye

最新推荐文章于 2024-11-12 23:16:45 发布

阅读量228

点赞数

文章标签： vue js html

本文链接：https://blog.csdn.net/yananye/article/details/119535906

版权

简介

Vue框架以其简单易学并且渐进式的特点深受开发者的喜爱，无论是中小型项目还是大型项目都可以使用Vue框架来开发，在前端领域非常流行。

Vue框架

在这里插入图片描述

MVVM模式

简介

在这里插入图片描述
优势

在这里插入图片描述
使用Vue

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>初始Vue</title>
		<!--引入Vue.js-->
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
	</head>
	<body>
		<!--引入vue.js文件
			设置vue视图区域，用于展示vue数据
			创建vue对象，提供Vue数据及Vue控制代码
		-->
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",//设置绑定的视图区域
				data:{
						msg:"你好 Vue！"
					} //设置当前Vue对象的model数据
			});
		</script>
	</body>
</html>

结果
在这里插入图片描述
代码实现原理

插值表达式
在这里插入图片描述
使用

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>插值表达式</title>
		<!--引入Vue.js-->
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
	</head>
	<body>
		<!--引入vue.js文件
			设置vue视图区域，用于展示vue数据
			创建vue对象，提供Vue数据及Vue控制代码
		-->
		<div id="app">
			<!--json数据-->
			{{msg}} <br />
			<!--字符串-->
			{{"你好"}} <br />
			<!--表达式-->
			{{2+3}} <br />
			<!--三元运算-->
			{{3>2?"你很聪明":"你是傻子"}} <br />
			{{3>2}} <br />
			{{"哈哈"+"哈哈"}}
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",//设置绑定的视图区域
				data:{msg:"你好 Vue！"} //设置当前Vue对象的model数据
			});
		</script>
	</body>
</html>

结果
在这里插入图片描述
注意：带有引号的是普通文本，不带引号代表的表达式。

Vue指令

概念
在这里插入图片描述
v-if指令

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>v-if指令</title>
		<script type="text/javascript" src="vue-2.4.0.js" ></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="isShow">h1标签-1</h1>
			<h1 v-if="true">h1标签-2</h1>
			<h1 v-if="false">h1标签-3</h1>
			<h1 v-if="5>3">h1标签-4</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					isShow:true
				}
			});
		</script>
	</body>
</html>

运行结果
在这里插入图片描述
v-else指令

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>v-else指令</title>
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="isShow">h1标签-1</h1>
			<h1 v-else>h1标签-2</h1><!--不成立时显示-->
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					isShow:false
				}
			});
		</script>
	</body>
</html>

结果
因为isShow的值为false所以h1标签-2显示
在这里插入图片描述
v-show指令

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>v-show指令</title>
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
	</head>
	<body>
		<div id="app">
			<h1 v-show="isShow">h1标签-1</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					isShow:false
				}
			});
		</script>
	</body>
</html>

结果
在这里插入图片描述
可以发现v-if和v-show的使用很相似，两者都是条件渲染命令。区别如下

v-on指令

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>v-on指令</title>
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="dealClick">按钮1</button><br>
			<button @click="dealClick">按钮2</button><!--简写形式 -->
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					dealClick:function(){
						alert("点击按钮了")
					}
				}
			});
		</script>
	</body>
</html>

结果，点击两个按钮结果都一样。
在这里插入图片描述
v-bind指令

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>v-bind指令</title>
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
		<style type="text/css">
			.h1{
				color: red;
			}
			.h11{
				background-color: #666;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-bind:value="name" @click="dealClick"/>
			
			<!--简单写法-->
			<h1 :class="['h1','h11']">h1标签</h1>
			<h1 :class="'h1 h11'">h1标签</h1>
			<h1 :class="h1CSS">h1标签</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					name:"zhangsan",
					h1CSS:"h1 h11"
				},
				methods:{
					dealClick:function(){
						this.name="lisi";
						this.h1CSS="h1"
					}
				}
			});
		</script>
	</body>
</html>

结果
在这里插入图片描述单击输入框结果

v-model指令

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>v-model指令</title>
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="name"/> <br />
			{{name}}
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					name:"张三"
				}
			});
		</script>
	</body>
</html>

结果

如果在输入框中输入李四的话下面的也会自动改为李四
在这里插入图片描述
v-for指令

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>v-for指令</title>
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
	</head>
	<body>
		<div id="app">
			<h1 v-for="num in 4">h1--{{num}}</h1><br />
			<h1 v-for="(name,index) in names">{{name}}</h1><br /><!--数组-->
			<h1 v-for="(attrVal,attrName) in user">{{attrName}}:{{attrVal}}</h1><!--对象-->
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					names:["张三","李四","wangwu","zhangliu"],
					user:{name:"张三",sex:"男",age:22,address:"郑州"}
				}
				
			});
		</script>
	</body>
</html>

结果
在这里插入图片描述

Vue过滤器

在这里插入图片描述
示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>过滤器</title>
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
	</head>
	<body>
		<div id="app">
			<h1>价格：{{pirce|myFilter("$")}}</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					pirce:120.5
				},
				filters:{
					myFilter:function(oldData,p1){//参1: 始终为被处理的原始数据,不需要直接传参,由Vue自动传入.
						return p1+oldData;
					}
				}
			});
		</script>
	</body>
</html>

结果
在这里插入图片描述