MVVM在vue中的应用案例

M：model-->在调用构造函数的参数对象中，有一个data属性，它定义的就是模型

V：view-->插入了一些特殊语法（比如{{}}）的HTML页面就是视图

VM：viewModel-->通过Vue（）构造函数创建的名为vm的实例就是视图模型

Vue.js的核心工作：创建一个视图模型对象。

let vm = new Vue({ //"根实例"--->一般一个应用中会有唯一的，最上层的Vue实例
	//“根实例中的选项对象”
	el: "#app", //表示元素，指定Vue.js动态控制的DOM元素根节点
	data: { //指定原始数据模型
		guess: '',
		key: 0,
	},
	method: { //对原始数据进行加工变形用于视图中
		setKey() { //采用Es6语法表示方法
			//可以采用this指针来引用data对象中定义的属性
			this.key = Math.round(Math.Random() * 100)
		}
	},
	mounted() {
		//钩子函数之一：实例被挂载后调用
		this.setKey()
	},
	computed: { //后续解释
		result() {
			const value = parseInt(this.guess);
			if (isNaN(value)) {
				return "请猜一个1~100的整数："
			}
			if (value === this.key) {
				this.setKey();
				return "Yes!"
			}
			if (value > this.key)
				return "猜大了！"
			return "猜小了！"
		}
	}
})

Vue实例的生命周期

Vue.js会自动维护每个Vue实例的生命周期，也就是说，每个Vue实例都会经历一系列的队创建到销毁的过程。 例如，创建实例对象、编译模板、将实例挂载到页面上，以及最终的销毁等。在这个过程中，Vue 实例在不同阶段的时间点向外部条露出各自的回调函数。这些回调函数称为“钩子函数”开发人员可以在这些不同阶段的钩子函数定义业务逻辑。

例如，考虑上面的用户信息页面。在定义user 对象的时候，我们并不知道用户的具体信息，通常是在页面加载后，通过AJAX向服务器发送请求，调用服务器上的某个API,从返回值中获取有用的信息来给user 对象赋值。