02-Vue实例

vue实例

MVVM框架模式了解

MVVM：Model+View+ViewModel

View的变化会自动更新ViewModel,ViewModel的变化也会自动同步到View上显示。这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。

MVVM模式的框架有：AngularJS、Vue.js和Knockout、Ember.js后两种知名度较低以及是早起的框架
模式。

View：是HTML文本的js模板 ViewModel：是业务逻辑层（一切js可视业务逻辑，比如表单按钮提交，自定义事件的注册和处理逻辑都在ViewModel里面负责监控俩边的数据）
Model ：数据层 对数据的处理（比如增删改查）

创建一个 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
// 选项
})

实例数据

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。（暴露出来直接访问）
当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<!-- View -->
<div id="app">{{ msg }}</div>

	// 我们的数据对象
var mydata = {msg: "Hello Vue!"};
var vm = new Vue({
	el: "#app",
	data:mydata // 该对象被加入到一个 Vue 实例中
});

为了触发视图的更新，需要设置初始值。比如：

data: {
	newTodoText: '',
	visitCount: 0,
	hideCompletedTodos: false,
	todos: [],
	error: null
}

阻止修改现有的属性：

var mydata = {msg: "Hello Vue!"};
Object.freeze(mydata);//阻止修改现有的属性
var vm = new Vue({
	el: "#app",
	data:mydata
});

实例方法

<!-- View -->
<div id="app">
	<p>{{ myMsg() }}</p>
	<button v-on:click="showMsg()">惦记我</button>
</div>
<!-- JS -->
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			msg: "Hello Vue!"
		},
		methods:{
			myMsg:function(){
				return this.msg;
			},
			showMsg:function(){
				console.log("Cilck My Button!!");
			}
		}
	});
</script>

1.使用methods属性给vue定义方法
2.在方法中使用this.属性名就可以直接访问data中的数据
3.在构造函数外部可以使用vm.方法名定义或者调用方法
4.methods除了返回数据，还可以和JS一样与DOM元素进行的事件的绑定。

除了 data数据属性 和 methods自定义方法，Vue 实例还暴露了一些有用的实例属性与方法。
它们都有前缀 $ ，以便与用户定义的属性区分开来

生命周期

vue实例从创建到销毁的过程称之为vue的生命周期。

完整的生命周期

实例生命周期的各个阶段

生命周期的业务应用场景

created ：进行ajax请求异步数据的获取、初始化数据
mounted ：挂载元素内dom节点的获取，以及子组件的初始化后再操作
nextTick ：针对单一事件更新数据后立即操作dom
updated ：任何数据的更新，如果要做统一的业务逻辑处理 watch监听具体数据变化，并做相应的处理

在 Vue 实例的生命周期中 beforeCreate() 、 created() 、 beforeMount() 和 mounted() 四个方法都是一次性地，它们只会被触发调用一次。