20分钟看完vue的基础入门

最新推荐文章于 2023-07-03 18:20:50 发布

Mr.YHL

最新推荐文章于 2023-07-03 18:20:50 发布

阅读量479

点赞数

分类专栏：面试问答文章标签： vue html

本文链接：https://blog.csdn.net/weixin_41290516/article/details/109607459

版权

面试问答专栏收录该内容

15 篇文章 0 订阅

订阅专栏

vue

前言

前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们就要来了解一下前端的一些技术，完成前端页面搭建。

先聊一下前端开发模式的发展。

静态页面

最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。

异步刷新，操作DOM

1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.

随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。
ajax盛行：
- 2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
- 此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表.

MVVM，关注模型和视图

2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。
2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js。
- 基于时间循环的异步IO
- 单线程运行，避免多线程的变量同步问题
- JS可以编写后台diamante，前后台统一编程语言
node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。
2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
随后，在node的基础上，涌现出了一大批的前端框架：

MVVM模式

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

只要我们Model发生了改变，View上自然就会表现出来。
当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

数据双向绑定：当视图(view)数据发生改变后，会影响模型(model)数据

当模型(model)数据发生改变后，会影响视图(view)数据

而我们今天要学习的，就是一款MVVM模式的框架：Vue

第一章认识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

前端框架三巨头：Vue.js、React.js、AngularJS。vue.js以期轻量易用著称，vue.js和React.js发展速度最快。

官网：https://cn.vuejs.org/

参考：https://cn.vuejs.org/v2/guide/

Git地址：https://github.com/vuejs

第二章 Node和NPM

前面说过，NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

1.下载Node.js

下载地址：https://nodejs.org/en/download/

推荐下载LTS版本。

之前在安装kibana时，已经安装完成，在控制台输入：

node -v

看到版本信息：

2.NPM

安装完成Node应该自带了NPM了，在控制台输入npm -v查看：

在这里插入图片描述

npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

我们首先安装nrm，这里-g代表全局安装

npm install nrm -g

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：
在这里插入图片描述

通过nrm use taobao来指定要使用的镜像源：

在这里插入图片描述

然后通过nrm test npm来测试速度：

在这里插入图片描述

测试淘宝请输入：

nrm test taobao

注意：

安装完成请一定要重启下电脑！！！
安装完成请一定要重启下电脑！！！
安装完成请一定要重启下电脑！！！

或者，直接配置仓库：

npm config set registry http://registry.npm.taobao.org/

第三章快速入门

接下来，我们快速领略下vue的魅力

1.创建工程

创建一个新的工程：
在这里插入图片描述

2.安装vue

2.1.下载安装

下载地址：https://github.com/vuejs/vue

可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下载解压，得到vue.js文件。

2.2.引入VUE.JS

或者也可以直接使用公共的CDN服务：

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

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.3.npm安装(推荐)

在idea的左下角，有个Terminal按钮，点击打开控制台：

从顶部菜单View->Tool windows->Terminal也可以打开

先输入：

npm init -y

对项目进行初始化

在这里插入图片描述

此时，会在项目目录下出现一个package.json文件：

在这里插入图片描述

这是对项目的基本描述信息。例如名称、版本等，有点类似java中的pom文件。

安装Vue，输入命令：

npm install vue --save

在这里插入图片描述

然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。
在这里插入图片描述

node_modules是通过npm安装的所有模块的默认位置。

此时再查看package.json，会发现有了变化：

在这里插入图片描述

会发现，刚刚安装的vue依赖再这里出现了描述信息。是不是跟pom文件很像？

2.4 安装总结：

安装node.js
1.node -v 查看版本
2.npm -v 
3.npm config set registry http://registry.npm.taobao.org/ 切换国内镜像

创建项目在Terminal控制台中输入
1.cd到工程目录下
2.输入npm init -y
3.输入npm install vue --save      安装前端需要的js
4.输入npm install axios --save

3.vue入门案例

3. 1.HTML模板

在vue_demo目录新建一个HTML

在hello.html中，我们编写一段简单的代码：

<!DOCTYPE html>
<html lang="zh-CN">
   <head>
      <meta charset="UTF-8">
      <title>vue入门demo</title>
     
   </head>
   <body>
      <div id="app">
        
         
         {{name}}非常帅气,有{{num}}个老婆!!
      </div>
   </body>
   
</html>

3.2.vue渲染

然后我们通过Vue进行渲染：

<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>vue入门demo</title>
		<!--引入vue js资源-->
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">			
			<!--插值表达式,从模型取值展示在页面上-->
			{{name}}非常帅气,有{{num}}个老婆!!
		</div>
	</body>
	<script>
		// 创建vue对象
		new Vue({
			// 指定vue应用在哪个对象元素
			el:"#app",
			// vue封装数据的模型
			data:{
			    name:"牧生"			
			}
		});
	</script>
</html>

首先通过 new Vue()来创建Vue实例
然后构造函数接收一个对象，对象中有一些属性：
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
  - name：这里我们指定了一个name属性
页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

3.3.双向绑定

我们对刚才的案例进行简单修改：

<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>vue入门demo</title>
		<!--引入vue js资源-->
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--v-model 绑定到模型数据-->
			请输入一个名字:<input type="text" v-model="name">
			<button v-on:click="add()">点我试试</button>
			<br>
			<!--插值表达式,从模型取值展示在页面上-->
			{{name}}非常帅气,有{{num}}个老婆!!
		</div>
	</body>
	<script>
		// 创建vue对象
		new Vue({
			// 指定vue应用在哪个对象元素
			el:"#app",
			// vue封装数据的模型
			data:{
			    name:"牧生",
				num:1
			},
			// vue绑定事件
			methods:{
			    /*add:function () {
				    this.num++
                }*/
			    // this一般表示vue对象
			    add () {
				    this.num++
                }
			}
		});
	</script>
</html>

我们在data添加了新的属性：num
在页面中有一个input元素，通过v-model与num进行绑定。
同时通过{{num}}在页面输出

效果：

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

input与num绑定，input的value值变化，影响到了data中的num值
页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

3.4.事件处理

我们在页面添加一个按钮：

请输入：<input type="text" v-model="name"><button v-on:click="add()">点我试试</button><br>

这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
普通onclick是无法直接操作num的。

第四章 Vue实例

1.创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

el vue作用的HTML元素
data //vue对象组装的数据
methods //定义事件操作方法
…

接下来我们一一介绍。

2.模板或元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板：

<div id="app">
    
</div>

然后创建Vue实例，关联这个div

var vm = new Vue({
	el:"#app"
})

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

3.数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html：

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})

name的变化会影响到input的值
input中输入的值，也会导致vm中的name发生改变

4.方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

html:

<div id="app">
    <button v-on:click="add">点我</button>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
    },
    methods:{
        add:function(){
            console.log("弹弹弹，弹走鱼尾纹")
        }
    }
})

5.生命周期(了解)

5.1.生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：

在这里插入图片描述

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

5.2.了解钩子函数(生命周期)

例如：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

html:

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

js:

var vm = new Vue({
    el:"#app",
    data:{
        hello: '' // hello初始化为空
    },
    created(){
        this.hello = "hello, world！ 我出生了！";
    }
})

结果：
在这里插入图片描述

5.3.this

我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

var vm = new Vue({
    el:"#app",
    data:{
        hello: '' // hello初始化为空
    },
    created(){
        this.hello = "hello, world！ 我出生了！";
        console.log(this);
    }
})

控制台的输出：

在这里插入图片描述

总结：this就是当前的Vue实例，在Vue对象内部，必须使用this才能访问到Vue中定义的data内属性、方法等。

第五章指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊属性。例如我们在入门案例中的v-model，代表双向绑定。

1.插值表达式

1.1.花括号

格式：

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数
插值表达式一定是在html标签外应用

示例：

HTML：

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

JS:

var app = new Vue({
    el:"#app",
    data:{
        name:"Jack"
    }
})

1.2.v-text和v-html

使用v-text和v-html指令来替代{{}}

说明：

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例：

HTML:

<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>vue入门demo</title>
		<!--引入vue js资源-->
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--{{}} 差值表达式 用于运算 -->
			{{1+1}}
			<!--不能进行的运算-->
			{{num++}}<br>
			<!--模型中的html标签,原样输出-->
			{{hello}}
			<!--解析标签-->
			<div v-html="hello"></div>
			<div v-text="hello"></div>
		</div>

	</body>
	<script>
		// 创建vue对象
		new Vue({
			// 指定vue应用在哪个对象元素
			el:"#app",
			// vue封装数据的模型
			data:{
				num:1,
				hello:"<h1>高薪就业,我一定可以</h1>"
			}
		});
	</script>
</html>

2.v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

input
select
textarea
checkbox
radio
components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

举例：

html：

<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>vue入门demo</title>
		<!--引入vue js资源-->
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" v-model="language" value="Java" />Java<br/>
			<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
			<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
			<h1>
				<!-- {{}} 插值表达式可以进行方法调用，但是调用的方法必须有返回值  -->
				你选择了：{{language.join(',')}}
			</h1>
		</div>
	</body>
	<script>
		// 创建vue对象
		new Vue({
			// 指定vue应用在哪个对象元素
			el:"#app",
			// vue封装数据的模型
			data:{
                //[]代表数组 
                language:[]
			}

		});
	</script>
</html>

多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值
input 和textarea 默认对应的model是字符串
select单选对应字符串，多选对应也是数组

效果：

在这里插入图片描述

3.v-on

3.1.基本用法

v-on指令用于给页面元素绑定事件。

语法：

v-on:事件名="js片段或函数名"

简写语法：

@事件名="js片段或函数名"

例如v-on:click='add’可以简写为@click=‘add’

事件修饰符：

prevent事件修饰符，作用是阻止默认事件执行
stop事件修饰符:阻止冒泡事件

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>vue入门demo</title>
		<!-- 引入vue js资源 -->
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
		<div id="app">
			<!--div1方法执行的同时，div2方法也执行，这种效果叫做 冒泡事件
				需要阻止冒泡事件：使用stop事件修饰符
			-->
			<div @click="div2()" style="background: green;width:100px;height:100px">
				<!--<div @click="div1()" style="background: red;width:50px;height:50px"></div>-->
				<div @click.stop="div1()" style="background: red;width:50px;height:50px"></div>
			</div>

			<!-- prevent事件修饰符，作用是阻止默认事件执行 -->
			<a href="https://www.baidu.com" @click.prevent="baidu()">百度一下</a>
		</div>

	</body>
	<script>
        //创建vue对象
        new Vue({
            el:"#app", //指定vue应用在那个对象元素
            data:{  //vue封装的模型数据
                name:"牧生",
                //name:"",
                num:1
            },
            methods:{//vue绑定的事件方法
                baidu(){
                    alert("哈哈，被骗了吧");
                },
                div1(){
                    console.log("div1方法执行了");
                },
                div2(){
                    console.log("div2方法执行了");
                }
            }
        });
	</script>
</html>

效果：

在这里插入图片描述

4.v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

4.1.遍历数组

语法：

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名

示例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>vue入门demo</title>
		<!-- 引入vue js资源 -->
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
		<div id="app">
			<!--v-for 遍历执行   -->
			<div v-for="user in users">
				{{user.name}} ---- {{user.gender}} ---- {{user.age}}
			</div>
		</div>

	</body>
	<script>
        //创建vue对象
        new Vue({
            el:"#app", //指定vue应用在那个对象元素
            data:{  //vue封装的模型数据
                users:[
	                {name:"别飒夫",gender:"女",age:21},
	                {name:"别黛皋",gender:"男",age:21},
	                {name:"柯vf",gender:"女",age:25},
	                {name:"何萨关",gender:"女",age:24},
	                {name:"莫冀燎",gender:"男",age:21},
	                {name:"怕健",gender:"女",age:26},
	                {name:"劳法苟",gender:"女",age:21},
	                {name:"卡董萨灵",gender:"男",age:23},
	                {name:"东莱飞",gender:"女",age:21}
                ]
            }
        });
	</script>
</html>

在这里插入图片描述

4.2.数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。

示例

<!--v-for 遍历执行   -->
<div v-for="(user,index) in users">
  {{index + 1 }}==={{user.name}} ---- {{user.gender}} ---- {{user.age}}
</div>

在这里插入图片描述

4.3.遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的值
2个参数时，第一个是值，第二个是键
3个参数时，第三个是索引，从0开始

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门demo</title>
    <!-- 引入vue js资源 -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
    <div id="app">
        <!--v-for 遍历对象 相当于遍历map-->
        <div v-for="(v,k,i) in user">
          {{i+1}} ---  {{v}} --- {{k}}
        </div>
    </div>

</body>
<script>
    //创建vue对象
    new Vue({
        el:"#app", //指定vue应用在那个对象元素
        data:{  //vue封装的模型数据         
            user: {name:'费佰代', gender:'女', age: 23}
        }
    });
</script>
</html>

效果：

在这里插入图片描述

5.v-if的说明

5.1.基本使用

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门demo</title>
    <!-- 引入vue js资源 -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
    <div id="app">
        <button @click="isShow=!isShow">点我试试</button>
        <!-- v-if 判断指令，指令是boolean类型 -->
        <div v-if="isShow">试试就试试</div>
    </div>

</body>
<script>
    //创建vue对象
    new Vue({
        el:"#app", //指定vue应用在那个对象元素
        data:{  //vue封装的模型数据
            isShow:true
        }
    });
</script>
</html>

效果：

在这里插入图片描述

v-show指令演示，也可以是页面元素的隐藏和显示效果

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门demo</title>
    <!-- 引入vue js资源 -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
    <div id="app">
        <button @click="isShow=!isShow">点我试试</button>
        <!-- v-show 元素是否展示的指令，指令是boolean类型 -->
        <div v-show="isShow">试试就试试</div>
    </div>

</body>
<script>
    //创建vue对象
    new Vue({
        el:"#app", //指定vue应用在那个对象元素
        data:{  //vue封装的模型数据
            isShow:true
        }
    });
</script>
</html>

v-if 和v-show实现原理不同：

v-if 是控制页面元素是否生成，完成元素的显示与隐藏

v-show是通过控制元素的display演示，完成元素的显示与隐藏

5.2.与v-for结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>vue入门demo</title>
		<!-- 引入vue js资源 -->
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
		<div id="app">
			<!--v-for 遍历执行   -->
			<div v-for="(user,index) in users" v-if="user.gender=='女'">
				{{index + 1 }}==={{user.name}} ---- {{user.gender}} ---- {{user.age}}
			</div>


		</div>

	</body>
	<script>
        //创建vue对象
        new Vue({
            el:"#app", //指定vue应用在那个对象元素
            data:{  //vue封装的模型数据
                users:[
	                {name:"别飒夫",gender:"女",age:21},
	                {name:"别黛皋",gender:"男",age:21},
	                {name:"柯vf",gender:"女",age:25},
	                {name:"何萨关",gender:"女",age:24},
	                {name:"莫冀燎",gender:"男",age:21},
	                {name:"怕健",gender:"女",age:26},
	                {name:"劳法苟",gender:"女",age:21},
	                {name:"卡董萨灵",gender:"男",age:23},
	                {name:"东莱飞",gender:"女",age:21}
                ]
            }
        });
	</script>
</html>

效果：

在这里插入图片描述

5.3.v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>vue入门demo</title>
		<!-- 引入vue js资源 -->
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
		<div id="app">
			<!--v-for 遍历执行   -->
			<div v-for="(user,index) in users" v-if="user.gender=='女'">
				{{index + 1 }}==={{user.name}} ---- {{user.gender}} ---- {{user.age}}
			</div>
			<div v-else>
				<b>{{index + 1 }}==={{user.name}}==={{user.gender}}==={{user.age}}</b>

			</div>


		</div>

	</body>
	<script>
        //创建vue对象
        new Vue({
            el:"#app", //指定vue应用在那个对象元素
            data:{  //vue封装的模型数据
                users:[
	                {name:"别飒夫",gender:"女",age:21},
	                {name:"别黛皋",gender:"男",age:21},
	                {name:"柯vf",gender:"女",age:25},
	                {name:"何萨关",gender:"女",age:24},
	                {name:"莫冀燎",gender:"男",age:21},
	                {name:"怕健",gender:"女",age:26},
	                {name:"劳法苟",gender:"女",age:21},
	                {name:"卡董萨灵",gender:"男",age:23},
	                {name:"东莱飞",gender:"女",age:21}
                ]
            }
        });
	</script>
</html>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
在这里插入图片描述

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type == 'A'">
  A
</div>
<div v-else-if="type == 'B'">
  B
</div>
<div v-else-if="type == 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

6.v-bind

6.1.属性上使用vue数据

看这样一个案例：

我们提前定义了一些CSS样式：

<style>
    #box {
        width: 100px;
        height: 100px;
        color: darkgray
    }
    .red{
        background-color: red;
    }
    .blue{
        background-color: blue;
    }
</style>

然后定义了页面：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门demo</title>
    <!-- 引入vue js资源 -->
    <script src="node_modules/vue/dist/vue.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            color: darkgray
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>

</head>
<body>
    <!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
    <div id="app">
        <button @click="color='red'">红</button>
        <button @click="color='blue'">蓝</button>
        <!-- v-bind绑定css样式的指令 可以省略-->
        <div id="box" v-bind:class="color">
            点击按钮，背景会切换颜色哦
        </div>
    </div>

</body>
<script>
    //创建vue对象
    new Vue({
        el:"#app", //指定vue应用在那个对象元素
        data:{  //vue封装的模型数据
            color:"red"
        },
        methods:{//vue绑定的事件方法

        }
    });
</script>
</html>

解读：

页面有两个按钮，点击时，会改变Vue实例中的color值，这个值与前面定义的CSS样式一致。
目前div的class为空，我们希望实现点击按钮后，div的class样式会在.red和.blue之间切换

该如何实现？

大家可能会这么想，既然color值会动态变化为不同的class名称，那么我们直接把color注入到class属性就好了，于是就这样写：

<div class="{{color}}"></div>

这样写是错误的！因为插值表达式不能用在标签的属性中。

此时，Vue提供了一个新的指令来解决：v-bind，语法：

v-bind:属性名="Vue中的变量"

例如，在这里我们可以写成：

<div v-bind:class="color"></div>

不过，v-bind太麻烦，因此可以省略，直接写成：:属性名='属性值'，即：

<div :class="color"></div>

在这里插入图片描述

6.2.class属性的特殊用法

上面虽然实现了颜色切换，但是语法却比较啰嗦。

Vue对class属性进行了特殊处理，可以接收数组或对象格式

对象语法

我们可以传给 :class 一个对象，以动态地切换 class：

<div :class="{ red: true,blue:false }"></div>

对象中，key是已经定义的class样式的名称，如本例中的：red和blue
对象中，value是一个布尔值，如果为true，则这个样式会生效，如果为false，则不生效。

之前的案例可以改写成这样：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门demo</title>
    <!-- 引入vue js资源 -->
    <script src="node_modules/vue/dist/vue.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            color: darkgray
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>

</head>
<body>
    <!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
    <div id="app">
        <!--<button @click="color='red'">红</button>
        <button @click="color='blue'">蓝</button>
        &lt;!&ndash; v-bind绑定css样式的指令 可以省略&ndash;&gt;
        <div id="box" v-bind:class="color">
            点击按钮，背景会切换颜色哦
        </div>-->
        <button @click="boo=!boo">点击切换背景</button>
        <div id="box" :class="{red:boo, blue: !boo}">
            点击按钮，背景会切换颜色哦
        </div>
    </div>

</body>
<script>
    //创建vue对象
    new Vue({
        el:"#app", //指定vue应用在那个对象元素
        data:{  //vue封装的模型数据
            //color:"red"
            boo:true
        },
        methods:{//vue绑定的事件方法

        }
    });
</script>
</html>

首先class绑定的是一个对象：{red:boo, blue: !boo}
- red和blue两个样式的值分别是boo和!boo，也就是说这两个样式的生效标记恰好相反，一个生效，另一个失效。
- boo默认为true，也就是说默认red生效，blue不生效
现在只需要一个按钮即可，点击时对boo取反，自然实现了样式的切换

效果：

在这里插入图片描述

7.watch

7.1.监控

watch可以让我们监控一个值的变化。从而做出相应的反应。示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>vue入门demo</title>
		<!-- 引入vue js资源 -->
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
		<div id="app">
			<!--v-model绑定模型数据-->
			请输入：<input type="text" v-model="name"><button v-on:click="add()">点我试试</button><br>
			<!--{{}} 插值表达式，作用：从模型数据中取值，展示在页面上 -->
			{{name}}，非常帅气，有{{num}}位小姐姐非常喜欢他！！！

		</div>

	</body>
	<script>
        //创建vue对象
        new Vue({
            el:"#app", //指定vue应用在那个对象元素
            data:{  //vue封装的模型数据

                name:"",
                num:1,

            },
            methods:{//vue绑定的事件方法
                /*add:function () {
					this.num++; //this就是vue对象
				}*/
                add() { //这种写法是ECMAScript6语法
                    this.num++; //this就是vue对象
                }
            },
            watch:{//vue提供的监控功能

                /*"name":function (newValue,oldValue) {
                    console.log(1)
					console.log(newValue +"----- "+oldValue)
				}*/
                "name"(newValue,oldValue) {
                    console.log(newValue +"----- "+oldValue)
                }

            }
        });
	</script>
</html>

效果：

在这里插入图片描述

7.2.深度监控

如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化，例如：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门demo</title>
    <!-- 引入vue js资源 -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
    <div id="app">
        <!--v-model绑定模型数据-->
        请输入：<input type="text" v-model="user.name"><button v-on:click="add()">点我试试</button><br>
        <!--{{}} 插值表达式，作用：从模型数据中取值，展示在页面上 -->
        {{user.name}}，非常帅气，有{{num}}位小姐姐非常喜欢他！！！
    </div>

</body>
<script>
    //创建vue对象
    new Vue({
        el:"#app", //指定vue应用在那个对象元素
        data:{  //vue封装的模型数据
            //name:"",
            //name:"",
            num:1,
            user:{ //user对象
                name:""
            }
        },
        methods:{//vue绑定的事件方法
            /*add:function () {
                this.num++; //this就是vue对象
            }*/
            add() { //这种写法是ECMAScript6语法
                this.num++; //this就是vue对象
            }
        },
        watch:{//vue提供的监控功能
            /*"name":function (newValue,oldValue) {
                console.log(newValue +"----- "+oldValue)
            }*/
           /* "name"(newValue,oldValue) {
                console.log(newValue +"----- "+oldValue)
            }*/
           //监控对象中属性变化情况
            /*"user.name"(newValue,oldValue) {
                console.log(newValue +"----- "+oldValue)
            }*/
            //监控对象内容变化
            user: {
                deep:true, //深度监控，监控对象中的属性值的变化，否则监控的是对象地址值
                handler:function (newObj) {//对象属性值改变后，处理的逻辑  newObj是对象变化后的值
                    console.log(newObj.name);
                }    
            }
        }
    });
</script>
</html>

变化：

以前定义监控时，person是一个函数，现在改成了对象，并且要指定两个属性：
- deep:代表深度监控，不仅监控person变化，也监控person中属性变化
- handler：就是以前的监控处理函数

效果：

在这里插入图片描述

第六章组件化(Component)

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

1.定义全局组件

我们通过Vue的component方法来定义一个全局组件。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门demo</title>
    <!-- 引入vue js资源 -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 指定vue作用范围，但是不能应用在html和body标签上 -->
    <div id="app">
        <counter></counter>
    </div>

</body>
<script>
    //定义组件 参数一：组件名称  参数二：组件对象
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){ //注意：组件中的data是一个方法
            return {
                count:0
            }
        }
    });


    //创建vue对象
    new Vue({
        el:"#app" //指定vue应用在那个对象元素
    });
</script>
</html>

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data的定义方式比较特殊，必须是一个函数。

效果：

在这里插入图片描述

2.组件的复用

定义好的组件，可以任意复用多次：

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

效果：

在这里插入图片描述

你会发现每个组件互不干扰，都有自己的count值。怎么实现的？

组件的data属性必须是函数！

当我们定义这个 <counter> 组件时，它的data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！

第七章 Ajax异步请求数据

		//可以通过Terminal中通过npm install axios --save
		//参数1是请求的地址  参数2是请求的内容    => 箭头函数，类似于java的lamda表达式，简化函数定义
           axios.post('company',this.dept).then(resp=>{
                   console.log(resp)
                   this.companyList = resp.data;
               }
           )
		语法说明：then 请求成功回调函数    catch：请求失败的回调函数  
       		 => 箭头函数，类似于java的lamda表达式，简化函数定义
			axios.get("请求路径").then(resp=>{}).catch(error=>{});

			axios.post("请求路径",请求参数).then(resp=>{}).catch(error=>{});
		



        //原生ajax请求对比
        $.ajax({
                type: "post",  //数据提交方式（post/get）
                url: "/company",  //提交到的url
                data: {"dept.deptName": this.dept.deptName, "dept.companyName": this.dept.companyName},//提交的数据
                dataType: "json",//返回的数据类型格式
                success: function (msg) {
                    if (msg.success) {
                        app.findAll();
                    } else {
                        alert(response.data.message);
                    }
                }
            });

第八章独立Demo案例

1 环境准备

第一步：创建一个SpringBoot项目可以直接使用SpringBoot第一天的代码（需要修改很多东西）

第二步：导入依赖、配置文件、实体类、mapper接口、service、Controller

1、依赖

<parent>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-parent</artifactId>
   <version>2.1.3.RELEASE</version>
</parent>

<dependencies>
   <dependency>
       <groupId>mysql</groupId>
       <artifactId>mysql-connector-java</artifactId>
       <version>5.1.47</version>
   </dependency>

   <dependency>
       <groupId>tk.mybatis</groupId>
       <artifactId>mapper-spring-boot-starter</artifactId>
       <version>2.1.4</version>
   </dependency>

   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
   </dependency>

   <dependency>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
   </dependency>
</dependencies>

2、配置文件 application.yml

spring:
 application:
   name: vue-tj4
 datasource:
   driver-class-name: com.mysql.jdbc.Driver
   url: jdbc:mysql:///springboot_db
   username: root
   password: root

3、实体类

package cn.com.mryhl.pojo;

import lombok.Data;

import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;

/**
 * @author: mryhl
 * @date: Created in 2020/11/10 18:02
 * @description:
 */
@Data  //注意要记得添加lombok的依赖
@Table(name="tb_user") //类名和表名要映射
public class User {
	// id
	@Id
	private Long id;
	// 用户名
	private String userName;  //特殊注意这个字段  对应的列名是user_name
	// 密码
	private String password;
	// 姓名
	private String name;
	// 年龄
	private Integer age;
	// 性别，1男性，2女性
	private Integer sex;
	// 出生日期
	private Date birthday;
	// 创建时间
	private Date created;
	// 更新时间
	private Date updated;
	// 备注
	private String note;

}

4、mapper接口

package cn.com.mryhl.mapper;

import cn.com.mryhl.pojo.User;
import tk.mybatis.mapper.common.BaseMapper;

/**
* @author: mryhl
* @date: Created in 2020/11/10 18:03
* @description:
*/
public interface UserMapper extends BaseMapper<User> {
}

5、service实现类

需要两个方法：1、查询所有用户 2、根据id查询用户

package cn.com.mryhl.service.impl;

import cn.com.mryhl.mapper.UserMapper;
import cn.com.mryhl.pojo.User;
import cn.com.mryhl.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

/**
 * @author: mryhl
 * @date: Created in 2020/11/10 18:05
 * @description:
 */
public class UserServiceImpl implements UserService {
	@Autowired
	private UserMapper userMapper;

	@Override
	public List<User> findAll() {
		return userMapper.selectAll();
	}

	@Override
	public User findById(Long id) {
		return userMapper.selectByPrimaryKey(id);
	}
	
}

6、Controller代码

package cn.com.mryhl.controller;

import cn.com.mryhl.pojo.User;
import cn.com.mryhl.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author: mryhl
 * @date: Created in 2020/11/10 18:06
 * @description:
 */
@RestController
@RequestMapping("/user")
public class UserController {
	@Autowired
	private UserService userService;

	@GetMapping("/findAll")
	public List<User> findAll(){
		return userService.findAll();
	}

	@GetMapping("/findById/{id}")
	public User findById(@PathVariable("id") Long id){
		return userService.findById(id);
	}
}

7、创建引导类

package cn.com.mryhl;

		import org.springframework.boot.SpringApplication;
		import org.springframework.boot.autoconfigure.SpringBootApplication;
		import tk.mybatis.spring.annotation.MapperScan;

/**
 * @author: mryhl
 * @date: Created in 2020/11/10 18:07
 * @description:
 */
@SpringBootApplication
@MapperScan("cn.com.mryhl.mapper")
public class UserApplication {
	public static void main(String[] args) {
		SpringApplication.run(UserApplication.class,args);
	}
}

8、导入静态资源

在这里插入图片描述

2 展示用户的列表数据

Html需要修改的内容：

在这里插入图片描述

JS，在页面的下方完善vue脚本

<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>员工信息管理系统</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>



</head>
<body>
<div class="container">
    <div id="myApp">
        <h3 style="text-align: center">员工信息列表</h3>

        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <th>编号</th>
                <th>姓名</th>
                <th>用户名</th>
                <th>年龄</th>
                <th>备注信息</th>
                <th>操作</th>
            </tr>
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.userName}}</td>
                <td>{{user.age}}</td>
                <td>{{user.note}}</td>
                <td><a class="btn btn-default btn-sm" >查看</a></td>
            </tr>
        </table>
    </div>
</div>
</body>

</html>
<script>
    //创建vue对象
    new Vue({
        el:"#myApp",
        data:{
            //声明用户列表变量
            userList:[]
        },
        methods:{
            findAll(){
                //发起ajax请求，查询用户列表数据
                //resp=>{} 箭头函数，简化方法定义
                axios.get("/user/findAll").then(resp=>{
                    console.log(resp);
                    this.userList=resp.data;
                });
            }
        },
        created(){//钩子函数，页面加载后，发ajax请求，查询用户列表数据
            this.findAll();
        }
    });
</script>

3 展示用户的详情页面数据

第一步：在列表页面添加超链接

<td><a class="btn btn-default btn-sm" :href="'view.html?id='+user.id" >查看</a></td>

第二步：进入到view.html 获取url上的ID值

let id = location.search.split("=")[1];

第三步：根据ID获取User对象

<!-- 网页使用的语言 -->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改员工</title>
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="myApp" class="container">
    <center><h3>员工查看页面</h3></center>
    <div class="form-group">
        <label>姓名：</label>
        <span>{{user.name}}</span>
    </div>

    <div class="form-group">
        <label>用户名：</label>
        <span>{{user.userName}}</span>
    </div>

    <div class="form-group">
        <label>年龄：</label>
        <span>{{user.age}}</span>
    </div>
    <div class="form-group">
        <label>性别：</label>
         <span v-if="user.sex==1">男</span>
         <span v-if="user.sex==0">女</span>
    </div>

    <div class="form-group">
        <label>备注：</label>
        <span>{{user.note}}</span>
    </div>
    <div class="form-group" style="text-align: center">
        <input class="btn btn-default" type="button" value="返回列表" onclick="history.go(-1)" />
    </div>
</div>
</body>
</html>
<script>
    //创建vue对象
    new Vue({
        el:"#myApp",
        data:{
            user:{}//初始化用户对象
        },
        methods:{
            findById(){
                //获取请求路径中的id值  例如：http://localhost:8080/view.html?id=3
                console.log(location);
                let id =location.search.split("=")[1];
                //发送ajax请求查询用户信息
                axios.get("/user/findById/"+id).then(
                    resp=>{
                        this.user=resp.data;
                    }
                );
            }
        },
        created(){
            this.findById();//基于用户id查询用户信息
        }
    });

</script>

浏览器访问：搞定！

在这里插入图片描述

Mr.YHL

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
20分钟看完vue的基础入门

vue前言第一章认识Vue第二章 Node和NPM1.下载Node.js2.NPM第三章快速入门1.创建工程2.安装vue2.1.下载安装2.2.引入VUE.JS2.3.npm安装(推荐)2.4 安装总结：3.vue入门案例3. 1.HTML模板3.2.vue渲染3.3.双向绑定3.4.事件处理第四章 Vue实例1.创建Vue实例2.模板或元素3.数据4.方法5.生命周期(了解)5.1.生命周期5.2.了解钩子函数(生命周期)5.3.this第五章指令1.插值表达式1.1.花括号1.2.v-text和
复制链接

扫一扫