【Vue 极速指南】高级篇

看这篇之前可以回顾一下《【Vue 极速指南】基础篇》。在这篇文章，你将快速学习到：

• 组件
• 自定义指令
• 过滤器
• 混入
• 路由
• 插件

组件

• 全局组件
  • 注册组件：Vue.component('custom-component',{})
  • 使用组件：
• 本地组件
  • 定义组件： var child = { template: ''}
  • 注册组件： components: { 'child-component': child }
  • 使用组件：
• 组件属性
  • components: { props: ['message'] }
• data 必须是一个 Function
• 方法和 Vue 实例一样
• 父子组件之间的通讯
• 动态组件
• 异步组件
  • 使用 webpack 的 code-splitting

    
    
    
    



    

        {{ message }}
        
        
        
    
    

自定义指令

• 注册指令: Vue.directive('custom-directive')
• 使用指令：v-custom-directive
• 指令的钩子方法
  • bind
  • inserted
  • undate
  • componentUpdated
  • unbind

    
    
    
    



    

        {{ message | reverse }}
    
    

过滤器

• 注册过滤器：Vue.filter('customFilters')
• 使用过滤器：{{ data | customFilters }}

混入

TODO

路由

• 如何使用：
  • 创建 模版
  • 创建子组件
  • 定义路由
  • 创建 VueRouter 实例
  • 将路由放入 Vue 实例
• 动态匹配
• Navigation
  • router.push('')
  • router.push({ path: '', query: { key: 'value'}})
  • router.go(1)
• Navigation 钩子函数
  • 全局
    • beforeEach
    • afterEach
  • 路由
    • beforeEnter
    • afterEach
  • 组件
    • beforeRouteEnter
    • beforeRouteLeave

其它插件

• vue-resource
• vue-async-data
• vue-validator
• vue-animated-list

〖坚持的一俢〗