VUE学习总结

什么是vue？
	vue是一个前端的js框架，是一个渐进式框架；
	渐进式：指的是vue可以控制代码的范围可调控。
什么是MVVM？
	Model(模型)指的是后端传递的数据。
	View(视图)指的是所看到的页面。
	ViewModel(视图模型)是mvvm模式的核心，它是连接view和model的桥梁。
		它有两个方向：
			1.将模型转换成视图，也就是把后端传递的数据转化成所看到的页面，实现方式是数据绑定。
			2.将视图转化成模型，即将所看到的的页面转化成后端的数据，实现方式是DOM事件监听。
		这两个方向都实现的，我们称之为数据的双向绑定。
	
	在MVVM的框架下，视图和模型是不能直接通信的。他们通过ViewModel来通信，ViewModel通常要
		实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的变化，然后通知到对应的视图做自动更新，
		而当用户操作了视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定

04vue入门案例的前期准备
创建了项目：
1.导入了vue.js;
2.把练习的html导入进去；

05vue的入门案例
如何创建一个Vue对象？
new Vue({json对象});

	参数json对象中第一层的键值对的键不能变，是因为vue只识别固定的键名；
	
如何让Vue接管一个区域？
	el:"#id值"
如何把data中的某个属性显示到某个标签体中？
	{{变量名}}

<script>

//view model
new Vue({
// 把某个区域交给vue进行接管 el:"#id"
el:"#app",
// 数据信息
data:{
message:“hello vue!”
}
});

06vue的插值表达式.avi
1.插值表达式支持常见的运算符；
2.插值表达式不支持流程控制语句；

{{message}}

{{ number + 1 }}


{{ false ? “张三” : “王五”}}

07vue的v-on绑定点击事件
应该把点击后回调的函数定义在哪里？
<button v-on:事件名=“fun1(‘Vue v-on’)”>vue的onclick

<div id="app">

{{message}}

vue的onclick

08vue的v-on键盘事件和阻止事件默认行为
如何获取事件的详细信息？
event对象：是一个封装事件详细信息的对象
如何阻止事件的默认行为？
event.preventDefault();

************************
	Vue:<input type="text" v-on:keydown="fun($event)">
		调用fun方法时，传递的参数名字必须叫  $event;

new Vue({
el:"#app",
methods:{
fun:function (event) {
var keyCode = event.keyCode;
// alert(keyCode);
if(!(keyCode >= 48 && keyCode <= 57)) {
//2.阻止默认行为执行
// 现在是text 输入框，我们只能够输入数字，不能输入其他值，因此阻止了默认行为的执行
event.preventDefault();
}
}
}
});
09vue的v-on鼠标移动事件和阻止事件传播

如何停止事件的传播？
	event.stopPropagation
************
	v-on:可以使用@ 替代   v-on 代表事件 @也可代表事件

10vue中的事件修饰符
使用vue，如何阻止事件的默认行为？
v-on:事件名.prevent;

11vue中v-text和v-html以及v-bind的使用
v-text="

hello

"和v-html="

hello

"有什么区别？
v-text:
以文本的形式设置
v-html:
以子标签的形式设置

在标签的属性上，能不能解析"{{message}}",把message变量对应的值取出来？
	如果要使用data中定义的变量：
		1.在标签体内部使用：
			{{变量名}}
		2.在标签的属性上使用：
			v-xxx="变量名"

v-bind如何简化？

直接使用: ：
v-bind 作用：给属性赋值(表单的属性赋值交给V-model)

12vue中的按键修饰符
.enter
回车
.tab
制表符
.delete
删除键
.esc
退出
.space
空格
.up
上
.down
下
.left
左
.right
右

product ： 每一次循环取出来的元素
index ：每次循环的索引

序号	姓名	年龄
{{index}}	{{p.username}}	{{p.age}}

14vue中的v-model的使用
使用v-model其实就是给表单项的value属性赋值；

思考？
	在案例中，能不能用v-bind替换v-model？
	
	
给表单项的value属性赋值，那么使用v-model，支持数据双向绑定；
如果是其他属性，则使用v-bind完成；

15vue中的v-show和v-if的使用
v-if和v-show有什么用？
控制某个元素是否显示。
v-if和v-show有什么区别？
v-if：
不渲染元素
v-show：
使用display：none

西安 北京

16vue的生命周期介绍
初始化阶段：
beforeCreate；
组件即将创建，进行组件事件和生命周期的初始化。
created：
组件创建完成
使用：
1.异步请求接口数据；
2.数据修改；
beforeMount：
组件即将挂载，
mounted：
组件挂载结束

运行阶段：
	beforeUpdate：
		这个阶段进行的是vdom的生成和diff算法的对比，都是在内部进行的
	updated：
		组件更新完毕
		
销毁阶段：
	beforeDestory:
		组件即将销毁，准备调用$destory()方法
		
	destory：
		组件销毁结束。
		
$destory()，手动销毁vue对象

****************************
	在初始化阶段的回调函数created中，发送异步请求，从服务器拿数据；

23案例-编写vuejs代码实现查询所有并分析解决遇到的问题

使用axios发送异步请求，回调函数内部直接写this，是否代表vue对象？
	不代表vue对象；
	var _this = this;

24案例-编写根据Id查询和更新方法并解决更新时遇到的问题
axios.get(“user/findAll.do”).then(function (response) {
_this.userList = response.data;
console.log(_this.userList);
}).catch(function (err) {
console.log(err);
});
使用axios如何发送post异步请求？
axios.post(“user/update.do”,_this.user).then(function (response) {
_this.findAll();
}).catch(function (err) {
});
发送post异步请求，传递json数据到服务器，springmvc如何才能把json数据自动解析为一个user对象？
在参数上加 requestBody注解

事件传播

mvc&mvvm

mvvm