Vue基础

用vue写第一个hello world

• 准备一个装载数据的容器

    <div id = "app">{{message}}</div>  <!-- 插值语法：{{}} 可以读取到在data的所有属性 -->

• 创建Vue实列 (一个vue实例只能接管一个容器)

    var app = new Vue({
      el:"#app",  // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
      data:{      // 用于储存数据，数据供el指定的容器使用
        message:'Hello world' 
    }
   });
   // data中数据发生变化，那么在容器用到的数据会自动更新

模板语法

• 插值语法
  • 特点: 用在标签体内容
  • 写法

{{xxx}}  // 可以拿到data里所有的属性

• 指令语法
  • 特点: 用在标签的解析（标签属性，标签体内容，绑定事件等）
  • 写法

 // 解析标签属性：v-bind
  v-bind:href='url'
  :href='url' // 简写模式

Vue中的数据代理

• 原理(Object.defineProperty())
• 通过一个对象代理另一个对象属性的读写

   Object.defineProperty('目标对象', '代理属性', {
    get() {             // getter   当读取'目标对象'的'代理属性'时，get函数/getter就会被调用，且返回代理属性的值
      return xxx;       
    },
    set(value) {        // setter   当修改'目标对象'的'代理属性'时，set函数/setter就会被调用，且收到修改的值
      xxx;
    },
  });

  let obj1 = {
    a: aaa,
  };
  let obj2 = {
    b: bbb,
  };
  Object.defineProperty(obj2, 'a', {
    get() {
      console.log('obj2被读取了');
      return obj1.a;
    },
    set(value) {
      console.log('obj2被修改了');
      obj1.a = value;
    },
  });