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来确定一个接口

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,241评论 0 6
  • 三、组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML元素,封装可重用...
    小山居阅读 630评论 0 1
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,377评论 0 3
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,528评论 0 13
  • vue的特点 Vue.js是一款轻量级的以数据驱动(数据的变化将引起视图的变化)的构建单页面应用的mvvm框架,它...
    阿踏阅读 1,965评论 1 11