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

文章目录

前言
一、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需要的资源：

第二步：写一个div


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

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

效果图：

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

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

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

如图：

代码及运行结果：


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>el:挂载点title>
	head>
	<body>
		
		{{ 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].

如图：

代码及运行结果


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的用法：

相同点：

相当于

不同点：

这样写获取message值时会覆盖h2中原有的内容。而后者不会覆盖。

如图：

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

运行结果上图，代码：


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的用法：


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:"黑马"
				}
			})
		script>
	body>
html>

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

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

3.v-on指令学习

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

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

如图所示：

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

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


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.计数器小练习

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


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，就不会显示第二张图：

代码：


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。将标签移除。

代码：


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使用对象的方式。

代码解释：

完整代码：


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.

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


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 @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可以限制触发的按键为回车。

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

代码：


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.基于数据的开发方式

全部代码：


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)">xbutton>
				li>
			ul>
			<p v-show="list.length!=0">
				<span v-text="list.length">span> <span> items left ------span> 
				<button type="button" @click="clear()">Clearbutton>
			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+vuetitle>
	head>
	<body>
		<div id="app">
			<button type="button" @click="getmusic()">音乐信息button>
			<p>{{music}}p>
		div>
		
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<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:


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)">编号11a>
			<a @click="etd(12)">编号12a>
			<a @click="etd(13)">编号13a>
			<a @click="etd(14)">编号14a>
			<a @click="etd(15)">编号15a>
			<ul>
				<li v-for="item in etlist">
					<p>{{ item.name }}p>
					<p>{{item.description}}p>	
					<p>{{ item.id}}p>
				li>
			ul>
		div>
		
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		
		<script src="https://unpkg.com/axios/dist/axios.min.js">script>
		
		<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,花大量的时间去打代码练习每一个案例。代码不管是前端还是后端都要勤加练习才能有所收获。希望大家动起来，我们一起敲代码。

相关阅读:
CSS重点知识整理1
Cloudera Manager 安装
 全球近一半企业受到影响，Apache Log4j 2 漏洞或将长存
 MATLAB——BP神经网络信号拟合程序
 哈希应用: 位图 + 布隆过滤器
 centos7或centos8 chkconfig命令详解
 第十届全球云计算大会 | 华云数据荣获“2013-2022十周年特别贡献奖”
Spring中加密工具类DigestUtils和BCryptPasswordEncoder
java集合
 Node.js编译失败怎么办？
原文地址：https://blog.csdn.net/weixin_52258054/article/details/127000074