Vue.js + element-ui 的项目中用到的知识点

项目架构

VueJs + Vue-router + Vuex + element-ui

Vue.js 的知识点

• prop单向传值

prop 用来传递一个初始值

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

prop 以一种原始的值传入且需要进行转换

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

VueRouter 中的知识点

• router.push的用法

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

字符串是 ‘path’ 的值,不是 ‘name’ 的值

• 路由监听, 组件被复用的时候使用

一种是用watch

watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }

一种是组件内导航守卫

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // don't forget to call next()
  }

• 子级菜单选中状态时,也保持父级的 active 状态

需要使用嵌套路由,子级路由要在 children 中一级一级嵌套,才能默认处于 active 状态

Vuex 状态持久化

• 刷新页面后 store 中的值丢失

引入 vuex-persistedstate, 是使用 LocalStorage 来存储数据

所以,个人觉得如果是需要持久化存在的数据,就不如直接保存在LocalStorage 或者 SessionStorage 中.

Element

• Upload 上传组件

action 必选参数，上传的地址

data 上传时附带的额外参数

• Transfer 穿梭框组件

value / v-model 绑定值就是右侧框显示的内容