1 开发环境搭建与初识Vue

1.1 Vue开发环境搭建

• 安装Vue-devtools

  1. 克隆gitee项目（存在浏览器版本不兼容问题)

     git clone https://gitee.com/wen_zhao/devtools.git
     1

  2. 切换到add-remote-devtools分支

     git checkout -b add-remote-devtools origin/add-remote-devtools
     1

  3. 安装依赖

     cnpm i
     1

  4. 打包

     npm run build
     1

  5. 在chrome浏览器中添加扩展程序

• 解决浏览器警告提醒

  • 全局配置设置关闭

    Vue.config.productionTip = false
    1

1.2 第一个vue程序

    
    
    



    {{message}}





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 注意
  1. 一个vue实例只能接管一个容器
  2. 插值语法{{}}可以读取到data的所有属性
  3. data中数据发生变化时，容器中用到的数据会自动更新

1.3 模板语法

• 插值语法

  用在标签体内容

• 指令语法

  用在标签的解析（标签属性、标签体内容和绑定事件等）

1.4 双向数据绑定

• 单项数据绑定

  只能从data流向页面

• 双向数据绑定

  不仅可以从data流向页面，也能从页面表单元素（输入元素）流向data

1.5 MVVM模型在Vue中的使用

• M

  Model（模型），对应data的数据

• V

  View（视图），模板

• VM

  ViewModel（视图模型），Vue实例对象

1.6 数据代理

• 原理

  通过一个对象代理另一个对象属性的读写

  • 不使用数据代理

    let obj1 = {
        a: "a"
    }
    
    let obj2 = {
        b: obj1.a
    }
    
    obj2.a = "2a"
    console.log(obj2.a) // 2a
    console.log(obj1.a) // a
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • 使用数据代理

    let obj1 = {
        a: "a"
    }
    let obj2 = {
        b: obj1.a
    }
    
    Object.defineProperty(obj2, "a", {
        get() {
            return obj1.a
        },
        set(value) {
            obj1.a = value
        }
    })
        
    obj2.a = "2a"
    console.log(obj2.a)
    console.log(obj1.a)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

• Vue中的数据代理

  1. 通过Vue对象代理data/_data中的属性的读写
  2. 可以更加方便的读写vue中的data的数据
  3. 通过Object.defineProperty()把data中的属性添加到Vue对象上，每个属性都有setter/getter