Vue基础语法、生命周期

一、在官网上下载Vue.js

1. 官网：https://cn.vuejs.org/ 学习 | 教程 | 安装。
2. 使用官网提供的CDN（内容分发网络）。

二、创建Vue实例

var vm = new Vue({
	el:'表示挂载点的选择器',
	data:{
		//数据区
	},
	methods:{
		//方法区
	}
})

三、需要掌握的术语

1、Vue实例：

利用new根据构造函数Vue()创建的vm实例就是Vue实例。

2、Vue实例的选项：

1. el：通过选择器将Vue实例与DOM节点挂载起来。
2. data：为Vue实例设置所需要用到的数据，即“数据区”。
3. methods：为Vue实例设置操作挂载点节点的方法，即“方法区”。

3. Vue实例的属性：

1. $ el：返回Vue实例挂载点所对应的DOM节点。vm.$el===document.querySelsctor("#app");
2. $ data：返回Vue实例数据区中的所有数据。vm.$data.w === vm.w //返回true

4. 挂载点：

Vue实例与之挂载的DOM节点就被称为“挂载点”。

四、如何为挂载点对象绑定事件

1. 利用Vue指令 v-on为挂载点对象绑定事件。

<button v-on="btnClick">确定</button>

2. 将事件代码书写在Vue实例的方法区。

methods:{
	btnClick:function(){}
}

3. 在Vue实例方法区中的函数内部如何引用Vue实例数据区中的数据
   • vm.$data.todayData
   • vm.todayData
   • this.todayData
4. 重点记忆：在Vue方法区中的函数内部，关键字this永远指向Vue实例vm。

五、文本插值的使用

1. Mustache语法：{{}}
2. 文本插值的特点：
   A. 只能使用数据区内部的数据，不能使用数据区以外的数据。
   B. HTML标记的属性取值不能使用文本插值的方法。
   <a href='http://www.baidu.com' title='{{title}}'>百度百科</a> <!-- 这种用法是错误的 -->
   C .若文本插值的内容包含HTML代码，则无法被浏览器解释。
   D .数据区中的数据对于页面来说是双向绑定的。
   E .文本插值内部不能出现流程语句。
   F .文本插值内部可以出现表达式。
3. 数据区可以定义在Vue实例以外：
   A .利用字面量的方式创建数据区对象：var data_1={a:10,b:20};
   B .利用构造函数来创建数据区对象：

var data_2=new Object();
  data_2.a=10;
  data_2.b=20;

4. 关于文本插值的指令：

v-text：功能与{{}}文本插值相同。<p v-text="title"></p>
v-html：功能与{{}}文本插值相同，同时也可以解释HTML代码。<p v-html="title"></p>
v-once：不再支持双向绑定。<p v-text="title" v-once></p>
v-pre：忽略文本插值的功能。<p v-pre>{{title}}</p>

六、Vue实例的生命周期

Vue实例从创建之初，一直到被销毁的全过程被称为Vue实例的生命周期（Life Cycle）

/*有关Vue实例生命周期的内容*/
var vm = new Vue({
	el:'#vm',
	data:{
		
	},
	methods:{

	},
	/*Vue实例创建阶段*/
	beforeCreate(){
		console.log("Vue实例创建之前执行,Vue实例尚不存在")
		console.log(this.$el);
		console.log(this.$data);
	},
	created(){
		console.log("Vue实例创建成功后执行,完成了数据的初始化")
		console.log(this.$el);
		console.log(this.$data);
	},
	/*Vue实例的挂载阶段*/
	beforeMount(){
		console.log("完成了挂载点的初始化")
		console.log(this.$el);
		console.log(this.$data);
	},
	mounted(){
		console.log("完成了挂载点与Vue实例的挂载过程")
		console.log(this.$el);
		console.log(this.$data);
	},
	/*Vue实例的更新阶段：
	当对数据区中的数据进行修改时发生更新阶段的钩子函数的执行。*/
	beforeUpdate(){
		console.log("更新前")
		console.log(this.$el);
		console.log(this.$data);
	},
	updated(){
		console.log("更新后");
		console.log(this.$el);
		console.log(this.$data);
	},
	beforeDestroy(){
		console.log("销毁前")
		console.log(this.$el);
		console.log(this.$data);
	},
	destroyed(){
		console.log("销毁后")
		console.log(this.$el);
		console.log(this.$data);
	}
})