2020 零基础 Vue快速入门 Vue指令本地应用篇【整理】

最新推荐文章于 2024-12-04 07:00:00 发布

原创最新推荐文章于 2024-12-04 07:00:00 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

Vue 全家桶专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解Vue.js中的各种指令，包括内容绑定、事件绑定、显示切换、属性绑定、列表循环及表单元素绑定等，通过实例演示如何使用v-text、v-html、v-on、v-show、v-if、v-bind、v-for和v-model等指令。

文章目录

1、引言

本地应用：

通过Vue实现常见的网页效果
学习Vue指令，以案例巩固知识点
Vue指令指的是，以v-开头的一组特殊语法

2、内容绑定，事件绑定

① v-text指令

能替换整个标签的内容，另字符串拼接格式详见代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3 v-text="message+'!'"> 你好，Vue</h3>
			<h3>{{message+'!'}} 你好，Vue</h3>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					message: "Hello Vue"
				}
			});
		</script>
		
	</body>
</html>

② v-html指令

能解析html内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-html='content'></p>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					content: '<a href="https://blog.youkuaiyun.com/weixin_42429718">点击进入博主主页并关注！</a>'
				}
			});
		</script>
		
	</body>
</html>

v-on指令

为元素绑定事件
但是我们平常更习惯性的把v-on:直接替换为@ 方便写也方便记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="点击事件" @click="clickIt"/>
			<h3 @click="clickIt">{{message}}</h3>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					message:"点击一下?"
				},
				methods:{
					clickIt:function(){
						this.message+="点个关注呗~"
					}
				}	
			});
		</script>
	</body>
</html>

2.1 简单计数器应用
步骤：

1.data中定义数据：比如num
2.methods中添加两个方法：比如add（递增），sub（递减）
3.使用v-text将num设置给span标签
4.使用v-on将add和sub分别绑定给+,-按钮
5.累加的逻辑：小于10累加，否则提示“不能再加了！”
6.递减的逻辑：大于0递减，否则提示“不能再减了！”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="add">+</button>
			<span>{{num}}</span>
			<button @click="sub">-</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					num:1
				},
				methods:{
					add:function(){
						if(this.num<10){
							this.num++
						}else{
							alert('不能再加了！')
						}
					},
					sub:function(){
						if(this.num>0){
							this.num--
						}else{
							alert('不能再减了！')
						}
					}
				}
			});
		</script>
	</body>
</html>

3、显示切换，属性绑定

v-show指令

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

ps:下面就展示一个例子，用到了上一章讲到的事件绑定，可以进行图片显示或隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<img src="https://s2.ax1x.com/2019/06/14/V5R7od.png" v-show="isShow"/>
			<img src="https://s2.ax1x.com/2019/06/14/V5R7od.png" v-show="age>=18"/>
			<button @click="cc">点击显示或隐藏</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					isShow:false,
					age:16
				},
				methods:{
					cc:function(){
						this.isShow=!this.isShow
					}
				}
			});
		</script>
	</body>
</html>

v-if指令

根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）

表面上和v-show差不多，但是实际上有点区别：
具体详细如下：

v-show操纵的是display 看这个标签显示不显示

而v-if操纵的是标签如果为false 则会删除这整个标签（也就是html不会显示这个标签）然后v-show则不会

v-bind指令

使用方式：
v-bind:属性名=表达式

但vue里面我们能够省去v-bind 即为 :属性名=表达式的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.active{
				border: 5px solid orangered;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img :src="imgSrc" :title="imgTitle+'!'" @click="cclick" :class="{active:isActive}"/>
		</div> 
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					imgSrc:"https://s2.ax1x.com/2019/06/14/V5R7od.png",
					imgTitle:"追风筝的人",
					isActive:false
				},
				methods:{
					cclick:function(){
						this.isActive=!this.isActive
					}
				}
			});
		</script>
	</body>
</html>

4、列表循环，表单元素绑定

v-for指令
根据数据生成列表结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<li v-for="(item,index) in array">
				{{item}}
			</li>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					array:['计算机','市场营销','信息管理','医学信息工程']
				}
			});
		</script>
	</body>
</html>

v-on补充

ps:我们可以通过回车键来绑定事件，还可以进行参数传递，具体如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="点击事件" @click="cclick('yangchaoyi')"/>
			<input type="text" @keyup.enter="hello" />
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				methods:{
					cclick:function(p1){
						alert('你好! '+p1);
					},
					hello:function(){
						alert('Hello');
					}
				}
			});
		</script>
	</body>
</html>

v-model指令

获取和设置表单元素的值（双向数据绑定）
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Vue程序</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="setMessage" value="设置message值" />
			<input type="text" v-model="message" @keyup.enter="getMessage">
			<h3>{{message}}</h3>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data:{
					message:'一百个Chocolate'
				},
				methods:{
					getMessage:function(){
						alert(this.message);
					},
					setMessage:function(){
						this.message="你好 Vue !";
					}
				}
			});
		</script>
		
	</body>
</html>