由于近期要做一个物流后台管理系统，项目是基于vue2.0+elementUI技术栈，梳理了一下知识，主要分为如下几个方向，不得不说明，项目结构套用了官网提供的模板快速搭建，所以提供vue-element-admin文档，这个自行研究，还有vue的相关知识，js常用相关的知识等。

一、vue-element-admin官方模板文档

vue-element-admin:panjiachen.github.io/vue-element…

二、Vue相关知识

1.Vue是什么？

官网解释：一套用于构建用户界面的渐进式JavaScript框架
构建用户界面：数据驱动页面
渐进式：Vue可以自底向上逐层应用
简单应用：只需一个轻量小巧的核心库
复杂应用：可以引入各式各样的vue插件

2.Vue特点

组件化模式：页面结构一拆到底
声明式编码：不直接操作DOM 对比命令式
虚拟DOM与优秀的Diff算法

3.插值语法与数据绑定

插值语法：{{}}
数据绑定：
单项数据绑定：v-bind => 可简化为：
多项数据绑定：v-model:value="" => 可直接写为：v-model=""

4.el与data两种写法

<div id="root">
    <h1></h1>
</div>

el的两种写法
const vm = new Vue({
 el:'#root', //第一种写法
  data:{
	
  }
})
//第二种写法
vm.$mount('#root') 

//data的两种写法
new Vue({
 el:'#root',
//data的第一种写法：对象式
 data:{

 } 

//data的第二种写法：函数式(脚手架中主要用的就是函数式)
 data(){
  console.log('@@@',this) //此处的this是Vue实例对象
  return{
   
  }
 }
})

5.MVVM模型

M：模型（Model）:对应data中的数据
v：视图（View）:模板
VM：视图模型（ViewModel）:Vue实例对象

6.数据代理与数据劫持

（1）回顾一下bject.defineProperty

现在假设有个需求，有一个人的对象：名叫张三，性别为男，现在对年龄属性进行定义与修改：

let number = 18
let person = {
    name:'张三',
    sex:'男',
}

Object.defineProperty(person,'age',{
    // value:18,
    // enumerable:true, //控制属性是否可以枚举，默认值是false
    // writable:true, //控制属性是否可以被修改，默认值是false
    // configurable:true //控制属性是否可以被删除，默认值是false
    
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get(){
        console.log('有人读取age属性了')
    return number
},

//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    set(value){
        console.log('有人修改了age属性，且值是',value)
        number = value
    }
})

// console.log(Object.keys(person))
console.log(person)

### （2）vue中的数据代理及数据劫持

vue学习笔记