vue-router

Vue Router是Vue.js官方的路由管理器，严格来说，它是一款插件，但它又和Vue.js核心深度集成，Vue Router的版本依赖于Vue.js的版本，最新的vue-router 3.0 依赖于Vue.js 2.0及以上版本。 一　　安装Vue-router 　　 1，简介 　　Vue Router 有两种模式，分别是HTML5 History模式和hash模式。我们知道，Vue.js是主要用于构建单页面应用用户界面的渐进式框架，所以hash是Vue推荐的主力模式，如果你要使用History模式，需要配合后端进行一些单独的设置。 　　Vue Router 提供的主要功能包括但不限于： 　　　　嵌套路由和视图； 　　　　基于模块化、组件化的路由配置； 　　　　路由参数、查询； 　　　　简单过渡效果。 　　　　 　　 2，安装 　　　安装Vue Router也很简单，三种方式：script标签本地引入，CDN加速，模块化开发npm安装。 1 //标签本地引入 2 <script src="/vue.js"></script> 3 <script src="/vue-router.js"></script> 4 //vue-router依赖于vue.js,序偶一要先引入vue.js 1 //CDN加速 2 <script src="https://cdn.jsdelivr

一、 组件component 1. 什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码 组件是自定义元素（对象） 2. 定义组件的方式 方式1：先创建组件构造器，然后由组件构造器创建组件 方式2：直接创建组件 3. 组件的分类 分类：全局组件、局部组件 4. 引用模板 将组件内容放到模板<template>中并引用 5. 动态组件 <component :is="">组件 多个组件使用同一个挂载点，然后动态的在它们之间切换 <keep-alive>组件 二、 组件间数据传递 1. 父子组件 在一个组件内部定义另一个组件，称为父子组件 子组件只能在父组件内部使用 默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的 2. 组件间数据传递 （通信） 2.1 子组件访问父组件的数据 a)在调用子组件时，绑定想要获取的父组件中的数据 b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据 总结：父组件通过props向下传递数据给子组件 注：组件中的数据共有三种形式：data、props、computed 2.2 父组件访问子组件的数据 a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义 b)父组件在使用子组件的地方监听子组件触发的事件

vue-cli # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖 $ cd my-project $ npm install $ npm run dev 　vue-router import Router from 'vue-router' Vue.use(Router) let router=new Router({ routes: [//路径和页面一一对应 { path: '/home', name: 'Home', component: Home }, { path: '/', redirect: '/home' },//重定向 ] }); //名称代替路径 <router-link class="footer-item" exact to="home">首页</router-link> //打开页面前验证 router.beforeEach((to, from, next) => { if(to.path!=="/logon"&&!store.state.userInfo.Account){ next({ path: '/logon' }) return; }else{ next(); } }) vue

vuex 关键词：state，getters，actions，mutations，store。 state为状态的参数。 getters为获取器，用于过滤的方法获取参数。 mutations是改变状态参数的函数，但是不能直接被调用，需要对应的 store.commit （可以额外传参数）。 actions不是直接修改状态，而是基于mutations，可以执行异步处理 store更像一个容器，装着以上的所有函数和参数，最后需要注入到Vue的实例当中。 2.0 特性--辅助函数 辅助函数j就是可用可不用。如果你用了，它就会提高代码编写效率的。 mapState mapGetter mapMutation 举个例子，如果不用辅助函数 mapState ， computed: { count () { return this.$store.state.count } } 使用辅助函数 mapState ， computed: mapState([ // 映射 this.count 为 store.state.count 'count' ]) 如果不用辅助函数 mapGetter computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } } 使用辅助函数 mapGetter computed: {