Vue.js（学习Vue3之前必须要掌握的知识）

文章目录第一个Vue程序el挂载点data数据对象v-textv-htmlv-on计数器v-showv-ifv-bind图片切换v-forv-on自定义参数v-model双向绑定记事本axios+vue_01axios+vue_02第一个Vue程序在html文件中导入相关js文件<script src="https://cd

不易撞的网名

3389人浏览 · 2022-03-20 15:36:07

不易撞的网名 · 2022-03-20 15:36:07 发布

文章目录

第一个Vue程序

在html文件中导入相关js文件

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

创建一个html文件

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

el挂载点

什么意思呢？就是vue的作用域在哪个位置，阅读以下图片

我们可以知道，只有在id选择器中的message才有效输出对应的内容，其中el挂载点选择的就是id选择器

但是当然可以使用class选择器，这时的el属性值就需要写成 .app

data数据对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			{{message}}
			
			<h2>{{school.name}} {{school.phone}}</h2>
			
			<ul>
				<li>{{campus[0]}}</li>
				<li>{{campus[1]}}</li>
			</ul>
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					message:"Happy Study",
					school:{
						name:"小六",
						phone:"13688885555"
					},
					campus:["北京校区","上海校区"]
				}
			})
		</script>
	</body>
</html>

v-text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></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@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					message:"World Hello",
					info:"好好学习"
				}
			})
		</script>
	</body>
</html>

v-html

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

v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">	
			<input type="button" value="v-on指令" v-on:click="doIt()" />
		    <input type="button" value="v-on指令简写" @click="doIt()" />
				
			<input type="button" value="双击事件" @dblclick="doIt()" />
			
			
			<h2 @click="changeFood()">{{food}}</h2>
				
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					food:"nice"
				},
				methods:{
					doIt:function(){
						alert("做IT");
					},
					changeFood:function(){
						// console.log(this.food);
						this.food+="big good"
					}
				}
			})
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5tJ2CVPz-1647761617498)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320104416762.png)]

计数器

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

v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">	
			<input type="button" @click="changeIsShow()" value="点击我" />
			<img v-show="isShow" src="./img/007.jpg"/>
		
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow:function(){
						this.isShow=!this.isShow
					}
				}
				
			})
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MkubvM3O-1647761617499)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320110914353.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xnqqWvMQ-1647761617499)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320110919261.png)]

v-if

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<body>
			
			<div id="app">	
				<input type="button" value="切换显示" @click="toggleIsShow()"/>
				<p v-if="isShow">World Hello v-if</p>
				<p v-show="isShow">World Hello v-show</p>
				
				<h2 v-if="temperature>35">re</h2>
			</div>
			
			
			<!-- 开发环境版本，包含了有帮助的命令行警告 -->
			<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
			<script type="text/javascript">
				var app = new Vue({
					el:"#app",
					data:{
						isShow:false,
						temperature:40
					},
					methods:{
						toggleIsShow:function(){
							this.isShow=!this.isShow
						}
						
					}
					
				})
			</script>
		</body>
	</html>

v-bind

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<style type="text/css">
				.active{
					border: 1px solid red;
				}
			</style>
		</head>
		<body>
			
			<div id="app">	
				<img v-bind:src="imgSrc" >
				
				<img :src="imgSrc" >
				
				<img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggleActive()">
				
				<img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="toggleActive()">
				
				
			</div>
			
			
			<!-- 开发环境版本，包含了有帮助的命令行警告 -->
			<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
			<script type="text/javascript">
				var app = new Vue({
					el:"#app",
					data:{
						imgSrc:"https://img1.baidu.com/it/u=1706907849,2908816773&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
						imgTitle:"World Hello",
						isActive:false
					},
					methods:{
						toggleActive:function(){
							this.isActive=!this.isActive
						}
						
					}
					
				})
			</script>
		</body>
	</html>

图片切换

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<style type="text/css">
				.active{
					border: 1px solid red;
				}
			</style>
		</head>
		<body>
			
			<div id="app">	
				<img :src="imgArr[index]">
				
				
				
				<a href="#" @click="prev" v-show="index!=0">上一张</a>
				
				<a href="#" @click="next" v-show="index<imgArr.length-1">下一张</a>
				
			</div>
			
			
			<!-- 开发环境版本，包含了有帮助的命令行警告 -->
			<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
			<script type="text/javascript">
				var app = new Vue({
					el:"#app",
					data:{
						imgArr:[
							"http://pic.qianye88.com/4kcc02c5a43b1-928d-31af-ab11-dc9c818b5126.jpg?imageMogr2/thumbnail/x300/quality/90!",
							"http://pic.qianye88.com/pic/0fb4d4b22f5a8b0da2fa2ade8572c263.jpg?imageMogr2/thumbnail/x300/quality/90!",
							"http://pic.qianye88.com/4kdongman4f6415e5-cf59-3361-8f47-fac263a198f7.jpg?imageMogr2/thumbnail/x300/quality/90!"
						],
						index:0
					},
					methods:{
						prev:function(){
							this.index--
							
						},
						next:function(){
							this.index++
						}
						
					}
					
				})
			</script>
		</body>
	</html>

v-for

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<style type="text/css">
				.active{
					border: 1px solid red;
				}
			</style>
		</head>
		<body>
			
			<div id="app">	
				<ul>
					<li v-for="item in arr">World Hello：{{item}}</li>
				</ul>
				
				<ul>
					<li v-for="(item,index) in arr">
					{{index+1}}	World Hello：{{item}}</li>	 
				</ul>
				
				
				
				<input type="button" value="添加" @click="add()" />
				<input type="button" value="移除"  @click="remove()"/>
				<h2 v-for="item in vegetables" v-bind:title="item.name">
					{{item.name}}
				</h2>
			</div>
			
			
			<!-- 开发环境版本，包含了有帮助的命令行警告 -->
			<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
			<script type="text/javascript">
				var app = new Vue({
					el:"#app",
					data:{
						arr:["世界1","世界2","世界3","世界4","世界5"],
						vegetables:[
							{name:"白菜"},
							{name:"大白菜"}
						]
					},
					methods:{
						add:function(){
							this.vegetables.push({name:"nice"})
						},
						remove:function(){
							this.vegetables.shift();
						}
					}
					
				})
			</script>
		</body>
	</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DZkMThpJ-1647761617500)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320115052081.png)]

v-on自定义参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<input type="button" value="点击" @click="doIt(666,'好')" />
			
			<input type="text" @keyup.enter="sayHi()" />
			
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					doIt:function(p1,p2){
						console.log("it");
						console.log(p1);
						console.log(p2);
					},
					sayHi:function(){
						alert("吃了没？")
					}
				}
			})
		</script>
	</body>
</html>

v-model双向绑定

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		
			<input type="text" v-model="message" @keyup.enter="getMessage()" />
			
			<h2>{{message}}</h2>
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"nice"
				},
				methods:{
					getMessage:function(){
						alert(this.message)
					},
					
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<input type="button" value="修改message" @click="setMessage()" />
			
			
			<input type="text" v-model="message" @keyup.enter="getMessage()" />
			
			<h2>{{message}}</h2>
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"nice"
				},
				methods:{
					getMessage:function(){
						alert(this.message)
					},
					setMessage:function(){
						this.message="辣条"
					}
				}
			})
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QF3HOpzh-1647761617502)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320141420379.png)]

记事本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			
			<input type="text" v-model="inputValue" @keyup.enter="add()"/>
			
			<ul>
				<li v-for="(item,index) in list">
					<div>
						<span>{{index+1}}</span>
						<label>{{item}}</label>
						<button @click="remove(index)">删除</button>
					</div>
				</li>
			</ul>
			
			<span>笔记条数：{{list.length}}</span>
			
			<button @click="clear()" v-if="list.length!=0">Clear All</button>
			
			
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					list:["敲代码","big nice"],
					inputValue:"好好学习"
				},
				methods:{
					add:function(){
						this.list.push(this.inputValue)
					},
					remove:function(index){
						this.list.splice(index,1);
					},
					clear:function(){
						this.list=[];
					}
				}
			})
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Se6QaonF-1647761617502)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320142940157.png)]

axios+vue_01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<input type="button" value="获取笑话" @click="getJoke"/>
			
			<p>{{joke}}</p>
			
		</div>
		
		
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					joke:"nice"
				},
				methods:{
					getJoke:function(){
						var that = this
						axios.get("https://autumnfish.cn/api/joke").then
						(function(response){
							console.log(response.data)
							that.joke=response.data
						},function(err){
							
						})
					}
				}
			})
		</script>
	</body>
</html>

axios+vue_02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<input type="text" v-model="city" @keyup.enter="searchWeather()" />
			<a @click="changeCity('北京')">北京</a>
			<a @click="changeCity('上海')">上海</a>
			<a @click="changeCity('广州')">广州</a>
			<a @click="changeCity('深圳')">深圳</a>
			<ul>
				<li v-for="item in weatherList">
					<div>{{item.type}}</div>
					<div>
						<b>{{item.low}}</b>
						
						<b>{{item.high}}</b>
					</div>
					<div>{{item.date}}</div>
				</li>
			</ul>
			
			
			
		</div>
		
		
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script src="./js/main.js"></script>
	</body>
</html>

Js代码

 

var  app = new Vue({
	el:"#app",
	data:{
		city:'',
		weatherList:[]
	},
	methods:{
		searchWeather:function(){
			
			//因为是回调函数，此时下边this已经改变了 所以需要保存上边的this
			var that = this;
			
			
			axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city).then
			(function(response){
				
				console.log(response.data.data.forecast);
				that.weatherList=response.data.data.forecast
				
			})
			.catch(function(err){})
		},
		changeCity:function(city){
			this.city=city;
			this.searchWeather();
		}
	}
	
	
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^