Vue必备知识点(简单+快速上手Vue)

最新推荐文章于 2024-05-05 23:58:37 发布
最新推荐文章于 2024-05-05 23:58:37 发布
阅读量3k 收藏 31
点赞数 7
分类专栏： 前端案例 文章标签： html5 javascript css vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52258054/article/details/127000074
版权

文章目录

前言

Vue前端人员需看完整知识点体系，本知识点只是作为Vue入门，还有主要学习后端的，想了解Vue的，能上手简单的运用Vue的人群。如想要做前端开发，还需要学的更细致些。

基本介绍Vue：

1.Vue.js目前最火的的一个前端框架，三大主流前端框架之一。
2.Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。
3.提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。

一、Vue基础语法

        1.初学Vue

                Vue中hello案例的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue基础</title>
		
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el: "#app",
				data:{
					message: "你好Vue!"
				}
			})
		</script>
	</body>
</html>

第一步：引入Vue需要的资源：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 第二步：写一个div

<div id="app">
	{{ message }}
</div>

第三步： 在script标签中new一个Vue,在里面写相应的内容

        <script>
			var app=new Vue({
				el: "#app",
				data:{
					message: "你好Vue!"
				}
			})
		</script>

效果图： 

         2.初学Vue中的el:挂载点

挂载点说的就是如下图所示的红色框内的东西。

el:后面“ ”中放的是选择标签的id、class或标签。一般情况下都是用id选择器。

如图：

 代码及运行结果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>el:挂载点</title>
	</head>
	<body>
		<!-- el外部不会被执行 -->
		{{ message }}
		<div id="app" class="app">
			{{ message }}
			<p>{{ message }}</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				//三种选择器都可以用，但一般用id选择器。
				el:"#app",//id选择器
				// el:".app",类选择器
				// el:"div",标签选择器
				data:{
					message:"小白"
				}
			})
		</script>
	</body>
</html>

         3.初学Vue中的data:数据对象

 data:后面的{ }里的所有数据对象。

data:中可以存储字符串、对象、数组等。

对象获取的方法：对象名.  。

数组获取方法：数组名[index].

如图：

 代码及运行结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>data:数据对象</title>
	</head>
	<body>
		<div id="app">
			{{ message }}
			<h2>{{ school.class }} {{ school.student }}</h2>
			<ul>
				<li>{{ arr[0] }}</li>
				<li>{{ arr[1] }}</li>
				<li>{{ arr[2] }}</li>
				<li>{{ arr[3] }}</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					message:"你好，小黑！",
					school:{
						class:"1班",
						student:"张三"
					},
					arr:["数据库","java","ssm","springboot"]
				}
			})
		</script>
	</body>
</html>

二、本地运用

        1.v-text指令学习

v-text的用法：

相同点：<h2 v-text="message"></h2> 相当于  <h2>{{ message }}</h2>  

不同点：<h2 v-text="message"></h2>这样写获取message值时会覆盖h2中原有的内容。而后者不会覆盖。

如图：

这里的第二个方框中是差值表达式只是简单的“+”号举例子，在复杂的运用中我们还可以写语句等。

运行结果上图，代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-text学习</title>
	</head>
	<body>
		<div id="app">
			<h2 v-text="message">覆盖了标签内的值</h2>
			<h2>{{ info }}</h2>
			
			<h2>差值表达式:</h2>
			
			<h2 v-text="message+'学习'">覆盖了标签内的值</h2>
			<h2>{{ info }}学习</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					message:"Vue1",
					info:"Vue2"
				}
			})
		</script>
	</body>
</html>

      2. v-html指令学习

v-html和v-text差不多，只不过v-text是直接把内容输出，不会进行转义，而v-html是可以进行转义的。举个例子说明v-html的用法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-html指令</title>
	</head>
	<body>
		<div id="app">
			<!-- 解析标签 -->
			<p v-html="message"></p>
			<!-- 只是文本 -->
			<p v-text="message"></p>	
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					message:"<a href='/'>黑马</a>"
				}
			})
		</script>
	</body>
</html>

注意观察红色框内的不同： 

 运行结果，从运行结果我们可看出不同的地方：

        3.v-on指令学习

 v-on：后面是加事件的，如v-on:click，就是点击事件。当点击时，就会调用v-on:click=“函数名”中函数名用methods:里面定义该方法进行相应的操作。

v-on:可以简写为@符号代替：如@click=“函数名”。

如图所示：

 this是可以直接指向data数据对象中的数据，可以用this.food对data数据对象中的数据进行操作。

具体大家可以复制代码运行感受。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on指令(绑定事件)</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/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					food:"西红柿炒鸡蛋"
				},
				methods:{
					doIt:function(){
						alert("做It");
					},
					changeFood:function(){
						// 内部用this调用
						this.food+="好好吃!"
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

        4.计数器小练习 

练习不做讲解，都是上述知识点的总结，看不懂的可以多去学学上述知识点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器练习</title>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="sub">-</button>
			<span>{{ num }}</span>
			<button type="button" @click="add">+</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					num:0,
				},
				methods:{
					sub:function(){
						if(this.num>0){
							this.num--;
						}else{
							alert("被点了,已经是最小值！");
						}
					},
					add:function(){
						if(this.num<10){
							this.num++;
						}else{
							alert("被点了,已经是最大值！");
						}
						
					}
				}
			})
		</script>
	</body>
</html>

运行结果： 

         5.v-show指令学习

 v-show指令的作用是：根据真假切换元素的显示状态。

原理是修改元素的display，实现显示隐藏。

指令后面的内容，最终都会解析为布尔值。

值为true元素显示，值为false元素隐藏。

执行过程如图所示，v-show="可以填表达式"，下面因为age=17，就不会显示第二张图：

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-show指令</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="点我改变状态" @click="change()"/>
			<img v-show="isShow" src="../img/wzj.jpg" >
			<img v-show="age>=18" src="../img/wzj.jpg" >
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					isShow:false,
					age:17
				},
				methods:{
					change:function(){
						// 取反
						this.isShow=!this.isShow;
					}
				}
			})
		</script>
	</body>
</html>

运行结果，点击按钮图片进行隐藏，再次点击图片会显示：

         6.v-if指令学习

 v-if指令的作用是：根据表达式的真假切换元素的显示状态。

本质是通过操纵dom元素来切换显示状态。

表达式的值为true,元素存在dom树中，反之则从dom树中移除。

v-if和v-show一般在操作较多的时候会用v-show，因为v-show只是样式隐藏，标签还在。如果操作只一次，一般都会用到v-if。将标签移除。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if指令</title>
	</head>
	<body>
		<div id="app">
			<input type="button"  value="v-if指令" @click="flag()"/>
			<p v-if="isShow">v-if指令显示效果</p>
			<!-- 表达式 -->
			<p v-if="age>=18">age18才能显示</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					isShow:false,
					// 表达式也可以
					age:17
				},
				methods:{
					flag:function(){
						this.isShow=!this.isShow;
					}
				}
			})
		</script>
	</body>
</html>

运行截图，点击一次显示出的：

         7.v-bind指令学习

用来操作属性，如src

v-bind指令的作用是：为元素绑定属性。

完整写法是v-bind:属性名。

简写的话可以直接省略v-bind,只保留：属性名。

需要动态的增删class使用对象的方式。

代码解释：

 完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind指令</title>
		<style type="text/css">
			.active{
				border: 5px solid salmon ;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="imgSrc" >
			<!-- 可简写 -->
			<img :src="imgSrc" :title="imgtitle+'!!!'" :class="{active:is}" @click="isactive">
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					imgSrc:"../img/wzj.jpg",
					imgtitle:"四大美女",
					is:true
				},
				methods:{
					isactive:function(){
						this.is=!this.is;
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

         8.图片转换练习

 列表数据使用数组保存。

v-bind指令可以设置元素的属性，比如src.

v-show和v-if都可以切换元素的显示状态，频繁切换用v-show.

都是以前的知识点，代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换练习</title>
	</head>
	<body>
		<div id="app">
			<img :src="imgArr[index]" ><br>
			<input type="button"value="上一张" v-show="index!=0" @click="prev()"/>
			<input type="button"value="下一张" v-show="index<imgArr.length-1" @click="next()"/>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					imgArr:["../img/wzj.jpg","../img/dc.jpg","../img/xx.jpg","../img/yyh.jpg"],
					index:0
				},
				methods:{
					prev:function(){
						this.index--;
					},
					next:function(){
						this.index++;
					}
				}
			})
		</script>
	</body>
</html>

效果图，点击按钮就会切换到下一张图片：

         9.v-for指令

v-for指令的作用是：根据数据生成列表结构。

数组经常和v-for结合使用。

 语法是（i,index） in 数据。

i和index可以结合其他的指令一起使用。

数组长度的更新会同步到页面上，是响应式的。

代码运行流程：

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for指令</title>
	</head>
	<body>
		<div id="app">
			<input type="button"  value="添加数据" @click="add"/>
			<input type="button"  value="删除数据" @click="remove"/>
			<ul>
				<li v-for="(i,index) in arr">
					{{index+1}}想去的城市:{{ i }}
				</li>
			</ul>
			<h2 v-for="j in arr1">{{j.name}}</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					arr:["北京","上海","广州","深圳"],
					// 数组存储对象
					arr1:[
						{name:"张三"},{name:"李四"}
					]
				},
				methods:{
					add:function(){
                        //增加
						this.arr1.push({name:"王五"});
					},
					remove:function(){
                         //删除
						this.arr1.shift();
					}
				}
			})
		</script>
	</body>
</html>

效果图展示：

         10.v-on指令（补充）

事件绑定的方法写成函数调用的形式，可以传入自定义参数。

定义方法时需要定义形参来接收传入的实参 。

事件的后面跟上 .修饰符 可以对事件进行限制。

.enter可以限制触发的按键为回车。

修饰符有很多，具体用到在解释。

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on指令(补充)</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="问候语" @click="doIt('张三')"/>
			<input type="text" value="文本" @keyup.enter="sayHi"/>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				methods:{
					doIt:function(f1){
						console.log("你好:"+f1);
					},
					sayHi:function(){
						alert("写完了？");
					}
				}
			})
		</script>
	</body>
</html>

 运行效果图：

         11.v-model指令学习

双向数据绑定

v-model指令的作用是便捷的设置和获取表单元素的值。

绑定的数据会和表单元素值相关联

绑定的数据      双向      表单的值

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model指令</title>
	</head>
	<body>
		<div id="app">
			<input type="button"  value="点击修改" @click="setM()"/>
			<input type="text" v-model="message" @keyup.enter="getM()"/>
			<h2>{{ message }}</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					message:"好好学习，多敲代码"
				},
				methods:{
					getM:function(){
						alert(this.message);
					},
					setM:function(){
						this.message="多敲代码，好学习";
					}
				}
			})
		</script>
	</body>
</html>

运行结果，点击修改按钮修改message的值看其他表单上的message值是否发生变化：

表单到绑定的数据：

  绑定的数据到表单：

         12.记事本综合练习案例

记事本功能介绍：

1.新增：增加需要记录的事情。

2.删除：点击删除按钮删除该事情。

3.统计：统计所有事情显示到记事本上。

4.清空：点击清空按钮清空所有事情。

5.隐藏：清空后隐藏不必要的框框。

注意：一下案例都没有css修饰，我们只练习vue指令的用法，自己在练习时有时间可自行去修饰样式。

12.1新增

1.生成列表结构(v-for数组)

2.获取用户输入（v-model）

3.回车，新增数据(v-on  .enter 添加数据)

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记事本</title>
		<style type="text/css">
			.no{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<h2>记事本</h2>
		<div id="app">
			<input type="text" v-model="inputValue" @keyup.enter="add()"/>
			<ul class="no">
				<li v-for="(item,index) in list">
					{{index+1}}-----{{item}}
				</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					list:["吃饭","睡觉","打代码"],
					inputValue:"好好学习"
				},
				methods:{
					add:function(){
						this.list.push(this.inputValue);
					}
				}
			})
		</script>
	</body>
</html>

效果图：

12.2删除

1.数据改变，和数据绑定的元素同步改变

2.事件的自定义参数

3.splice删除数组元素的使用

 效果图，点击x就会删掉，并且同步更新循环：

12.3统计

基于数据的开发方式

 效果图，不管是删除还是添加，只要数组的长度发生变化值就会变：

12.4清空

本质上就是删除数组中的所有元素。

 效果图，点击clear后的：

12.5隐藏

没有数据时，隐藏元素（v-show  v-if  数组非空）

效果图，可以看到下方的计数条和清楚按钮没有了：

 12.6全部代码及总结

知识点总结：

1.列表结构可以通过v-for指令结合数据生成。

2.v-on结合事件修饰符可以对事件进行限制，比如 .enter

3.v-on在绑定事件时可以传递自定义参数

4.通过v-model可以快速的设置和获取表单元素的值

5.基于数据的开发方式

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记事本</title>
		<style type="text/css">
			.no{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<h2>记事本</h2>
		<div id="app">
			<input type="text" v-model="inputValue" @keyup.enter="add()"/>
			<ul class="no">
				<li v-for="(item,index) in list">
					{{index+1}}-----{{item}}------
					<button type="button" @click="remove(index)">x</button>
				</li>
			</ul>
			<p v-show="list.length!=0">
				<span v-text="list.length"></span> <span> items left ------</span> 
				<button type="button" @click="clear()">Clear</button>
			</p>
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					list:["吃饭","睡觉","打代码"],
					inputValue:"好好学习"
				},
				methods:{
					add:function(){
						this.list.push(this.inputValue);
					},
					remove:function(index){
						// 删除index索引值，删1个值
						this.list.splice(index,1);
					},
					clear:function(){
						this.list=[];
					}
				}
			})
		</script>
	</body>
</html>

三、网络运用

 1.axios基本使用

axios必须先导入才可以使用

使用get或post方法即可发送对应的请求

then方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容，或错误信息

官方文档：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.jsAxios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。Axios 使用简单,包尺寸小且提供了易于扩展的接口。https://www.axios-http.cn/

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios基本使用</title>
	</head>
	<body>
		<button type="button" class="get">get方式</button>
		<button type="button" class="post">post方式</button>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
		/*
			接口1：音乐信息
			请求地址：https://autumnfish.cn/comment/music
			请求方式：get
			请求参数:id=186016&limit=1
			相应内容：音乐信息
		*/
			document.querySelector(".get").onclick=function(){
				axios.get("https://autumnfish.cn/comment/music?id=186016&limit=1")
				.then(function(response){
					console.log(response);
				},function(err){
					console.log(err);
				})
			}
			/*
				接口2：电台信息
				请求地址：https://autumnfish.cn/dj/program
				请求方式：post
				请求参数:rid
				相应内容：电台信息
			*/
				document.querySelector(".post").onclick=function(){
					axios.post("https://autumnfish.cn/dj/program",{rid:12})
					.then(function(response){
						console.log(response);
					},function(err){
						console.log(err);
					})
				}
		</script>
	</body>
</html>

get响应回的数据效果图：

 

post响应回的数据效果图：

2.axios+Vue

axios回调函数中的this已经改变，无法访问到data中数据

把this保存起来，回调函数中直接使用保存的this即可

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios+vue</title>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="getmusic()">音乐信息</button>
			<p>{{music}}</p>
		</div>
		
		<!-- vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
		/*
			接口1：音乐信息
			请求地址：https://autumnfish.cn/comment/music
			请求方式：get
			请求参数:id=186016&limit=1
			相应内容：音乐信息
		*/
		var app=new Vue({
			el:"#app",
			data:{
				music:"这里有音乐信息"
			},
			methods:{
				getmusic:function(){
					var that=this;
					axios.get("https://autumnfish.cn/comment/music?id=186016&limit=1")
					.then(function(response){
						that.music=response.data.comments;
						console.log(response);
					},function(err){
						
					})
				}
			}
		})
		
			
			
		</script>
	</body>
</html>

 效果图：

3.综合练习案例

电台查询案例：

应用的逻辑代码建议和页面分离，使用单独的js文件编写。

axios回调函数中this指向改变了，需要额外的保存一份。

服务器返回的数据比较复杂时，获取的时候需要注意层次结构。

3.1回车查询

1.按下回车（v-on  .enter）

2.查询数据(axios 接口  v-model)

3.渲染数据（v-for  数组  that）

html:

效果图：

  

 3.2点击查询

自定义参数可以让代码的复用性更高。

methods中定义的方法内部，可以通过this关键字点出其他的方法。

效果图，点击后查询的结果：

 3.3全部代码展示

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天气查询案例</title>
	</head>
	<body>
		<div id="app">
			<input type="text" placeholder="输入查询的电台id" @keyup.enter="searchId" v-model="et"/>
			<button type="button" @click="search">搜索</button>
			<a @click="etd(11)">编号11</a>
			<a @click="etd(12)">编号12</a>
			<a @click="etd(13)">编号13</a>
			<a @click="etd(14)">编号14</a>
			<a @click="etd(15)">编号15</a>
			<ul>
				<li v-for="item in etlist">
					<p>{{ item.name }}</p>
					<p>{{item.description}}</p>	
					<p>{{ item.id}}</p>
				</li>
			</ul>
		</div>
		
		<!-- vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 导入js文件 -->
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

js代码:

var app = new Vue({
	el: "#app",
	data: {
		et: '',
		etlist: []
	},
	methods: {
		searchId: function() {
			// console.log("电台查询");
			// console.log(this.city);
			//调用接口
			var that=this;
			axios.get('https://autumnfish.cn/dj/program?rid=' + this.et)
				.then(function(response) {
					console.log(response.data.programs);
					that.etlist=response.data.programs;
				})
				.catch(function(err) {})
		},
		etd:function(et){
			this.et=et;
			this.searchId();
		},
		search:function(){
			this.searchId();
		}
	}
})

总结

Vue到这里就算结束了，这里只是浅浅的学了一遍，更加适合学后端的但想写出一些好看点的页面的去学习，如果是想走前端的话，这些知识还不够。需要系统的去学习Vue,花大量的时间去打代码练习每一个案例。代码不管是前端还是后端都要勤加练习才能有所收获。希望大家动起来，我们一起敲代码。

心态还需努力呀
关注
  • 7
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue项目知识点整理
Lxingling的博客
03-04 340
vue项目知识点整理
vue3基础知识点快速掌握
06-07
其核心知识点包括：响应式系统、组件化开发、生命周期钩子、指令系统、模板语法、计算属性和侦听器、Vue Router（路由管理）、Vuex（状态管理）等。Vue 3 相较于 Vue 2 带来了性能提升、更小的包体积、更好的 ...
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 4921
Vue 入门基础篇
vue的基础知识大全，一篇文章就够了！
qq_65010070的博客
09-22 5214
Vue的基础知识，持续整理中。。。
2024年Web前端最新【面试必备】 【ES6】学Vue前必须掌握的内容（上(1)，如何成为一个更好的前端开发者
2401_84438488的博客
05-05 249
但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。//方法中的定义了4个参数，但调用函数时只使用了3个参数，ES6 中并不会报错。f: () => console.log(this.s)//继承作用域的上一层的this，指向全局。//一个参数时，一个是长度，一个是值。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 5963
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
Vue3快速上手-vue3详细基础教程
最新发布
06-20
Vue3快速上手,vue3详细基础教程,涵盖了知识点讲解和案例的使用讲解，makdown格式，是一份不可多得的学习资料
Vue开发过程中遇到的疑惑知识点总结
11-29
相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。最近终于有时间空下来，所以想着把在使用vue过程遇到的一些问题疑惑总结处理，方便自己或者有需要的朋友们参考，...
vue实战项目里常用知识点归纳-2023
02-26
Vue 实战项目中常用知识点归纳 一、Vue 和 Angular 的区别 1. Vue 仅仅是 MVVM 中的 View 层，仅是一个类似 jQuery 的工具库，而不是框架，而 Angular 则是一个完整的 MVVM 框架。 2. Vue 的双向绑定是基于 ES5 中...
Vue初学者必学知识点（含案例）
11-13
作为Vue初学者，了解并掌握以下关键知识点至关重要： 1. **基础概念**：首先，理解Vue的基本架构，包括实例、组件、指令、过滤器等。Vue实例是应用的核心，它持有数据和方法；组件是可复用的代码块，用于构建大型...
Vue基础知识汇总
m0_69631269的博客
05-17 1622
自定义指令总结：一、定义语法：(1).局部指令：new Vue({new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数})})(2).全局指令：Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)二、配置对象中常用的3个回调：(1).bind：指令与元素成功绑定时调用。(2).inserted：指令所在元素被插入页面时调用。(3).update：指令所在模板结构被重新解析时调用。
前端培训 | Vuex五大核心属性
zjjcchina的博客
05-05 136
然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。Action 就不受约束！既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。
Vue 入门指南：从零开始学习 Vue 的基础知识
Kuangtian的博客
11-28 527
Vue 是一个前端框架，它使得构建交互式应用程序变得更加容易，让前端开发者能够更好地处理复杂的数据，并使得用户界面更加美观、可应对各种设备。使用 Vue 可以在较短的时间内构建出具有雄心壮志的单页应用程序，它也很容易与其他工具协同工作。
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue基础详解（全）
梁婉玲krysliang的博客
02-14 1万+
一，VUE的核心 1.数据驱动（mvvm模型，只要改变model的数据，视图层就会自动更新） 2.视图组件： 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。 二，使用vue 1.引入vue之后就可以进行下面的步骤 2.创建语法（创建 ，设置数据，挂载，渲染） var vm = new Vue（{}）//参数是一个对象 三、定义...
Vue开发指南：你都需要学点啥？
油墨香^-^的博客
05-15 2069
如果您是Vue开发的新手，您可能已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等。 另外您可能还经常听到和Vue一起提到的工具和库，如Vuex、Webpack、Vue CLI和Nuxt。 也许您在面对这些未知的术语和工具时会感到无助和绝望，没关系，您并不孤单，因为这是所有新手在初次接触Vue时都会有的感受。 但如果您试图要一次掌握所有这些内容，那么这些庞大的体系很可能会压垮你。为此，我在这里将为大家展示一个“知识图表”，它包含了所有在专业Vue开发过程中的关键
vue基础知识点大全
heiligkeil的博客
05-25 1991
目录一、基础指令插值语法 {{xxx}}指令语法 v-bind单向数据绑定 v-bind双向数据绑定 v-model绑定事件 v-on事件修饰符键盘事件 @keyup、@keydown计算属性 computed监视属性 watchwatch 与 computed 区别绑定样式class样式style样式条件渲染 v-if、v-show遍历 v-for添加对象 set()修改数组的7个方法(Vue可监测到):v-model的三个修饰符 trim、number、lazy过滤器 filters内置指令 v-tex
学习vue前的准备（繁琐的）
天空影
02-27 1万+
我不是用的vue-cli开发 因为用这个一下子看不懂 准备工作 有node环境（不会的话百度安装） npm包管理（npm一般是国外包，可以使用淘宝镜像替换，百度安装替换） 有git环境（没有的话百度下载 和cmd运行差不多，只不过更方便） 不安装git的话需要会用cmd 前期准备工作也比较麻烦，，但是胜在一遍通处处通，有很多点会有困惑的，不要虚，查资料！ 第一：javascrip...
vue3前端基础知识
04-28
Vue.js是一种流行的JavaScript框架，用构建用户界面。Vue 3是Vue.js的最新版本，它带来了一些重要的改进和新功能。以下是Vue 3的一些前端基础知识： 1. 组件化：Vue 3支持组件化开发，将页面划分为多个独立的组件，每个组件有自己的模板、样式和逻辑。这样可以提高代码的可维护性和复用性。 2. 响应式数据：Vue 3使用了Proxy对象来实现响应式数据。当数据发生变化时，相关的视图会自动更新。你可以通过在数据属性前加上`ref`关键字来创建响应式数据。 3. Composition API：Vue 3引入了Composition API，它提供了一种新的组织组件逻辑的方式。通过使用`setup`函数，你可以将相关的逻辑代码组织在一起，提高代码的可读性和维护性。 4. Teleport：Vue 3引入了Teleport特性，它可以将组件的内容渲染到DOM树中的任意位置。这对于创建弹出框、模态框等组件非常有用。 5. 更好的性能：Vue 3在性能方面进行了优化，比如编译器的优化、更小的包体积等。这使得Vue 3在运行时更快，并且更适合在移动端和低性能设备上使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

心态还需努力呀

你的鼓励将是我创作的最大动力~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值