vue学习（1）—— vue的指令

Yacht13

已于 2022-09-22 16:26:47 修改

阅读量319

点赞数

分类专栏： vue 文章标签： vue

于 2022-09-22 16:16:00 首次发布

本文链接：https://blog.csdn.net/Archer__13/article/details/126990921

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

引入vue

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->

1. el和data

el用来获取选择的元素，可以作用到选择的元素及其内部的后代元素

vue中用到的数据存放在data属性中

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	{{message}}
	<div id="content"> 
		{{message}}
		<p> {{message}} </p>
		<p> {{message + "!!!"}} </p>
		<p> 姓名：{{user.name}}， 年龄：{{user.age}} </p>
		<ul>  
			<li> {{hobby[0]}} </li>
			<li> {{hobby[1]}} </li>
			<li> {{hobby[2]}} </li>
		</ul>
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#content",
			data:{
				message:"hello",
				user:{
					name:"Tom",
					age:"20"
				},
				hobby:["Java", "C++", "Python"]
			}
		})
  </script>
</body>
</html>

2. v-text：设置标签的文本内容

简化的形式是{{ }}

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	<div id="content"> 
		<p v-text="message"> </p>
		<p v-text="user.name"> </p>
		<p v-text="hobby[0]"> </p>
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#content",
			data:{
				message:"hello",
				user:{
					name:"Tom",
					age:"20"
				},
				hobby:["Java", "C++", "Python"]
			}
		})
  </script>
</body>
</html>

3. v-html：设置标签的html内容

设置标签的内容为html格式

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	<div id="content"> 
		<p v-text="message"> </p>
		<p v-html="message"> </p>
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#content",
			data:{
				message:"<a href='http://www.baidu.com'>百度</a>"
			}
		})
  </script>
</body>
</html>

4. v-on：为元素绑定事件

可以简写为@

methods属性是编写函数，可以通过this关键字可以获取到data中的数据

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	<div id="btn"> 
		<input type="button" value="v-on单击事件" v-on:click="doIt">
		<input type="button" value="v-on简写形式" @click="doIt">
		<input type="button" value="双击事件" v-on:dblclick="doIt">
		
		<p v-on:click="changeName">{{name}}</p>
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#btn",
			data:{
				name:"Tom"
			},
			methods:{
				doIt:function(){
					alert("执行单击事件");
				},
				changeName:function(){
					this.name = "Mike"    //点击Tom之后，会变成Mike
				}
			}
		})
  </script>
</body>
</html>

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	<div id="test"> 
		<input type="button" value="获取输入的属性值" @click="getClick('Tom', 22)">
		<input type="text" value="回车输入" @keyup.enter="keyClick('Mike')">
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#test",
			methods:{
				getClick:function(attr1, attr2){
					alert(attr1);
					alert(attr2);
				},
				keyClick:function(attr1){
					alert(attr1);
				}
			}
		})
  </script>
</body>
</html>

5. v-show：是否显示内容

根据ture或者false切换元素的显示状态，true是显示，false不显示

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	<div id="show"> 
		<input type="button" value="切换显示状态" @click="changeIsShow">
		<p v-show="isShow"> 显示的内容 </p>
		
		<input type="button" value="增加年龄" @click="addAge">
		<p v-show="age >= 18"> 成年可显示 </p>
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#show",
			data:{
				isShow:false,
				age:17
			},
			methods:{
				changeIsShow:function(){
					this.isShow = !this.isShow;
				},
				addAge:function(){
					this.age++;
				}
			}
		})
  </script>
</body>
</html>

6. v-if：是否显示内容

根据表达式的真假，切换元素的显示和隐藏

与v-show效果相同，v-show操作的是样式，v-if操作的是dom对象

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	<div id="show"> 
		<input type="button" value="切换显示状态" @click="changeIsShow">
		<span v-if="isShow"> 显示的内容 </span>   </br>
		
		<input type="button" value="增加年龄" @click="addAge">
		<span v-if="age >= 18"> 成年可显示 </span>
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#show",
			data:{
				isShow:false,
				age:17
			},
			methods:{
				changeIsShow:function(){
					this.isShow = !this.isShow;
				},
				addAge:function(){
					this.age++;
				}
			}
		})
  </script>
</body>
</html>

7. v-bind：设置元素的属性

设置元素的属性，可以省略v-bind

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	<div id="show"> 
		<a v-bind:href="linkHref" v-bind:title="linkTitle">百度</a>   </br>
		<a :href="linkHref" :title="linkTitle">百度</a>   </br>
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#show",
			data:{
				linkHref:"http://www.baidu.com",
				linkTitle:"百度一下",
				isActive:false
			}
		})
  </script>
</body>
</html>

8. v-for：循环

根据数据生成列表结构

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	<div id="test"> 
		<ul>
			<li v-for="item in arr"> {{item}} </li>
			<li v-for="(item, index) in arr"> {{index}}, {{item}} </li>
		</ul>
		
		<p v-for="item in user"> 姓名：{{item.name}}，年龄：{{item.age}} </p>
		
		<input type="button" value="添加用户" @click="add">
		<input type="button" value="删除用户" @click="remove">
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#test",
			data:{
				arr:["Tom", "Jack", "Mike"],
				user:[{name:"张三", age:22}, {name:"李四", age:23}]
			},
			methods:{
				add:function(){
					this.user.push({name:"李红", age:22});
				},
				remove:function(){
					this.user.shift();
				}
			}
		})
  </script>
</body>
</html>

9. v-model：获取和设置表单元素的值

获取和设置表单元素的值，绑定的数据会和表单元素的值相关联

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
	<div id="test"> 
		<input type="text" v-model="name" @keyup.enter="getName">
	</div>
	
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--引入vue -->
	<script type="text/javascript">
		var app = new Vue({
			el:"#test",
			data:{
				name:"输入姓名"
			},
			methods:{
				getName:function(){
					alert(this.name);
				}
			}
		})
  </script>
</body>
</html>