Vue2 初识

vue特点

1. 组件化开发，提高开发效率

2. 声明式编码，不需要操作DOM，提高开发效率

3. diff算法，DOM元素复用，提高效率

创建vue实例

new Vue({
            el: '#root',
            data: {
                name: "测试"
            },
            //方法都写在methods里
            methods: {
                showInfo1() {
                    alert("hello")
                }
            }
        });

js表达式和js语句

js表达式：会产生一个值（a,b,a+b,demo(1))

js语句：控制代码的运行 （for循环，if判断）

数据动态绑定

• 1.单向绑定

  v-bind 可以简写为 ：

  <input type="text" :value="name"> <!-- 单向绑定 -->

   

  只能从data中将数据渲染到页面，页面数据的变化不能影响到data中的数据变化

  
  

  
  

• 2.双向绑定

  v-model=“”，只能用于表单类元素

  <input type="text" v-model="name"> <!-- 双向绑定 -->

   

  可以从data中将数据渲染到页面，页面数据的变化也可以改变data中的数据

  
  

v-model的修饰符

1. number 就是将输入的值转为数字类型

<input type="text" v-model.number="n1"/>1

    2.trim 过滤首位的空格

<input type="text" v-model.trim="msg"/>

3. lazy 光标移走才将输入的数据存储到data中

<input type="text" v-model.lazy ="msg"/>

MVVM模型

M ：data中的数据

V：页面

VM：创建的vue实例

总的来说，就是将data中的数据通过vue实例渲染在页面，页面数据的变化也可以改变data中的数据

data中所有属性最终都会出现在vm上

vm上所有属性和vue原型上所有属性都可以在{{ }}中直接输出

defineProperty

给对象添加属性

Object.defineProperty(person, 'age',{value:18 })

第一个是对象名，第二个为要添加的key，第三个为配置项{value:19}

defineProperty这个方法增加的属性不能被遍历、删除、更改

• get() set()方法

 let number = 18;
        let person = {
            name: "张三",
            sex: "男"
        };
        Object.defineProperty(person, 'age', {
            //当有人读取person.age时，函数被调用，就会返回一个值
            get() {
                console.log("有人读取了age的值");
                return number;
            },
            //当有人修改person.age时，函数被调用，且会收到修改的值
            set(value) {
                console.log("有人修改了age的值");
                number = value;
            }
        });

数据代理

通过一个对象代理另一个对象中属性的操作

  let obj1 = { x: 200 };
  let obj2 = { y: 300 };
  Object.defineProperty(obj2, "x", {
      get() {
          return obj1.x;
      },
      set(value) {
          obj1.x = value;
      }
  })

vue中的数据代理

    将data中的数据挂载到vm上的_data属性中
    _data中的每一个属性配置一个getter、setter，进行数据代理，就是进行数据的读写操作，也是挂载到vm实例上
    vm.name可以修改_data中name的值，这就是数据代理，通过一个对象来修改另一个对象的属性值