vue 组件和路由

作者: 午夜阳光5021 | 来源:发表于2018-09-02 14:37 被阅读357次

vue-router 快速入门
vue路由懒加载及组件懒加载
vue-cli的路由配置
router - 2018-06-25
Vue路由配置
CnodeJS-Vue (二) --vue-router
Vue中的动态路由基本使用方式
Vue-router 路由 (常见用法)
Vue Router路由插件
Vue Router简明教程

===

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的使用

vue-router入门

路由入门页面.png

路由入门.png

vur-router传参

vue-router传参页面.png

vue-router传参.png

vue-router嵌套

路由嵌套页面.png

路由嵌套.png

vue-router 快速入门
概述 vue-router是vue.js官方的路由插件，vue的单页应用是基于路由和组件的，路由用于设定访问路径，...
vue路由懒加载及组件懒加载
路由和组件的常用两种懒加载方式：1、vue异步组件实现路由懒加载component：resolve=>(['...
vue-cli的路由配置
vue-cli的路由配置 vue-router路由管理路径引用组件：import 组件名 from 组件路径使用r...
router - 2018-06-25
2018-06-25 创建 vue异步组件技术 vue-router配置路由，使用vue的[异步组件](组件 — ...
Vue路由配置
Vue路由使根组件可以自由的挂载需要的子组件。路由配置：一、安装 npm install vue-router...
CnodeJS-Vue (二) --vue-router
在根组件App.vue中引入组件和路由 vue-router 默认 hash 模式 —— 使用 URL 的 has...
Vue中的动态路由基本使用方式
动态路由须知一旦路由对象注入到了new Vue的示例中，那么 new Vue的示例和所有路由组件的 dat...
Vue-router 路由 (常见用法)
vue-router 的常见用法一个完整的路由必须包含:路由链接和路由占位符、路由实例、路由规则链接的路由组件 ...
Vue Router路由插件
Vue Router，路由插件。 #要点 hash模式和history模式的区别？路由组件传参与props属性注...
Vue Router简明教程
官方路由插件，配合Vue使用，将组件 (components) 映射到路由 (routes)，然后告诉 Vue R...