Vue

最新推荐文章于 2023-08-01 18:57:18 发布

金钰～

最新推荐文章于 2023-08-01 18:57:18 发布

阅读量150

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42105648/article/details/108063737

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue基础

第一章 Vue简介

1. Vue是什么

Vue.JS是优秀的前端 JavaScript 框架

库和框架的区别:

库(如jQuery)

库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API
框架

框架提供了一套完整解决方案,

使用者要按照框架所规定的某种规范进行开发

2. 为什么要学习 Vue

随着项目业务场景的复杂,传统模式（html+jquery）已无法满足需求

就出现了Angular/React/Vue等框架

企业需求
主流框架之一(React Angular Vue)
易用、灵活、高效

3. Vue 能做什么

最大程度上解放了 DOM 操作
单页web项目(SinglePageApplication项目,例如Worktile官网)开发
传统网站开发

document.getElementById(“xx”).innerHTML();

4. 核心特性

双向数据绑定
通过指令扩展了 HTML，通过 表达式 绑定数据到 HTML
解耦视图与数据
可复用组件
虚拟DOM
M-V-VM模型
数据驱动视图

5. 学习链接

Vue官方文档

Vue开源项目汇总

Vue.js中文社区

第二章快速入门

1.下载安装

下载地址：https://github.com/vuejs/vue
可以下载2.6.10版本https://github.com/vuejs/vue/archive/v2.6.10.zip 或资料文件夹中也已下载
下载解压，在 dist 可得到vue.js文件。

2.使用CDN

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

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

3.npm安装

在idea的左下角，有个Terminal按钮，点击打开控制台：
在这里插入图片描述
先输入：
npm init -y

对项目进行初始化
在这里插入图片描述
此时，会在项目目录下出现一个package.json文件。
这是对项目的基本描述信息。例如名称、版本等，有点类似java中的pom文件
安装Vue，输入命令：

save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖
npm install vue --save

开启管理员模式安装:

在这里插入图片描述
node_modules是通过npm安装的所有模块的默认位置。
此时再查看package.json，会发现有了变化：
会发现，刚刚安装的vue依赖再这里出现了描述信息。是不是跟pom文件很像

4. Vue入门程序 HelloWorld

作用:将数据应用在html页面中

1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象 new Vue();
4. 设置Vue实例的选项:如el、data...     
	new Vue({选项:值});
5. 在<div id='app'></div>中通过{{ }}使用data中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue快速入门</title>
</head>
<body>
    <!--设置vue管理的视图-->
    <div id="app">
        <!--在视图里使用Vue实例中data里面的list数据-->
        <p>{{ list }}</p>
    </div>

    <!--引入vue.js文件-->
    <script src="js/vue.js"></script>
    <!--实例化vue对象-->
    <script type="text/javascript">
        new Vue({
            el : '#app',
            data : {
                list : '我是模拟发起ajax请求后.从服务器端返回的数据'
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

5. Vue参数详解

el

el作用:指定当前Vue实例所管理的视图,值通常是id选择器

el的值可以是css选择器,通常是id选择器
el的值不能是html标签和body标签

data

data作用:指定当前Vue实例的数据对象

data中的数据是响应式数据
值可以是一个对象 {属性: 值}
所有数据部分写在data中
在当前Vue实例所管理的视图中通过属性名使用data中的数据
可以通过vm.$data.属性访问数据
可以通过vm.属性访问数据(更简单)

methods

methods作用:指定当前Vue实例中的方法

可以直接通过vm实例访问这些方法，
方法中的 this 自动绑定为 Vue 实例。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--设置vue所管理的视图-->
    <div id="a">
        <!--在vue视图中, 使用Vue实例中data里面的数据-->
        {{msgA}} --- {{fn1()}}
    </div>

    <!--引入Vue.js-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        <!--创建Vue实例-->
        const vm = new Vue({
            el:"#a",
            data:{
                msgA:'第一个Vue实例对象'
            },
			methods:{
				fn1:function(){
					console.log(this.msgA);
					console.log('vm实例中的methods里的fn1方法被调用');
				},
				fn2:function(){
					this.fn1();
					console.log('fn2方法被调用');
				},
			}
        });
    </script>
</body>
</html>

`插值表达式`

作用:会将绑定的数据实时的显示出来:

通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
在插值表达式中不能写js语句, 例如 var a = 10; 分支语句循环语句

格式

{{js表达式、三目运算符、方法调用等}}

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插值表达式</title>
	</head>
	<body>
		<!-- 设置Vue所管理的视图 -->
		<div id= "app">
			<!-- 获取Vue对象中data里的数据 -->
			{{name}}
			<p>{{name}}</p>
			<p>{{name+'哈哈哈'}}</p>
			<p>{{name.split("")}}</p>
			<p>{{age>18?'成年':'未成年'}}</p>
		</div>
		
		<!-- 加载Vue.js文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
		<!-- 创建Vue对象 -->
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					name:'迪丽热巴',
					age:20
				}
			});
		</script>
	</body>
</html>

6.生命周期钩子

声明周期

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

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos() )。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同， this.fetchTodos 的行为未定义。

钩子函数

钩子函数会在vue实例的各个生命周期阶段自动调用；具体有：beforeCreate，created,beforeMount,mounted,updated,beforeUpdate，destroyed，beforeDestroy

created钩子函数常用场景：用于初始化数据
我们如果想在页面加载完毕后就要执行一些操作的话，可以使用created和mounted钩子函数，如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>生命周期</title>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>

		<script src="../js/vue.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					message: 'Vue的生命周期'
				},
				beforeCreate: function() {
					console.group('------beforeCreate创建前状态------');
					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
					console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
					console.log("%c%s", "color:red", "message: " + this.message);//undefined
				},
				created: function() {
					console.group('------created创建完毕状态------');
					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
				},
				beforeMount: function() {
					console.group('------beforeMount挂载前状态------');
					console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
				},
				mounted: function() {
					console.group('------mounted 挂载结束状态------');
					console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
				},
				beforeUpdate: function() {
					console.group('beforeUpdate 更新前状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				updated: function() {
					console.group('updated 更新完成状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				beforeDestroy: function() {
					console.group('beforeDestroy 销毁前状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				destroyed: function() {
					console.group('destroyed 销毁完成状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message)
				}
			})

			// 设置data中message数据值
			//vm.message = "good...";
			// 销毁Vue对象
			//vm.$destroy();
		</script>
	</body>
</html>

在这里插入图片描述

第三章 Vue常用指令

1.v-text和v-html

很像innerText和innerHTML

document.getElementById("mydiv").innerHTML = "<h1>海马</h1>"; // 有html效果
document.getElementById("mydiv").innerText = "<h1>海马</h1>"; // 没有html效果, 将整个作为字符串处理

v-text:更新标签中的内容
- v-text和插值表达式的区别
  - v-text 更新整个标签中的内容
  - 插值表达式: 更新标签中局部的内容
v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 设置vue所管理的视图 -->
		<div id="app">
			<!-- 获取Vue对象中data里的数据 -->
			<p>{{text}},我是p标签中的内容</p>
			<p v-text="text">我是p标签中的内容</p>
			<p v-text="html">我是p标签中的内容</p>
			<p v-html="text">我是p标签中的内容</p>
			<p v-html="html">我是p标签中的内容</p>
		</div>
		
		<!-- 引入Vue.js文件 -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 创建Vue对象 -->
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					text:'点我试试看',
					html:'<a href="http://www.itcast.cn">试试就试试</a>'
				}
			});
		</script>
	</body>
</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="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="checkbox" value="Java" v-model="language">Java<br>
		<input type="checkbox" value="PHP" v-model="language">PHP<br>
		<input type="checkbox" value="Swift" v-model="language">Swift<br>
		<h2>
			你选择了：{{language.join(",")}}
		</h2>
	</div>
	<script>
			let app = new Vue({
				el:"#app",
				data:{
				language:[]
				}
			});
	</script>
	</body>
</html>

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

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

3.v-on

基本用法

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

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

简写语法：
@事件名="js片段或函数名"
例如 v-on:click=‘add’ 可以简写为 @click=‘add’

示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
	<body>
		<div id="app">
			<!--直接写js片段-->
			<button @click="num++">增加</button>
			<!--使用函数名，该函数必须要在vue实例中定义-->
			<button @click="decrement">减少</button>
			<h2>
				num = {{num}}
			</h2>
		</div>
	<script>
		let app = new Vue({
		el:"#app",
		data:{
			num:1
		},
		methods:{
			decrement(){
			this.num--;
		}
	}
});
	</script>
	</body>
</html>

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

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们
可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
在这里插入图片描述
示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vuejs测试</title>
	<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<!--直接写js片段-->
	<button @click="num++">增加</button>
	<!--使用函数名，该函数必须要在vue实例中定义-->
	<button @click="decrement">减少</button>
	<h2>
		num = {{num}}
	</h2>
	<hr>
	事件冒泡测试：<br>
	<div style="background-color: lightblue;width: 100px;height: 100px"
	@click="print('你点击了div')">
	<button @click.stop="print('点击了button')">点我试试</button>
	</div>
	<br>阻止默认事件：<br>
	<a href="http://www.itcast.cn" @click.prevent="print('点击超链接')">传智播客</a>
</div>
<script>
	let app = new Vue({
	el:"#app",
	data:{
		num:1
	},
	methods:{
		decrement(){
			this.num--;
		},
		print(msg){
			console.log(msg)
		}
	}
});
</script>
</body>
</html>

4.v-for

v-for作用: 列表渲染,当遇到相似的标签结构时,就用v-for去渲染

格式

(item,index) in 数组或集合
参数item:数组中的每个元素
参数index:数组中元素的下标

(value, key, index) in 对象
参数index:对象中每对key-value的索引 从0开始
参数key:键	
参数value:值

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--获取vue中data里面的数据-->
    <!--遍历数组-->
    <p v-for="(item, index) in arr">{{index+1}} ===== {{item}}</p>
    <hr/>

    <!--遍历对象-->
    <p v-for="(value, key, index) in person">{{index+1}} ==== {{key}} ==== {{value}}</p>
    <hr/>

    <!--遍历对象数组-->
    <p v-for="(person, index) in personArr">{{index+1}} ===== {{person.name}} ==== {{person.age}} ===== {{person.gender}}</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data : {
            arr : ["张三", "李四", "王五"],
            person : {name:"刘备", age:"25", gender:"男"},
            personArr : [
                {name:"刘备", age:"25", gender:"男"},
                {name:"关羽", age:"28", gender:"男"},
                {name:"张飞", age:"29", gender:"男"},
            ]
        }
    });
</script>
</body>
</html>

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
如果使用key这个功能可以有效的提高渲染的效率；key一般使用在遍历完后，又增、减集合元素的时候更有意义。
但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。也就是key是该项的唯一标识。
示例：

<ul>
<li v-for="(item,index) in items" :key="index"></li>
</ul>

这里使用了一个特殊语法： :key="" 后面会讲到，它可以让你读取vue中的属性，并赋值给key属性
这里绑定的key是数组的索引，应该是唯一的

5.v-if和v-show

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性display 。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 设置vue所管理的视图 -->
		<div id="app">
			<!-- 获取vue对象中data里的数据 -->
			<p v-if="isShow">我是v-if数据</p>
			<p v-show="isShow">我是v-show数据</p>
		</div>
		
		<!-- 引入Vue.js -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 创建Vue对象 -->
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					isShow:false
				}
			});
		</script>
	</body>
</html>

在这里插入图片描述

与v-for结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件
在这里插入图片描述
效果:

v-else

可以使用 v-else 指令来表示 v-if 的“else 块”：
在这里插入图片描述
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

在这里插入图片描述
v-else-if ，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

6.v-bind

属性上使用vue数据

看到这样一个案例
在这里插入图片描述
解读：

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

该如何实现？

大家可能会这么想，既然color值会动态变化为不同的class名称，那么我们直接把color注入到class属性就好了，于是就这样写：
<div class="{{color}}"></div>
这样写是错误的！因为插值表达式不能用在标签的属性中。
在这里插入图片描述

class属性特殊用法

在这里插入图片描述
之前案例改写

效果:

计算机属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，有一个日期的数据，但是是毫秒值：

data:{
birthday:1429032123201 // 毫秒值
}

在页面渲染，希望得到yyyy-MM-dd的样式则需要如下处理：
在这里插入图片描述
虽然能得到结果，但是非常麻烦。
Vue中提供了计算属性，来替代复杂的表达式：

计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
效果：

watch

监控

watch可以让我们监控一个值的变化。从而做出相应的反应。
示例:
在这里插入图片描述
效果：

深度监控

如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化，例如：
在这里插入图片描述

在这里插入图片描述

第四章组件化

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了开发的成本。所以会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

定义全局组件

通过Vue的component方法来定义一个全局组件。
在这里插入图片描述

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

效果:
在这里插入图片描述

组件的复用

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

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

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

局部注册

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，会采用局部注册。

先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

然后在Vue中使用它：
在这里插入图片描述

组件通信

通常一个单页应用会以一棵嵌套的组件树的形式来组织：
在这里插入图片描述

父向子传递props

比如有一个子组件：
在这里插入图片描述

Vue ajax

axios简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios的github地址：https://github.com/axios/axios

# 如果使用npm则可以如下安装
npm install axios

或者也可以直接使用公共的CDN（内容分发网络）服务：

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios应用

方法说明

axios可以使用的方法有：

axios(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

说明: 既可以在浏览器端又可以在node.js中使用的发送http请求的库，支持Promise，不支持jsonp

如果遇到jsonp请求, 可以使用插件 jsonp 实现

通过Http请求的不同类型(POST/DELETE/PUT/GET)来判断是什么业务操作(CRUD )

HTTP方法规则举例

HTTP方法	数据处理	说明
POST	Create	新增一个没有id的资源
GET	Read	取得一个资源
PUT	Update	更新一个资源。或新增一个含 id 资源(如果 id 不存在)
DELETE	Delete	删除一个资源

发送get请求

axios.get('/user?id=12345')
    .then(response => {
    	console.log(response.data);
	})
    .catch(error => {
    	console.dir(error)
	});

发送post请求

axios.post('/user', "name=迪丽热巴&age=23")
    .then(response => {
		console.log(response.data);
	})
    .catch(error => {
		console.dir(err)
    });

axios.post(请求路径, 携带参数)

.then(response=>{

xxx

})

.catch(error => {

yyyy

});

tips

this在axios函数里面是用不了的,两种解决方案,第一传值,第二个用箭头函数
赋值

 <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{message:"ajax"},
            methods:{
                ajaxGet:function() {
                	//this代表当前vue实例,赋值给_this变量，这时_this就代表了vue实例
                    var _this = this;
                    axios.get("/ajaxServlet?name=lisi&age=20").then(function(response) {
                    //这里面的this代表的是axios实例
                        console.log(response);
                        _this.message = response.data;
                        // this.message = response.data;
                        console.log(this.message)
                    }).catch(function(error) {
                        console.log(error);

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

箭头函数

<script type="text/javascript">
//用箭头函数后axios里的this就代表vue实例
    new Vue({
        el:"#app",
        data:{message:"ajax"},
        methods:{
            ajaxGet:function() {
                var _this = this;
                axios.get("/ajaxServlet?name=lisi&age=20").
                then(response=>{
                    this.message = response.data;
                }).catch(function(error) {
                    console.log(error);

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

案例

/**
 * 使用Vue实现数据的CRUD操作
 */
new Vue({
    el:"#app",
    data:{
        //定义对象,存储单个用户数据
        userInfo:{},
        //定义数组,存储多个用户数据
        userList:[]
    },
    methods:{
        //定义函数,实现删除
        deleteUser:function(id){
            //提示用户
            if(confirm("确定要删除吗")){
                //发生请求
                axios.get("/user?operator=delete&id="+id).
                then(response=>{
                    //展示全部数据
                    this.findAll();
                }).
                catch(error=>{

                });
            }
        },

        //定义函数,实现修改数据
        update:function(){
          //获取修改后的数据,提交服务器
            axios.post("/user?operator=update",this.userInfo).
            then(response=>{
                //展示全部数据
                this.findAll();
            }).
            catch(error=>{

            });
        },

        //定义函数,修改之前的数据回显
        findById:function(id){
          //发生请求,服务器提交要查询的主键
          axios.get("/user?operator=findById&id="+id).
          then( response=>{
              //response响应回来结果 键data json数据
              //json数据,赋值Vue对象中的键 userInfo
              this.userInfo = response.data;
              //弹出修改对话框
              $("#update_modal").modal("show");
          } ).
          catch(error=>{

          });
        },

        //定义函数,发生异步请求,获取所有的用户数据 ,响应json数据
        findAll:function(){
            //发生get请求
            axios.get("/user?operator=findAll").
            then( response=>{
                console.log(response);
                //响应回来json(数组)赋值给 userList键
                this.userList = response.data;
            }).
            catch(error=>{
                console.log("服务器响应失败"+error);
            });
        },

        //定义注册函数,添加用户的数据
        register:function(){
            //获取对象userInfo的数据
            //console.log( this.userInfo );
            //服务器发生请求,提交参数 填写用户名和余额
            //数据封装到了userInfo
            axios.post("/user?operator=register",this.userInfo).
            then(response=>{
                //调用findAll()
                this.findAll();
            }).
            catch(error=>{

            })
        },

        //定义函数添加事件
        add:function () {
            //打开窗口即可
            //jQuery获取div,调用bootstrap前端框架方法 model()
            $("#add_modal").modal("show");
        }
    },
    //生命周期的钩子函数
    //对象挂载完成,调用函数,发生请求
    mounted:function(){
       this.findAll();
    }
});

查询所有
在这里插入图片描述
更新

添加

金钰～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue

Vue基础第一章 Vue简介1. Vue是什么Vue.JS是优秀的前端 JavaScript 框架库和框架的区别:库(如jQuery)库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API框架框架提供了一套完整解决方案,使用者要按照框架所规定的某种规范进行开发2. 为什么要学习 Vue随着项目业务场景的复杂,传统模式（html+jquery）已无法满足需求就出现了Angular/React/Vue等框架企业需求主流框架之一(React Angula
复制链接

扫一扫