vue 组件和路由

2018-09-02 本文已影响357人午夜阳光5021

===

Vue组件
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的使用