Vue之MVVM模型

MVVM模型

1.创建一个vue实例

new Vue({
})

关于MVVM模型的解释：

M：模型（model）:data中的数据
V:视图（View）:模板代码
VM：视图模型（ViewModel）

观察可以发现：

1.data中所有的属性，最后都出现在了vm身上
2.vm身上所有的属性及vue原型上所有属性，在Vue模板中可以直接使用

<script type='text/javascript'>
let number= 18;
let person{
	name:'John',
	address:'Hangzhou'
}
Object.defineProperty(person,'age',{
	//进入配置对象模块
	value:18,//年龄设置18
	enumerable:true,//可以被枚举
	writable:true,//可以被修改
	configurable:true;//控制属性可以被删除
})

或者是

Object.defineProperty(person,'age',{
	//进入配置对象模块
	get(){
	//当age属性被读取时就会调用这个函数
console.log('读取成功');
return number;
	}
set(value){
//当age被修改时就会调用这个函数
	console,log('age被修改为',value);
	number=value;
	//这样console.log(person)就会得到修改过后的年龄值
}
})

2.数据代理

何为数据代理呢？

数据代理就是通过一个对象对另外一个对象中属性的操作(读/写)

vue中数据代理的好处：更加方便的操作data中的数据。

基本原理：

通过Object.defineProperty()来把data对象中的所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，在getter/setter内部去操作data中的属性。

3.vue事件处理
（1）vue的事件绑定
使用v-on：xxx 或@xxx绑定事件，其中xxx是事件名。比如： v-on:click绑定vue的点击事件。@click
（2）事件的回调需要配置在methods对象中，最终会在vm上。
（3）methods中配置的函数，不要用箭头函数，否则this就不再指向vm了。
（4）methods中配置的函数，都是被Vue所管理的函数，this指向的是vm或者组件实例化对象。
（5）@click='demo’和@click = 'demo($event)'效果一致，后置可以传递参数。

4.Vue事件修饰符

（1）prevent:阻止默认事件

（2）stop:阻止事件冒泡

（3）once:事件只触发一次。

（4）capture：使用事件的捕获模式

（5）self：只有event.target是当前操作的元素时才触发事件

（6）passive：事件的默认行为立即执行，无需等待事件回调。

5.键盘事件

<div id='root'>
	<input type='text' placeholder = '按下回车输入提示' @keyup.enter='showinfo'>
	//按下回车键，在控制台输出按键的编码
</div>
<script type='text/javascript'>
	new Vue(
	{
		el:'#root',
		data:{
		name:'hdu'
		},
		methods:{
		showinfo(e){
		if(keyCode!=13) return
		console.log(e.keyCode)
		}
		}
	}
	)
</script>

Vue中常见的按键别名;
换行;tab(特殊，需要配合keydown使用)
系统修饰键： ctrl,alt,shift,meta
（1）配合keyup使用：按下修饰键的同时，再按下其他键，然后释放其他键，事件才会被触发。
（2）配合keydown使用：正常触发事件