Vue.js基础知识

一、在官网上下载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.$e===document.querySelector(“#app”);
   （2）$data：返回Vue实例数据区中的所有数据。
   vm.$data.w===vm.w //返回true
4. 挂载点：Vue实例与之挂载的DOM节点就被称为“挂载点”。

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

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

 <button v-on:click=“btnClick”>确定</button>

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

	methods:{
		btnClick:function(){} 
	}

3. 在Vue实例方法区中的函数内部如何引用Vue实例数据区中的数据。
   （1）vm.$data.todayData
   （2）vm.todayData
   （3）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;

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

   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）=> 对应各阶段的钩子函数

1. 创建阶段：

   beforeCreate：在Vue实例创建之前执行，此时Vue实例上不存在。
   created：在Vue实例创建成功之后执行，此时已经完成了data的初始化。

2. 挂载阶段：

   beforeMount：在Vue实例完成挂载之前执行，此时完成了el的初始化。
   mounted：在Vue实例完成挂载之后执行，此时完成了挂载点与Vue实例的挂载过程。

3. 更新阶段：当对数据区中的数据进行修改时进入到更新阶段。

   beforeUpdate：在数据更新之前执行。
   updated：在数据更新成功之后执行。

4. 销毁阶段：当执行了vm.$destroy()方法后进入到销毁阶段。

   beforeDestroy：在Vue实例销毁之前执行。
   destroyed：在Vue实例销毁成功之后执行。