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

小鱼儿 2023-09-30 10:08 12阅读 0赞

#### 文章目录 ####

*   *  第一个Vue程序
     *  el挂载点
     *  data数据对象
     *  v-text
     *  v-html
     *  v-on
     *  计数器
     *  v-show
     *  v-if
     *  v-bind
     *  图片切换
     *  v-for
     *  v-on自定义参数
     *  v-model双向绑定
     *  记事本
     *  axios+vue\_01
     *  axios+vue\_02

### 第一个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的作用域在哪个位置，阅读以下图片

![image-20220320101102665][]

我们可以知道，只有在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>

![image-20220320102211169][]

--------------------

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

![image-20220320103323199][]

--------------------

### 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)\]][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-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)\]][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>

![image-20220320111454746][]

![image-20220320111459896][]

--------------------

### 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)\]][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>

![image-20220320141203303][]

--------------------

<!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)\]][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)\]][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>

![image-20220320144619553][]

--------------------

### 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代码

![image-20220320151444159][]

[image-20220320101102665]: https://img-blog.csdnimg.cn/img_convert/3902911e33717ffc10532df2e8063d00.png
[image-20220320102211169]: https://img-blog.csdnimg.cn/img_convert/cd7495e8efb3ecb088c4471588acb45f.png
[image-20220320103323199]: https://img-blog.csdnimg.cn/img_convert/89dcbd64ee58a66f6fb9c815f384e630.png
[img-5tJ2CVPz-1647761617498_https_raw.githubusercontent.com_qiyuank_MyTypore_master_img_image-20220320104416762.png]: https://img-blog.csdnimg.cn/d63c1379cbb74b01aa47d4c98f3fc279.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiD5a-75YyX6YeM,size_20,color_FFFFFF,t_70,g_se,x_16
[img-MkubvM3O-1647761617499_https_raw.githubusercontent.com_qiyuank_MyTypore_master_img_image-20220320110914353.png]: https://img-blog.csdnimg.cn/d71cd6bfc25a47cdbc791c101697c3c8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiD5a-75YyX6YeM,size_20,color_FFFFFF,t_70,g_se,x_16
[img-xnqqWvMQ-1647761617499_https_raw.githubusercontent.com_qiyuank_MyTypore_master_img_image-20220320110919261.png]: https://img-blog.csdnimg.cn/b75ed667d79e4371bb59a346aea7a379.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiD5a-75YyX6YeM,size_20,color_FFFFFF,t_70,g_se,x_16
[image-20220320111454746]: https://img-blog.csdnimg.cn/img_convert/534069fd83eec1bd374b7cbe278c2303.png
[image-20220320111459896]: https://img-blog.csdnimg.cn/img_convert/b2e462cdfd593c18471346d05109dd98.png
[img-DZkMThpJ-1647761617500_https_raw.githubusercontent.com_qiyuank_MyTypore_master_img_image-20220320115052081.png]: https://img-blog.csdnimg.cn/6625a092450c4f9cb3a5e0b95e41ae02.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiD5a-75YyX6YeM,size_18,color_FFFFFF,t_70,g_se,x_16
[image-20220320141203303]: https://img-blog.csdnimg.cn/img_convert/85e9c12a3939fb47fefcd769d6a662b3.png
[img-QF3HOpzh-1647761617502_https_raw.githubusercontent.com_qiyuank_MyTypore_master_img_image-20220320141420379.png]: https://img-blog.csdnimg.cn/bd558546587b47a5b36c7fa91ad4bf60.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiD5a-75YyX6YeM,size_20,color_FFFFFF,t_70,g_se,x_16
[img-Se6QaonF-1647761617502_https_raw.githubusercontent.com_qiyuank_MyTypore_master_img_image-20220320142940157.png]: https://img-blog.csdnimg.cn/0d724284095b4cebbd84c2efc56b08a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiD5a-75YyX6YeM,size_20,color_FFFFFF,t_70,g_se,x_16
[image-20220320144619553]: https://img-blog.csdnimg.cn/img_convert/957b705cb99f382e2a0410d0007c508d.png
[image-20220320151444159]: https://img-blog.csdnimg.cn/img_convert/61990e8e7f0cec8462d0f99f5a467af9.png