vue-element-admin登录验证使用
- 安装
- javascript基础介绍
- vue.js文档
- vue-element-admin 登录验证
首页
vue.js-guide
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev
npm命令参数
npm install 可简写为 npm i
-g(--global)// 安装当作全局包
-S(--save)// 安装包写入package.json的dependencies
-D（--save-dev）// 安装的包将写入packege.json里面的devDependencies
-O(--save-optional)// 安装的包将写入packege.json里面的optionalDependencies
-E(--save-exact)// 安装的包的版本是精确指定的
-B(--save-bundle)// 安装的包将写入packege.json里面的bundleDependencies
javascript基本介绍 ECMAScript6的标准
=> 函数
-
=>是function的简写形式，支持expression和statement，拥有词法作用域的this值。
([param] [, param]) => { statements }param => expression
例子
const arr = [1,2,3]; var temp = []; arr.map( (item,index) => item + 1); 等价于 arr.map( function(item) { return item + 1}; ); arr.forEach( item => { if(item === 1) { temp.push(item); } }); 等价于 arr.forEach( function(item) { if (item === 1) { temp.push(item)} } );
- export js不能支持原生模块化，可通过引用外部库实现模块化。由
export和import组成.每一个模块都有自己单独的作用域。
// test.js export var name = 'vera'// 导出test.js模块一个变量var name = 'vera' var age = '25' export {name, age}// 导出多个变量在其他模块引用 // index.js ,使用花括号导出模块的方法或变量 import {name, age}from './test.js'
- module 整体导入
//test.js export function getName() { return name; } export function getAge(){ return age; } import * as test form './test.js'; 等价于module test from './test.js'; test.getName();
- export default 不管什么模块，通过
export default指令就能加载到默认模块，不需要通过 花括号来指定输出的模块,一个模块只能使用 export default 一次
export var city = 'shenzhen'export default { var name = 'vera' var age = '25' function getAge() {} }// 导入的时候不需要花括号，同时可以导出指定的变量 import test,{ city } from './test.js'
- vue实例被创建时要经过一系列的初始化过程。例如：设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
-
$前缀，代表vue暴露的实例属性和方法，与用户定义的属性区分开来 -
:缩写...缩写... -
@缩写...缩写... -
.修饰符，指出一个指令应该以特殊方式绑定。？？ -
:参数，指令能够接收参数。...href是参数，告知v-bind指令元素herf与表示式url的值绑定。...参数是监听的事件名。 - 计算属性
computed基于响应式依赖进行缓存，只有相关响应依赖发生变化才会重新求值。 - 方法
methods每当重新渲染时，调用方法总会再次执行函数。 - 侦听器
watch当数据发生变化时执行异步或开销较大的操作。 -
class对象绑定，active是否显示取决于isActive数据属性，data: { isActive: true } -
style内联样式，v-bind:style对象语法。 - 条件
v-if是一个指令，应用在元素上。v-else-ifv-else例如A -
key管理可复用的元素 - 循环
v-for对象遍历第一个是值，第二个是key，第三个是索引顺序,...结合key使用... - 变异方法，
push()、pop()、shift()、sort()、reverse()的调用将改变原始数组 - 替换数组，
filter()、concat()、slice()返回新数组 - 任何数据都不会被自动传递到组件里，组件都独立的作用域，为了迭代数据到组件，需要使用prop
- 事件修饰符
.提交事件不再重载页面 - 用
v-model指令在表单、