2：管理系统 vue-element-admin介绍(目录..知识点...)

1、目录结构
2、知识点
① import Vue form ‘vue’
啥意思？怎么引入的？
很多js界面都有这段代码，能不能全局引入？
②import * as filters from ‘./filters’
按 es6 的规范 import * as obj from “xxx” 会将 “xxx” 中所有 export 导出的内容组合成一个对象返回。
③Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
遍历filters对象，类似于for in 组成filter
④render:h=>h(App)

以下开始研究登录页面，其他情况类似~ /login/index.vue
一、contst（常量）、var(变量)、let（作用于当前代码范围内的变量）
使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；

var i=0;
add:function()
{
	//i此时变成2；正确
	i=i+2;
}

使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；

let i=0;
add:function()
{
	//错误
	i=i+2;	
}

使用const声明的是不能修改conts的量，在后面出现的代码中不能再修改该常量的值（是指栈内存在的值和地址）。

add:function()
{
	const obj = {a:1}
    obj.a=2
    obj.b=2；//正确，可以添加一个新属性

    const obj = {a:1}
    obj = {a:2}
   //错误，不可以修改
	
}

二、为什么vue组件中data的是一个函数
data(){} 每个实例可以维护一份被返回对象的独立的拷贝：
三、各种箭头函数参考js语法

const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }

在这里插入图片描述
四、watch、$route

  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }

  }
  	首先确认 watch是一个对象，一定要当成对象来用。
  	对象就有键，有值。 
	键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。
	值可以是函数：就是当你监控的家伙变化时，需要执行的函数
	值也可以是函数名：不过这个函数名要用单引号来包裹。 
--------------------- 
  handler：其值是一个回调函数。即监听到变化时应该执行的函数。

五、vue-dev-tools vue开发利器

六、 @supports css语法

@supports可以让我们在不支持CSS3属性的浏览器下配上单独的样式
@supports可以使用not逻辑声明，主要作用是，在不支持新特性时，可以提供备用样式
@supports可以使用and逻辑声明，如果同时支持这两个条件，那么浏览器将会调用这部分样式

关于登录用户名密码验证，走了很多弯路，本来是一件很简单的事情，结果debugger调试到源码中，看不懂了。。
登录的流程是，输入用户名或者密码的时候，blur事件是指当一个元素失去焦点的时候 blur 事件被触发。在点击登录的时候，会验证规则，如果规则不通过，则结果返回false，不能进入主界面。
默认代码中只有amdin、editor可以登录

D:\vue\vue-element-admin-master\src\views\login\index.vue
!isvalidUsername(value)

import { isvalidUsername } from '@/utils/validate'

export function isvalidUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

最近一直在忙项目，没有时间写博客，但是我会一直坚持写下去

2：管理系统 vue-element-admin介绍(目录..知识点...)

猜你喜欢