Vue学习（二）——6.25

数据绑定

1. {{ }}

2. v-text="[ ]"
   

数据渲染 v-for

<ul>
 <li v-for="(item,key) in list">
 	{{key}}
	{{item}}
 </li>
<ul>

属性绑定 v-bind:[]="[vue中的属性]"

• v-bind可以通过绑定class来实现样式的显示与否，也可以不仅仅传入一个属性，还可以传入多个属性来实现class的动态切换
• v-bind绑定style动态切换样式

绑定HTML v-html:[]=’’[]’’

双向数据绑定 v-model

1. 含义

双向数据绑定 :MVVM vue就是一个MVVM的框架
M: model
V: view
MVVM 意思就是说Model层的改变会影响View层，view层的改变也会影响Model层

2. 双向数据绑定必须在表单里面使用

事件绑定 v-on

1. 方法改变数据并且获取改变后的数据
2. 执行方法传值
3. 执行方法传入数据对象 ($event) 可以在方法中操作dom 或者获取自定义属性

Vue实现 ToDoList

1. 实现输入框增加
2. 通过点击checkbox来改变事情的状态
3. 实现键盘按下enter键时增加（通过事件对象$event）

if(e.keyCode == 13){//表示按了回车
	this.list.push({

	})
	//最后要把内容置为空
}

4. 实现刷新后页面数据不消失

• 缓存

localStorage.setItem('key',JSON.stringify(this.list))

• 生命周期函数

mounted(){
	var list = JSON.parse(localStorage.setItem('list'));
	if(list){//判断是否存在
		this.list = list
	}
}

5. 对localStorage进行封装

• 在src中新建文件夹Model
• Model中新建storage.js

6. Vue中引用封装好的storage.js

	import storage from ' ./model/storage.js'

	storage.set("list", this.list)

mounted(){
	var list = storage.get("list")
	if(list){//判断是否存在
		this.list = list
	}
}

组件（创建、引用、挂载）

页面由组件组成，组件里面有模版 业务逻辑 有样式（即html js css）
可以把公共的功能封装成一个组件 还可以扩展HTML

app.vue属于根组件，所有组件都挂载到根组件上,自定义的组件也可以挂载其他组件

路由：可以动态地挂载组件

• 创建组件

1. 项目src下新建文件夹components(放所有的组件)
2. 创建组件-components下新建【组件名.vue】(建议首字母大写)
3. 组件模版

<template>
	<!--所有内容都要被一个根节点包含起来！-->
	<div>	<!--表示根节点-->
		
	</div>

</template>

<script>
	export default{
		data(){
			return{
				msg:'我是一个数据'
			}
		},
		methods:{//定义方法
			run(){
				alert(this.msg);
			}
		}
	}
</script>

<!-- scoped代表局部作用域，样式只在该组件内生效，在根组件或其他组件内不生效-->
<style lang="scss" scoped>

</style>

• 引用组件
  在App.vue的 < script > 中引入

	import [组件名] from './components/[组件名].vue';

• 挂载组件
  把创建好的组件挂载到App.vue中去（只有挂载到根组件才能显示!）

	components:{
	//'[在根组件中用组件时使用的名字]':[组件名]
	'v-home':Home
	}

• 在模版中使用

	<v-home></v-home>

生命周期函数

组件挂载、更新、销毁的时候触发的一系列方法

• 首先创建一个Vue实例对象，这时候对象上只有一些默认的生命周期函数和默认时间，其他东西都未创建。

• beforeCreate()

1. 第一个生命周期函数，实例在完全被创建出来之前会执行它。
2. 在此生命函数执行时，methods和data中的数据都还未被初始化.

• create()

1. methods和data中的数据已经被初始化好了
2. 如果要调用methods中的方法或者操作data中的数据，最早在created（）中

• 此时Vue开始编译模版，执行Vue代码中的指令，最终在内存中生成一个编译好的字符串，然后把这个字符串渲染为内存中的DOM，此时只是在内存中渲染了模版。并没有把模版挂载在页面。

• beforeMount()

1. 模版已经在内存中渲染完成，但未挂载在页面。
2. 在它执行时，页面中元素还未被真正替换，还是之前写的一些模版的字符串，还是旧的

• 然后，这一步，将内存中编译好的模版真实的替换到页面中去。
• Mounted()

1. 实例创建期间最后一个生命周期函数，当执行完mounted，代表实例已经被完全创建好了，此时如果没有其他操作的话，这个实例，就静静躺在我们内存一动不动。
2. 如果要操作某些插件、操作DOM节点，最早要在Mounted()，执行完Mounted()，就表示整个实例已经初始化完毕了，此时组件已经脱离了创建阶段，进入到了运行阶段

• beforeUpdate()

界面未更新，数据已更新，执行此函数，页面上的数据是旧的，data是新的

• Updated()

1. 先根据data中的最新数据，在内存中渲染出最新的内存DOM树
2. 当内存DOM树更新后，会把内存最新的DOM树重新渲染到页面中去，完成了数据从data(Model层)到View层的更新
3. 运行阶段的两个周期函数，会根据data数据的改变有选择地改变0次或多次

• beforedestroy()

1. 实例从运行阶段进入销毁阶段，但实例身上的所有data和methods、过滤器、指令等都属于可用状态，还没有真正执行销毁功能
2. 页面销毁的时候要保存一些数据，就可以通过监听这个销毁的生命周期函数

• destroy()

执行到该函数时，组件已经完全被销毁，组件中的数据、方法、指令、过滤器都完全不可用了。