Vue2

_______________________________________________________________________________________________

4、兄弟组件通信

兄弟组件的通信，借助于一个Vue的实例(eventBus 事件总线)作为一个中介，组件通过监听该实例去完成事件的绑定和触发（仅）

varbus= new Vue();          //新建一个Vue实例，并接收这个实例，当作事件总线

Vue.component("发送方组件",{

  methods:{

    handleClick: function(){

     bus.$emit('event自定义事件名','arg1','arg2'...)

   }         //触发当前实例上的事件，第二个参数是触发时附加的参数，会传给监听器回调

  },

  template: `<button @click="handleClick">触发事件，进行通信</button>`

})

Vue.component("接收方组件",{

  created:function(){              //放在'组件实例创建完成后'的函数中，可以自动接收

   bus.$on('event自定义事件名',function(arg1,arg2...){ }

  }            //绑定监听当前实例上的自定义事件，事件由.emit触发

                //第二个参数是触发事件成功的回调函数，会接收所有传入'事件触发函数'的额外参数

  template: `<div>接收通信</div>`

})

_______________________________________________________________________________________________

路由

使用 vueRouter 插件可以实现SPA

单文件: 在webpack环境下使用路由模块:  或者在项目初始化时提前设置自动安装

        var Vue=require('vue')

        var VueRouter=require('vue-router')

        Vue.use(VueRouter)

VueRouter

① 引入 vue-router.js 文件

② 指定容器

<div id="example">

  <router-view></router-view>        //指定组件插入的容器

</div>

③ 创建各个子组件

var Test01Component=Vue.component("test01",{    //组件定义在最上面，才能加载路由

  template:`<div>

  <h1>这是子组件test01</h1>

  </div>`

});

④ 配置路由地址（分为三段）

constmyRoutes= [        //① 配置路由地址: 创建一个对象数组，每个对象指定path/component

  { path:'/myPath1',component:Test01Component },

  { path:'/myPath2',component:Test01Component},

  { path: "/",component: Test01Component }        //没有path,只有一个/时跳转的地址

];

constmyRouter= new VueRouter({        //② 创建一个VueRouter的实例，并接收

  routes:myRoutes       //指定 routes 属性为配置的路由地址，与①可合为一个

});

new Vue({

  router:myRouter       //③ 在vue的实例中指定router属性为路由 VueRouter 的实例

          <=> new VueRouter({routes:myRoutes});    //但不建议这样写，跳转不便

})

跳转:

html的方式  <router-link to="/myPath1">跳转到myPath1</router-link>  //渲染出来是一个 a 标签

js的方式:

jump:function(){ myRouterVueRouter的实例.push("/myPath1"); }

<button @click="jump">跳转到myPath1</button>

传参:

① 明确发送方、接收方

② 配置接收方的路由地址path

  {path: "/myPath1/:arg",component:Test01Component }

③ 接收方取得传递过来的参数

  created:function(){

    this.resArgdata数据=this.$route.params.arg;

  }

④ 发送方发送参数

<router-link to='/myPath1/20'>    <router-link v-bind:to="'/myPath1/'+value"></router-link>

<a href='#/myPath1/20'></a>       <a v-bind:href="'#/myPath1/'+value"></a>

jump:function(){ myRouter.push('/myPath1/20'); }

jump:function(){ myRouter.push("/myPath1"+this.value); }    //通过'该组件的数据'传参

jump:function(key){ myRouter.push("/myPath1/"+key);}        //通过'方法传来的参数'传参

触发事件绑定的方法:  <any @click="jump(key)"><any>

嵌套路由:

var MyMail = Vue.component("mail",{

  template: `<div>

  <h1>这是邮箱主页面</h1>

  <router-link to="/inbox">收件箱</router-link>

  <router-link to="/outbox">发件箱</router-link>

  <router-view></router-view>                       //① 为子路由指定容器

  </div>`

  });

② 在配置路由地址时，为子路由指定path/component

constmyRoutes=[

  { path:'/myPath1',component:Test01Component },

 {path:"/myMail", component:MyMail, children:[

    { path:"/inbox",component:inBox },

    { path:"/outbox",component:outBox}] },

  { path: "/",component: Test01Component }

];

注意: 子路由的跳转链接不是必须加在父路由中。可以加在项目的任一页面，都可跳向子路由，同时也会显示其父路由的内容

_______________________________________________________________________________________________

三、网络请求(使用vue-resource或者axios插件)

① 引入vue-resource.js文件

Vue.component('test',{

  data: function(){

    return { List:[] }

  },

  methods:{

    loadData: function(){    //this.$http.get()第一个参数是请求的url，第二个参数是传递的参数

     this.$http.get('data/stu.json请求url',{"id":123})        //② 发起网络请求 get/post

       .then(function(response){                 //响应成功的回调函数，参数是返回的数据

          this.List = response.data;                //③ 对响应到的数据进行操作

     })

    }

  },

  template:`<div>

  <ul><li v-for="tmp in List">{{tmp.name}}</li></ul>        //将返回的数据显示在视图上

  <button @click="loadData">加载数据</button>               //绑定请求事件

  </div>`

})

axios(爱可西柚子)******************************************************************************

特色: ① 浏览器端发起XMLHttpRequests请求  ② node端发起http请求  ③ 支持Promise API

      ④ 监听请求和返回  ⑤ 转化请求和返回  ⑥ 取消请求  ⑦ 自动转化json数据  ⑧ 客户端支持抵御

安装使用:

npm:  npm install axios --save-dev

cdn:  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

src/main.js: 引入axios

import axios from 'axios'

Vue.prototype.$axios = axios

src/App.vue: 拦截器，在请求或者返回被then或catch处理之前对它们进行拦截

created(){

  var loading = null;

  this.$axios.interceptors.request.use(config => {    //发出请求之前进行拦截

    if(store.state.token){  //判断是否存在token，如果存在的话，则每个http header都加上token

      config.headers.Authorization = `token ${store.state.token}`;

    }

    loading = this.$loading({ text:'请求中...' });

    return config;

  }, err => {

    this.$message({ message:'请求接口失败...', type:'warning', duration: 1333 });

    return Promise.reject(err);

  })

  this.$axios.interceptors.response.use(res => {      //对返回的数据进行拦截

    loading.close();

    return res;

  }, err => {

    loading.close();

    if(err.response){

      switch (err.response.status) {

        case 401:

store.commit(types.LOGOUT);//返回401(未授权)，清除token信息并跳转到登录页面

          router.replace({ path: 'login',

                           query: {redirect: router.currentRoute.fullPath}

          })

      }

    }

return Promise.reject(err);//返回接口返回的错误信息

  })

}

跨域请求:

config/index.js:

proxyTable:{

  '/api':{                           // '/api'文件中的匹配项

    target: 'http://erpserver.mgupiao.com',        //请求接口的地址

    secure: false,                                 //如果是https接口，需要配置此参数

    changeOrigin: true,                            //如果需要跨域，需要配置此参数

    pathRewrite:{ '^/api':'' }        // 因为在ajax的url中加了前缀 '/api'用于匹配，而原本的接口是没有这个前缀的，所以需要通过pathRewrite来重写地址，将前缀'/api'转为'/'

 },

  '/station': {

    target: 'http://erpserver.mgupiao.com',

    changeOrigin: true,

    pathRewrite: { '^/station': 'station' }

  }

},

axios的功能特性:

在浏览器中发送XMLHttpRequests请求

支持Promise API

拦截请求和响应

转换请求和响应数据

自动转换JSON数据

客户端支持保护安全免受XSRF攻击

请求方式:

var axios = this.$axios

axios(config)

axios.request(config)

axios.get(url[,config])

axios.delete(url[,config])

axios.head(url[,config])

axios.post(url[,data[,config]])

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

get请求:

axios.get('/user',{param:{id:1}})        //可以取param参数

     .then(res=>{console.log(res)})

     .catch(err=>{console.log(err)})

post请求:

axios.post('/user',{id:2})               //会转换为json格式

     .then(res=>{console.log(res)})

     .catch(err=>{console.log(err)})

发送并发请求:

axios.all([axios.get('/profile'), axios.post('/user')])

     .then(axios.spread((res1,res2)=>{

       console.log(res1); console.log(res2);

     }

))

*.vue单文件************************************************************************************

每一个*.vue文件都是组件使用大驼峰命名法

每个组件分为3个部分: <template></template>、<script></script>、<style></style>

template中只能有一个根标签

*.vue中的data是一个方法，该方法需要返回一个对象，在对象中初始化数据

<template>

  <divclass="hello">        //只能有一个根标签(如div/section)

    <head-top></head-top>    //③ 使用组件

    ...

  </div>

</template>

<script>

  import headTop from './Header'        //① 引入组件

  export default{

    name: 'SelectBall',      //导出组件名

    data () {

      return {}

    },

    components: {            //② 注册组件(使用components属性)

      headTop                //headTop: ES6的简写，相当于ES5: headTop:headTop

    }

  }

</script>

<style lang="less" type="text/less" scoped>    //若不写type="text/less"，WebStorm可能会报错

              //scoped: 使style中的样式(如less)只作用于当前组件(若不写,则样式会作用于全局)

  @import 'other.less';        //导入的也遵守此规则

  .tilte{

    font-size: 1.2rem;

  }

</style>

src/router/index.js:  每一个*.vue文件都需要在此文件中引入才能使用(配置路由)

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'    //引入组件

                                        //@: 在build/webpack.base.conf.js中的alias配置的别名

Vue.use(Router)                         //使用路由

constrouter= new Router({

  mode:'history',        //配置此参数后，路径不会带#(可使用pushState/replaceState来管理记录)

                         //否则需要在跳转地址前加 /#

  routes: [{path: '/helloWorld',            //配置路由地址

             name: 'helloWorld',             //name和path使用小驼峰命名法

             component: HelloWorld,

             children:[{ path:"/inbox",component:InBox },

                         { path:"/outbox",component:OutBox}]},

           {path: '/xiaoliang',

             name: 'xiaoliang',

             component: Xiaoliang,

             meta: {

               title: '标题',

               requireAuth: true,    //自定义字段，表示进入这个路由需要登录

             }, }]

})

利用vue-router提供的钩子函数beforeEach对路由进行判断，进行登录验证、修改title等操作

router.beforeEach((to, from, next) => {

  if(to.meta.requireAuth){        //判断该路由是否需要登录权限

    if(store.state.token){        //通过vuex state获取当前的token是否存在

      next();

    }else{

      next({ path: '/login',

             query: {redirect: to.fullPath} //将跳转的路由path作为参数，登录成功后跳回该路由

      })

    }

  }else{ next(); }

  if(to.meta.title){

    document.title = to.meta.title;    //设置网页标题

  }

  next();

})

export default router

跳转: 使用路由跳转，可跳到子组件或兄弟组件

注意:

① 若不在域名的根目录下时，需要在routes中的每个路由下添加 /目录名

② 应使用<router-link to="/home">Home</router-link>跳转，若用a跳转则会刷新页面

③ 若使用mode: 'history'，应将服务期所有404页面重定向回index.html，使用前端路由跳转

   如nginx: error_page  404        /index.html;

④ 因为所有的404都会重定向到index.html，所以可以在Vue应用里覆盖所有的路由，给出一个404页面

   { path: '*', component: NotFoundComponent }

⑤ 在IE中，页面大小<1024b会被认为不友好，会将该页面替换成自己的错误提示页面，所以应避免index.html小于1024b

⑥ 登录应做双重判定，首先应由前端路由控制(router.beforeEach)，为确保token失效后确保无法访问需要登录的页面，应使用http拦截器+后台接口返回的http状态码来判断(axios拦截器)

vue技巧*****************************************************************************************

路由动画效果:

src/App.Vue:

<div id="app">

  <transition :name="transitionName">

    <router-view class="child-view"></router-view>

  </transition>

</div>

export default {

  name: 'App',

  data(){

    return {

      transitionName: 'slide-left'

    }

  },

  watch: {

'$route'(to, from){//监听路由的路径，可以通过不同的路径去选择不同的切换效果

      const toDepth = to.path.split('/').length;

      const fromDepth = from.path.split('/').length;

      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';

    }

  }

}

#app,.child-view{        //防止切换路由时出现滚动条

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

}

#app{

  overflow-x: hidden;

}

.child-view{

  transition: all .8s cubic-bezier(.55, 0, .1, 1);

}

.slide-left-enter, .slide-right-leave-active{

  opacity: 0;

  -webkit-transform: translate(100%, 0);

  transform: translate(100%, 0);

}

.slide-left-leave-active, .slide-right-enter{

  opacity: 0;

  -webkit-transform: translate(-100%, 0);

  transform: translate(-100%, 0);

}

配置资源路径:

方法①

config/index.js:

assetsPublicPath:'/',             //可发布到网络上，资源使用的是根路径

assetsPublicPath: '/dist/',       //在dist中创建一个WebStorm项目即可查看(根路径)

assetsPublicPath:'',              //输出相对路径，不用服务器也能打开(引用直接写的文件名)

assetsPublicPath:'./',            //输出相对路径，不用服务器也能打开(引用写的./文件名)

方法②

build/webpack.prod.conf.js:

output: { publicPath:'./', },      //添加此语句,调试打包时,都输出相对路径(引用使用./文件名)

基于vue的ui库***********************************************************************************

PC端:

① element      饿了么前端出品的基于Vue 2.0的桌面端组件库

   https://github.com/ElemeFE/element                 //github仓库地址

② iview        基于Vuejs的开源UI组件库

   https://github.com/iview/iview                     //github仓库地址

③ muse-ui      三端样式一致的响应式UI库

   https://github.com/museui/muse-ui                  //github仓库地址

移动端:

① Vux          基于Vue和微信官方WeUI的组件库

   https://github.com/airyland/vux                    //github仓库地址

② mint-ui      饿了么前端推出的基于Vue.js的移动端组件库

   https://github.com/ElemeFE/mint-ui                 //github仓库地址

   http://elemefe.github.io/mint-ui/#/                //demo地址

③ vue-material 基于Vue Material和Vue 2精美的app应用(英文文档)

   https://github.com/marcosmoura/vue-material        //github仓库地址