vue2学习小计

双向数据绑定

原理：通过数据劫持结合发布者-订阅者模式的方式实现
具体：首先对数据进行劫持监听（使用Object.defineProperty），设置一个监听器Observer，用来监听所有属性。当属性发生变化，订阅者Watcher收到属性的变化通知并执行相应的函数，从而更新视图。解析器Compile扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
直通车

指令及其修饰符

• v-bind
• v-modal
• v-if
• v-for
• .click
• .mouseover
• .mouseout
• …

组件

组件之间数据传递

1.父组件向子组件传递数据

//父组件
<template>
	<div>
		<item-child :to-child-info="info"></item-child>
	</div>
</template>
<script>
import item-child from './itemChild'
export default {
	components:{item-child},
	data:{
		info:"i am from father"
	}
}
</script>

//子组件itemChild.vue
<template>
	<div>{{toChildInfo}}</div>
</template>
<script>
export default {
	props:['toChildInfo']   //必须是字符串形式
}
</script>

2.子组件向父子组件传递数据

//父组件
<template>
	<div>
		<item-child @from-child="showInfo"></item-child>
	</div>
</template>
<script>
import item-child from "./itemChild"
export default {
	methods:{
		showInfo(val){
			console.log(val);
		}
	}
}
</script>

//子组件itemChild.vue
<template>
	<div>
		<input type="text" v-model="inputVal" @blur="toParent()"/>
	</div>
</template>
<script>
export default {
	data:{inputVal:''},
	methods:{
		toParent(){
			this.$emit('from-child',this.inputVal);
		}
	}
}
</script>

3.非父子组件传递数据
在实际中还没用用到，其他博客可以搜到直通车
######组件属性

1. prop
2. keep-alive
   组件实例在组件第一次被创建的时候缓存下来。
   应用场景:有1、2两个选项卡，1选项卡中有3个选项卡。当在1选项卡中选中1.2选项卡，切换到2选项卡，再切换到1选项卡时1选项卡显示的是1.1选项卡的内容，而不是切换到2选项卡之前的1.2选项卡。突然发现好拗口，呃…官网有直白的效果更容易理解吧—>直通车

vue实例

1.数据data
当模板被多次复用时，data应该在函数中返回一个对象，而不是直接返回。这样可以使得每次模板在调用时都可以生成独一份的data（实例）。写法如下:

data(){
	return {

	}
}

2.方法methods
3.计算属性computed
基于依赖进行缓存。只有当相关依赖发生改变时，计算属性才会重新求值。
4.侦听属性watch
当某个数据发生变化时，执行侦听属性。
5.生命周期钩子
- created 该钩子函数是在（数据已和data绑定，初始化事件）之后执行的
- mounted 该钩子函数是在（虚拟DOM创建完成，并挂载到DOM元素上）之后执行的
- updated
- destroyed 调用钩子函数时，this指向调用它的vue实例。如果使用箭头函数，则会报错。
直通车

路由

控制路由跳转的几种方式：

1. 给DOM元素添加事件，事件中使用路由

this.$router.push(path:string);

2.使用router-link映射路由

<router-link to="path"></router-link>

原理就是在模板加载时，将router-link转换为a，href设置为属性to的值
3. 配置路由
配置好路由，直接给html中a链接的href属性赋值

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router{
	//mode为history使得URL不再带有#的hash模式
	mode:'history',
	routes:[
		{path:'/',component:index},
		{path:'/author',component:author,
		 children：[
			 {path:'/article',component:article},
			 {path:'/hots',component:hots}
	     ]}
	 ]
}

4.监听路由

watch:{
	$route(to,from){}
}

模块化