【Vue学习笔记-基础】MVVM模型&数据代理&事件处理

MVVM 模型

MVVM模型

M：模型 Model，data中的数据
V：视图 View，模板代码
VM：视图模型 ViewModel，Vue实例

观察发现

data中所有的属性，最后都出现在了vm身上
vm身上所有的属性及Vue原型身上所有的属性，在 Vue模板中都可以直接使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mvvm</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>姓名：{{ name }}</h2>
      <h2>地址：{{ addr }}</h2>
      <h2>测试：{{ $options }}</h2>
    </div>

    <script>
      Vue.config.productionTip = false;
      new Vue({
        el: "#root",
        data: {
          name: "张三",
          addr: "上海",
        },
      });
    </script>
  </body>
</html>

Vue 中的数据代理

Object.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)

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

let obj = { x: 100 }
let obj2 = { y: 200 }

Object.defineProperty(obj2, 'x', {
  get() {
    return obj.x
  },
  set(value) {
    obj.x = value
  }
})

Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理

a、通过object.defineProperty()把data对象中所有属性添加到vm上

b、为每一个添加到vm上的属性，都指定一个 getter setter
c、在getter setter内部去操作（读/写）data中对应的属

Vue将data中的数据拷贝了一份到_data属性中，又将_data里面的属性提到Vue实例中（如name），通过defineProperty实现数据代理，这样通过geter/setter操作 name，进而操作_data中的 name。而_data又对data进行数据劫持，实现响应式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue中的数据代理</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>学校名称：{{ name }}</h2>
      <h2>学校地址：{{ address }}</h2>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#root",
        data: {
          name: "张三",
          address: "上海",
        },
      });
    </script>
  </body>
</html>

事件处理

事件的基本用法

使用v-on:xxx或@xxx绑定事件，其中 xxx 是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数，否则 this 就不是vm了
methods中配置的函数，都是被 Vue所管理的函数，this 的指向是vm或组件实例对象
@click="demo"和@click="demo($event)"效果一致，但后者可以传参

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>事件的基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>欢迎来看{{name}}的笔记</h2>
      <!-- <button v-on:click="showInfo">点我提示信息</button> -->
      <button @click="showInfo1">点我提示信息1（不传参）</button>
      <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。

      const vm = new Vue({
        el: "#root",
        data: {
          name: "小蒲",
        },
        methods: {
          showInfo1(event) {
            console.log(event.target.innerText);
            // console.log(this) // 此处的this是vm
            alert("同学你好！");
          },
          showInfo2(event, number) {
            console.log(event, number);
            console.log(event.target.innerText);
            // console.log(this) // 此处的this是vm
            alert("同学你好！！");
          },
        },
      });
    </script>
  </body>
</html>

事件修饰符

Vue中的事件修饰符

prevent 阻止默认事件（常用）
stop 阻止事件冒泡（常用）
once 事件只触发一次（常用）
capture 使用事件的捕获模式
self 只有event.target是当前操作的元素时才触发事件
passive 事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写，比如可以这么用：@click.prevent.stop="showInfo"

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>事件修饰符</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      * {
        margin-top: 20px;
      }
      .demo1 {
        height: 50px;
        background-color: skyblue;
      }
      .box1 {
        padding: 5px;
        background-color: skyblue;
      }
      .box2 {
        padding: 5px;
        background-color: white;
      }
      .list {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        overflow: auto;
      }
      li {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h2>欢迎来到{{ name }}学习</h2>
      <!-- 阻止默认事件（常用） -->
      <a href="http://www.atguigu.com" @click.prevent="showInfo"
        >点我提示信息</a
      >

      <!-- 阻止事件冒泡（常用） -->
      <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="http://www.qq.com" @click.prevent.stop="showInfo">点我提示</a> -->
      </div>

      <!-- 事件只触发一次（常用） -->
      <button @click.once="showInfo">点我提示信息</button>

      <!-- 使用事件的捕获模式 -->
      <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">div2</div>
      </div>

      <!-- 只有event.target是当前操作的元素时才触发事件； -->
      <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
      </div>

      <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
      <!-- scroll是滚动条滚动，passsive没有影响 -->
      <!-- wheel是鼠标滚轮滚动，passive有影响 -->
      <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name: "小蒲笔记",
        },
        methods: {
          showInfo(e) {
            alert("同学你好！");
            // console.log(e.target)
          },
          showMsg(msg) {
            console.log(msg);
          },
          demo() {
            for (let i = 0; i < 100000; i++) {
              console.log("#");
            }
            console.log("累坏了");
          },
        },
      });
    </script>
  </body>
</html>

键盘事件

键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用

1、Vue中常用的按键别名

回车enter
删除delete捕获“删除”和“退格”键
退出esc
空格space
换行tab特殊，必须配合keydown去使用
上up
下down
左left
右right

2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（多单词小写短横线写法）
3、系统修饰键（用法特殊）ctrl alt shift meta（meta就是win键）

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发指定 ctr+y 使用 @keyup.ctr.y
配合keydown使用：正常触发事件

4、也可以使用keyCode去指定具体的按键（不推荐）
5、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>键盘事件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>欢迎打开{{name}}的笔记</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo" /><br />
        <input type="text" placeholder="按下tab提示输入" @keydown.tab="showInfo" /><br />
        <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo" /><br />
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
        Vue.config.keyCodes.huiche = 13; // 定义了一个别名按键

        new Vue({
            el: "#root",
            data: {
                name: "小蒲",
            },
            methods: {
                showInfo(e) {
                    // console.log(e.key,e.keyCode)
                    console.log(e.target.value);
                },
            },
        });
    </script>
</body>

</html>