vue基础-路由设置及原理

介绍vue的路由原理

1. 路由是按照层级结构进行定义，分段定义
   就想树形结构一样，有多少个叶子结点，就有多少个路由
2. 每段路由都需要绑定一个组件
3. 如果组件需要有下一层的路由，该组件就需要添加一个 <router-view/>

<router-view/> 就像一个未知的组件（也像一个变量，可以填充不同的组件），这个组件是在路由里面动态填充替代
匹配到那个一个路由，就使用那个一个路由所绑定到的组件进行替代

假如有下面一个路由定义：

routes: [
    { path: 'partA', 
      component: componentA, // 当 /partA 匹配成功， App.vue 的<router-view> 会用 componentA
      children: [
        {
          // 当 /partA/partB 匹配成功，
          // componentB 会被渲染在 componentA 的 <router-view> 中
          path: 'partB',
          component: componentB
        },
        {
          // 当 /partA/partC 匹配成功
          // componentC 会被渲染在 componentA 的 <router-view> 中
          path: 'partC',
          component: componentC
        }
      ]
    }
  ]
  
/partA/partB
/partA/partC

• vue 前端的命名规范：都是驼峰式

文件： 第一个字母大写
变量：第一个字母小写
组件的key： 用 - 来隔开，不是驼峰式，跟css一样

把登录页面的ui设置

• vue如何展示一张图片

1. 把图片放在项目的某个目录
2. 把图片import到组件里面
3. 在vue里面定义一个变量，内容是import进来的图片
4. 设置img标签的src为定义的变量，例如 <img :src="变量" height="50px" width="50px"/>

• 实现div居中：
  实现居中
  width: 400px;
  margin-left: auto;
  margin-right: auto;

关于 元素的ref属性: 这个就是元素的唯一表示，就像是id一样，不同是id是js用的，ref是vue里面用的
如何使用ref： 先在元素里面定义ref为xxx，然后在vue里面使用 this.refs.xxx 就可以得到元素的对象

element里面的表单校验是非常有用的，一定要多多使用

会用restful风格来定义接口， 使用的库还是django原生， 使用类图的方式
接口的定义是： url + method来确定一个接口