vue 组件和路由

===

• Vue组件
  • Vue组件的创建
    • vue.extend结合vue.component创建
    • vue.component创建
    • template方式创建
  • 组件中的指令以及事件绑定
  • 父子组件创建
  • 父子组件通信
    • 父组件传值给子组件(props)
    • 子组件传值给父组件($emit)
  • 利用component组件和is属性实现动态组件
• vue-router(路由)
  • vue-router入门
  • vur-router传参
  • vue-router嵌套

Vue组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

Vue组件的创建

vue.extend结合vue.component创建

vue.extend和vuecomponent创建组件.png

vue.component创建

vuecomponent创建组件.png

template方式创建

template创建组件.png

组件中的指令以及事件绑定

组件中指令和事件的使用.png

父子组件创建

父子组件.png

父子组件通信

父组件传值给子组件(props)

父组件传值给子组件页面.png

父组件传值给子组件.png

子组件传值给父组件($emit)

子组件传值给父组件页面.png

子组件传值给父组件.png

利用component组件和is属性实现动态组件

动态组件页面.png

动态组件.png

vue-router(路由)

vue-router文档

在一个系统中会由很多页面组成，在Vue开发中这些页面通常使用的是Vue中的组件来实现的，那么当在一个页面要跳转到另外一个页面的时候是通过改变url路径来实现的，那么这个时候Vue需要知道当前url对应的是哪个组件页面，这个控制着就是vue-router接下来，学习vue-router的相关写法,注意的是：vue-router 在vue2.0版本中做了很大的改动，所以要注意Vue的版本来选择预期对应的vue-router版本我们主讲vue-router2的使用

vue-router入门

路由入门页面.png

路由入门.png

vur-router传参

vue-router传参页面.png

vue-router传参.png

vue-router嵌套

路由嵌套页面.png

路由嵌套.png