【vue】方便回顾

v-bind
缩写：  :
作用：动态绑定属性
有些属性是动态变化的， 服务器请求过来的数据，我们一般都会在data那里做一下中转，做完中转过后再把需要的变量绑定到对应的属性上面

v-bind也可以动态绑定属性class

v-model=""
实现表单的双向绑定

ElementUI

表单的验证规则

表单绑定属性 :rules=“rules”

data()中定义股则

data(){

​ return{

​ rules: {

​ //username 与表单的prop属性关联

​ // 开启验证 ，提示信息 验证时间：blur为失去焦点

​ username:[{required: true,message:‘xxx’,trigger:blur}]

​ }

​ }

}

AXIOS 封装请求

每一次网络请求都有可能成功或者失败。成功有成功的处理方式，失败一般都是提示错误信息。我们希

望将所有的失败统一进行处理提示错误信息而不是每失败一次处理一次，因此我们将网络请求进行封装

达到统一处理失败信息的目的。

在utils目录下的api.js文件中建立请求的拦截器

请求转发跨域问题：

前端端口和后端端口不一致，要跨域请求

需要用到代理

项目同级文件vue.config.js

let proxyObj = {}
proxyObj['/'] = {
    //websocket
    ws: false,
    //目标地址
    target: 'http://localhost:8081',
    //发送请求头中host会设置成target
    changeOrigin: true,
    //不重写请求地址
    pathRewrite: {
        '^/': '/'
   }
}
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj
   }
}

home主页面中，导航栏的请求出现在home页面右边而不是直接跳转到新的页面

修改index.js

const routes = [
   {
        path: '/',
        name: 'Login',
        component: Login,
        hidden:true
   },
   {
        path: '/home',
        name: '导航一',
        component: Home,
        children: [
           {
                path: '/test1',
                name: '选项1',
                component: Test1
           },
           {
                path: '/test2',
                name: '选项2',
                component: Test2
           }

       ]
   }
]

渲染路由数据

我们需要频繁添加菜单选项的时候会发现操作的步骤比较重复，因此我们可以将菜单和路由数据统一起来，将路由数据动态渲染到菜单上

主页面

router ：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转。
<el-menu router>
    <el-submenu index="1" v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden"
                :key="index">
        //遍历路由routes数组，将hidden属性为false的渲染出来
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{item.name}}</span>
        </template>
        <el-menu-item :index="children.path" v-for="(children,indexj) in item.children"
                      :key="indexj">{{children.name}}
        </el-menu-item>
    </el-submenu>
</el-menu>

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状

态，并以相应的规则保证状态以一种可预测的方式发生变化