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

文章目录

1、引言
2、内容绑定，事件绑定

2.1 简单计数器应用

3、显示切换，属性绑定
4、列表循环，表单元素绑定

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.csdn.net/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递减，否则提示“不能再减了！”

ps:目前主要还是学的方法，所以没有去整理css，用的原生态的样子

<!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>