vue.js基本语法的使用

最新推荐文章于 2024-05-10 16:55:05 发布

LXQQXL123

最新推荐文章于 2024-05-10 16:55:05 发布

阅读量57

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/LXQQXL123/article/details/113756574

版权

El挂载点

El:是用来设置vue实例挂载（管理）的元素。
Vue实例的作用范围：vue会管理el选项命中的元素及其内部的后代元素。
是否可以使用其他的选择器：可以，一般建议用id，因为id是唯一的
是否可以设置其他的DOM元素：可以使用其他的双标签，不能使用HTML和BODY。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>el:挂载点</title>
	</head>
	<body>
		<h2 id="app" class="app">
			{{message}}
		</h2>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
				var app =new Vue({
					 el:"#app",
					// el:".app",
					// el:"div",
					data:{
						message:"嘿"
					}
				})
		
		</script>
	</body>
</html>

Data数据对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>data数据</title>
	</head>
	<body>
		<div id="app">
			{{message}}
			<h2>{{school.name}}  {{school.mobile}}</h2>
			<ul>
				<li>{{campus[0]}}</li>
				<li>{{campus[1]}}</li>
				<li>{{campus[2]}}</li>
				<li>{{campus[3]}}</li>	
			</ul>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:"hahahahaha",
					school:{
						name:"lxq",
						mobile:"18115164454",
					},
					campus:["前端","后端","数据库","测试","产品"]
				}
			})
			
		</script>
	</body>
</html>

v-text指令

v-text指令的作用是：设置标签的内容（textcontent）。

默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。

内部支持写表达式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-text指令</title>
	</head>
	<body>
		<div id="app">
			<h2 v-text="message+'!'">深圳</h2>
			<h2 v-text="info+'!'">深圳</h2>
			<h2>{{message+'!'}}深圳</h2>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					message:"lxq...",
					info:"工具开发小组"
				}
			})
			
		</script>
	</body>
</html>

v-html指令

v-html指令的作用：设置元素的innerHTML。

内容中HTML结构会被解析为标签。

v-text指令无论内容是什么，只会解析成文本。

解析文本使用v-text,需要解析html结构使用v-html。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-html指令</title>
	</head>
	<body>
		<!-- html结构 -->
		<div id="app">
			<p v-html="content"></p>
			<p v-text="content"></p>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					// content:"lxq"
					content:"<a href='https://www.zhihu.com/'>知乎</a>"
				}
				
			})
		</script>
	</body>
</html>

v-on命令指令

v-on指令的作用是:为元素绑定事件。

事件名不需要写on。

指令可以简写为@。

绑定的方法定义在methods属性中。

方法内部通过this.关键字访问定义在data中数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on命令基础</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="v-on指令" v-on:click="dolt" />
			<input type="button" value="v-on指令" @click="dolt" />
			<input type="button" value="双击事件" @dblclick="dolt" />
			<h2 @click="changefood">{{ food }}</h2>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					food:"酸菜鱼"
				},
				methods:{
					dolt:function(){
						alert("做前端")
					},
					changefood:function(){
						//console.log(this.food);
						this.food+="好好吃"
					}
				},
				
			})
		</script>
	</body>
</html>

计数器案例

Data中定义数据：比如num

methods中添加两个方法：比如add(递增),sub(递减)

使用v-text将num设置给span标签。

使用v-on将add,sub分别绑定给+，-按钮

累计的逻辑加：小于10累加，否则提示。

累计的逻辑减：大于0累加，否则提示。

创建vue示例时：el(挂载点)、data(数据)、methos(方法)。

v-on指令的作用是绑定事件，简写为@。

方法中通过this关键字获取data中的数据。

v-text指令的作用是：设置元素的文本值，简写为{{}}。

v-html指令的作用是：设置元素的innerHTML。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器</title>
	</head>
	<body>
		<div id="app">
			<button type="button" value="-" @click="sub">-</button>
			<span>{{num}}</span>
			<button type="button" value="+" @click="add">+</button>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app= new Vue({
				el:"#app",
				data:{
					num:1
				},
				methods:{
					add:function(){
						console.log('add');
						if(this.num<10){
							this.num++;
						}else{
							alert("最多添加10件商品");
						}
						
					},
					sub:function(){
						console.log('sub');
						if(this.num>0){
							this.num--;
						}else{
							alert("最少加入一件商品");
						}
						
					}
				}
			})
		</script>
		
	</body>
</html>

v-show指令

v-show指令的作用是：根据真假切换元素的显示状态。

原理是修改元素的display,实现显示隐藏。

指令后面的内容，最终都会解析为布尔值。

值为True元素显示，值为false元素隐藏。

数据改变之后，对应元素的显示状态会同步更新。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-show指令</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换隐藏图片" @click="chageisShow"></input>
			<input type="button" value="累加年龄" @click="addage" />
			<img alt="" v-show="isShow" src="imgs/logo.jpg" />
			<img alt="" v-show="age>=18" src="imgs/logo.jpg" />
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					isShow:false,
					age:17
				},
				methods:{
					chageisShow:function(){
						this.isShow=!this.isShow;
					},
					addage:function(){
						this.age++;
					}
				}
			})
		</script>
	</body>
</html>

v-if指令

v-if指令的作用是：根据表达式的真假切换元素的显示状态。

本质是通过操纵dom元素来切换显示状态。

表达式的值为true，元素存在于dom树中，为false,从DOM树中移除。

频繁的切换v-show,反之使用v-if，前者的切换消耗小。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if指令</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换" @click="toggleIsShow" />
			<p v-show="isShow">vue前端学习-v-show修饰</p>
			<p v-if="isShow">vue前端学习 </p>
			<h1 v-if="temperature>=35">今天好热</h1>

		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app= new Vue({
				el:"#app",
				data:{
					isShow:false,
					temperature:38
				},
				methods:{
					toggleIsShow:function(){
						this.isShow=!this.isShow;
					}
				}
			})
		</script>
	</body>
</html>

LXQQXL123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js基本语法的使用

目录El挂载点Data数据对象v-text指令v-html指令v-on命令指令计数器案例v-show指令v-if指令El挂载点El:是用来设置vue实例挂载（管理）的元素。 Vue实例的作用范围：vue会管理el选项命中的元素及其内部的后代元素。是否可以使用其他的选择器：可以，一般建议用id，因为id是唯一的是否可以设置其他的DOM元素：可以使用其他的双标签，不能使用HTML和BODY。<!DOCTYPE html><html&.
复制链接

扫一扫