vue基础

##vueJs基础
###1 VueJs介绍
Vue.js是一个构建数据驱动的web界面的渐进式框架。易于上手，还便于与第三方库或既有项目整合
####MVVM模式
MVVM是Model-View-ViewMode的简写。它本质上就是MVC的改进，MVVM就是将其中的VIew的状态和行为抽象化，让我们将视图UI和业务逻辑分开
MVVM模式和MVC模式一样，主要的目的是分离视图和模型
###Vue的入门
###Vue的语法
1. 插值表达式
2. 事件的绑定
3. 数据的显示
4. 逻辑判断和循环输出
###Vue的生命周期
1. 8个生命周期的执行点
1. 4个基本
2. 4个特殊
###axios的Ajax异步请求
它和jQuery的Ajax比较近似

###案例
实现用户的查询列表和更新操作
1. 前端:Vue
2. 后端：ssm
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C3IfbbZV-1575349080847)(https://i.imgur.com/w7JH89e.png)]




快速入门

Vue:

#################################333




v-on:mouseover

	

		
		

			这是一个文件域
		
	
	

######事件修饰符
Vue.js为v-on提供了事件修饰符来处理dom事件细节，如：event.preventDefault()或eventstopPropagation()
Vue.js通过由点（.）表示的指令后缀来调用修饰符
1. .stop
2. .prevent
3. .capture
4. .self
5. .once




v-on:事件修饰符

##v-bind
插值语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令




v-bind的使用


##Vue中的按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符
全部的按键别名：
1. .enter
2. .tab
3. .delete(捕获删除和退格键)
4. .esc
5. .space
6. .up
7. .down
8. .left
9. .right
10. .ctrl
11. .shift
12. .meta




v-on:按键修饰符

	


	

		Vue:
	

###vue中的v-for的使用




v-for遍历数组


#################################################333333
###vue的生命周期
v-if是根据表达式的值来决定是否渲染元素
v-show 是根据表达式的值来切换元素的display css属性

	
	
	



	

		{{message}}
	

###############################################333333
###Vue中的Ajax
vue-resource:是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务，后来使用axios
####axios
Axios是一个基于promise的Http库，可以用在浏览器和node.js中axios的github:http://github.com/axios/axios
####引入axios
首先引入axios，如果你使用es6，只需要安装axios模块之后
import axios from ‘axios’;//安装方法
npm install axios//或
bower install axios
也可以使用script引入

为了方便起见，为所有支持的请求方法提供了别名
1. axios.request(config)
2. axios.delete(url[,config])
3. axios.get(url[,config])
4. axios.head(url[,config])
5. axios.post(url[,config])
6. axios.put(url[,config])
7. axios.patch(url[,config])