Vue.js Ajax(vue-resource)
引入1<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
get请求1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-res ...
Vue.js的事件处理器中Ajax请求无法通过this调用Vue实例的数据
解决办法Ajax请求外定义变量
let _this=this;
Ajax请求内使用该变量调用Vue实例的数据
_this.数据名=要修改的值
错误的代码12345678910111213141516171819202122232425262728293031323334353637383940414243444546<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/vue.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></scrip ...
Vue.js使用Axios请求
概述Vue.js 2.0版本推荐使用Axios来完成ajax请求，Axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中，推荐使用Axios，不推荐使用vue-resource
引入直接在页面引入1<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
使用命令安装1npm install --save axios
get请求示例1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title< ...
Spring Boot解决跨域问题
概述如果没有实现跨域，前后端分离项目中Ajax就无法返回数据，方法有两个：（推荐使用第二种）
使用@CrossOrigin注解
新建一个配置类，实现WebMvcConfigurer的addCorsMappings方法
实现过程使用@CrossOrigin注解Spring Boot解决跨域使用@CrossOrigin注解，该注解有两个参数：
origins： 允许可访问的域列表
maxAge:准备响应前的缓存持续的最大时间（以秒为单位）
在指定类上方添加注解，整个类的方法都可以跨域访问
在指定方法上方添加注解，只有这个方法可以跨域访问
新建跨域配置类新建一个配置类，实现WebMvcConfigurer的addCorsMappings方法（推荐使用）
12345678910111213141516171819202122232425package com.ledao.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servl ...
Vue.js 路由
概述Vue.js 路由允许我们通过不同的 URL 访问不同的内容，通过 Vue.js 可以实现多视图的单页Web应用
引入1<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
简单实例12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/vue.js"></script> <scrip ...
Vue.js自定义指令
概述除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令
自定义指令分为全局指令和局部指令
下面分别注册全局指令和局部指令，指令功能：在页面加载时，元素获得焦点
全局指令每个实例都可以使用
1234567891011121314<div id="app" style="margin-left: 444px"> <p style="color: red">页面加载时,input元素自动获取焦点</p> 姓名:<input type="text" v-focus></div><script type="text/javascript"> Vue.directive('focus', { inserted: function (elements) { elements.focus(); ...
Vue.js 组件 - 自定义事件
概述父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件，以下实例中子组件已经和它外部完全解耦了，它所做的只是触发一个父组件关心的内部事件
代码1234567891011121314151617181920212223242526272829303132<div id="app" style="text-align: center"> <p style="color: red">{{total}}</p> <my-button v-on:increment="incrementTotal"></my-button> <my-button v-on:increment="i ...
父组件向子组件传递数据
概述prop 是子组件用来接受父组件传递过来的数据的一个自定义属性
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”
关于父组件和子组件：（下面的这段话中相同颜色代表同一组件）
我们将某段代码封装成一个组件，而这个组件又在另一个组件中被引入，而引入该封装的组件的组件叫做父组件（另一个组件），被引入的组件叫做子组件（这个组件）
代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/vue.js"&g ...
Vue.js组件
概述Vue.js组件有全局组件和局部组件
全局组件所有实例都能用，注册方法如下
1234//全局组件Vue.component('myh1', { template: '<h1 style="color: red">我的全局组件:myh1</h1>'})
局部组件在实例选项中注册，组件只能在这个实例中使用，注册方法如下
1234567//局部组件let Child = { template: '<h1>我的局部组件:Child</h1>'}let Child2 = { template: '<h1>我的局部组件:Child2</h1>'}
组件使用创建一个js文件专门用于定义组件
1234567891011//全局组件Vue.component('myh1', { template: '&l ...
Vue.js遍历数组时获取对象的下标
概述v-for=”(value, index) in 数组名”
第一个参数表示遍历时的对象，第二个参数则代表下标（参数值可以根据自己的需求设置）
参考代码使用了数组下标设置数组的值
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<div id="app"> <div> <h3 style="color: red">总价：{{calculatePriceTotal}}</h3> <h3 v-for="(value, index) in snacks"> <div style="background: beige"> <p style="color: blue"> ...
