温故知新丨Vue纸上得来终觉浅，绝知此事要躬行。

纸上得来终觉浅，绝知此事要躬行。

实例

Vue中的this指向实例 new Vue({})
Vue 实例也代理了 data 对象上所有的属性 vm.a === vm.$data.a
this.$el Vue 实例使用的 DOM 根元素

V-model

适用于表单控件，因为有input事件,解析如下：

<input type = 'text' :value = 'msg' @input = 'change'>

methods: {
    change (e) {
      this.msg = e.target.value
    }
}

组件

局部组件

声明局部组件，首字母大写

var App = {
    template:``,
    data:(){
        return {}
    }
}

挂载组件

components:{
    App
}

使用组件

template:'<App>'

全局组件

全局：Vue.component('组件名',组件对象)

Vue.component('name',{
    template:`<div>全局组件</div>`
}
)

渲染组件

创建子组件(对象)
var Header = { template:'模板' ,data是一个函数methods:功能,components:子组件们 }
在父组件中声明，根属性 components:{ 组件名:组件对象 }
在父组件要用的地方使用 <组件名></组件名>

组件通信

父到子

父组件中先 :自定义属性名
子组件声明 props:['自定义属性名']
传递过来的 props 属性的用法如 data 一样

<!--父组件-->
<Vcontent  :posts = 'posts'/>

<!--子组件-->
var Vcontent = {
    template: `
		<div class='content'>我是内容组件
			<ul>
				<li v-for = '(item,index) in posts'>
					<h3>{{item.title}}</h3>
					<h4>{{item.content}}</h4>
				</li>
			</ul>
    	</div>	`,
        props: ['posts']
    }

子到父

子要绑定原生事件，原生事件函数用 this.\$emit(‘自定义的事件名’,arg1) 触发父组件中子组件自定义的事件名
父组件中的子组件:自定义事件的名字 = 'fn'绑定自定义的事件
父组件就可以触发 fn 的函数数据就可以从子组件中传来

<hello @pfn="parentFn"></hello>

<script>
  Vue.component('hello', {
    template: '<button @click="fn">按钮</button>',
    methods: {
      // 子组件：通过$emit调用
      fn() {
        this.$emit('pfn', '这是子组件传递给父组件的数据')
      }
    }
  })
  new Vue({
    methods: {
      // 父组件：提供方法
      parentFn(data) {
        console.log('父组件：', data)
      }
    }
  })
</script>

provide

inject:[]

render

进入、离开

transition组件
过渡的类名：v-enter-active , v-leave-action
naem属性 代替类名的默认前缀 v-
动画：animationend
自定义类名："enter-active-class="animated tada", "leave-active-class="animated bounceOutRight"
同时使用记得使用 type 特性
多元素,同标签名建议使用 key

列表过渡

<transition-group> 组件封装

混入Mixin

Vue-Router

配置

默认跳转：reddirect
路由：mode:'history'
基本路劲：'base:'
样式匹配：模糊匹配linkActiveClass:'active-link'，完全匹配linkExactActiveClass:'exact-active-link'
scrollBehavior(to,from.savedPositio) 滚动行为

<!--参数分别代表：到达的路径，起始的路径，保存的是否曾经去过此路径，然后拿到路由信息，滑动条的位置-->
scrollBehavior(to,from.savedPositio) {
    if(savedPosition) {
        return savedPosition
    //以前的滚动的位置
    }else {
        return {x:0,y:0}
        //默认最上，最左
    }
}

parseQuery(query)，stringifyQuery(obj)
自动设置哈希：fallback:ture

参数传递

导航守卫

beforeEach()，全局前置守卫
beforeEnter()，定义在路由独享守卫
beforeResolve()，全局解析
afterEach()，全局后置守卫
beforeRouterEnter(to,from,next)组件内部
beforeRouterUpdate(to,from,next)组件内部
beforeRouterLeave(to,from,next)组件内部

完整的导航解析流程：
导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。