vue学习1

基础知识记录

1.区分js表达式和js代码（语句）

• js表达式：一个表达式会生成一个值，可以放在任何一个需要值得地方；简单来说，js表达式就是有返回值的表达式
  （1）a
  （2）a+b
  （3）function（a）
  （4）三元表达式：x===y ？ ‘a’ : ‘b’
• js代码（语句）
  （1）if语句
  （2）for循环

插值语法：放js表达式，当插值语法调用函数时必须加括号，而事件的函数调用时加不加都行

2.模板语法：
（1）什么是模板： root容器里的代码被称为vue模板。

 <div id="app">
    {{ message }}
  </div>

模板语法：
1.插值语法：{{js表达式}}，用于解析标签体内容，且可以直接读取到data中的所有属性
2.指令语法：用来于解析标签（包括：标签属性，标签体内容，绑定事件…）。v-bind:href=“xxx”,xxx同样为js表达式，且可以直接读取到data中的所有属性。v-bind简写为：；
v-model：value指令只能用于输入类标签上，标签都有value值，一般用于表单类元素，简写v-model；

一个重要的原则：vue所管理的函数，一定不能写箭头函数，一旦写了箭头函数，this就不再是vue实例了

3.MVVM模型
M：model指的是data中的数据
VM：指的是vue实例
V：view视图

4.数据代理：使用一个对象代理对另一个对象中属性的操作

//  Object.defineProperty给对象追加属性
  const obj = {x: 100};
  const obj2 = {y: 200};
  Object.defineProperty(obj2,'x', {
    get() { 
    return obj.x;
    },
    set(val){
     obj.x = val;
   }
  })
  // 在控制台输入obj.x，显示：100
  // 在控制台输入obj2,显示：y: 200，x: (...)，此时便可以通过obj2操作obj的属性x、

vue将data中的数据绑定到vue的实例对象vm的_data中（收集数据），再将data中的数据绑定到vm的属性上（为了方便数据访问，调用的时候不必每次都使用_data.property）。每次调用vm的属性就可以实现代理，通过属性去操作_data中的数据。

基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。