首页 前端知识 Vue必备知识点(简单 快速上手Vue)

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

2024-04-22 09:04:02 前端知识 前端哥 791 120 我要收藏

文章目录

  • 前言
  • 一、Vue基础语法
  • 二、本地运用
  • 三、网络运用
  • 总结


前言

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必须先导入才可以使用

使用getpost方法即可发送对应的请求

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,花大量的时间去打代码练习每一个案例。代码不管是前端还是后端都要勤加练习才能有所收获。希望大家动起来,我们一起敲代码。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5772.html
标签
评论
发布的文章

JavaScript-jQuery1-笔记

2024-04-30 11:04:12

【Jquery简易图床源码】

2024-04-30 11:04:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!