本文最后更新于 2024-10-26，文章内容可能已经过时。

为什么要选择Vue?

Vue最大的特点就是帮我们简化了对dom的操作，其中包含了数据响应式，以及组件化!

响应式: 当数据发生变化时，界面会自动刷新数据!

组件化: 将业务公共区域封装成组件，进行代码复用，减少了开发的效率!

响应式图形

以上是MVVM的一个模型图

M代表着(Model)数据层

VM 代表着(ViewModel) 中间层!

V代表着(View)视图层

Model层发生变化时，ViewModel会通过拦截监听，将变动的数据同时更新到View视图当中!

在html中使用vue

使用有多种方式，其中有 cdn外链 npm镜像 以及vue-cli脚手架方式，具体可参考官方安装方式进行使用!

https://v2.cn.vuejs.org/v2/guide/installation.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app-container">{{ msg }}</div>
  </body>

  <script>
    // 创建一个Vue实例
    const vm = new Vue({
      el: "#app-container",
      data: {
        msg: "Hello World",
      },
      methods: {
        onChange(){
          console.log("this:", this === vm)
        }
      }
    });
  </script>
</html>

vue实例中传入一些配置对象!

el: 标识vue实例要挂载dom的区域，在这个区域内，vue会实现dom 内一些语法转换!

data: 初始化数据都会存放在这个对象当中，如model层!

vue核心概念

注入

vue在创建实例时，会将data以及 method里的属性和方法，提取到vue实例当中，这么做是为了做数据响应式，以及this绑定!

数据响应式: vue通过 Object.defineProperty()方法，实现对象属性的拦截，并且会对每个属性添加getter和setter方法！

this绑定: 在methods方法中，this指向的是vue实例，在初始化时，vue会将methods中的函数通过bind形式将this指向vue实例!

虚拟dom

vue中，虚拟dom就是用来减少dom操作的，提高渲染效率!

虚拟dom就是vnode，通过js的对象的形式来描述dom树的结构，当数据发生变化时，vue会将虚拟dom与真实dom进行差异比较，找到最小的更新点进行更新!

生成虚拟dom的方式

  1. 配置项中,el所挂载的元素，vue会将元素的 outerHtml 来作为模版!

  2. 在template标签内写入的dom元素会作为vue模版!

  3. 在render函数中生成的元素也会作为模版来使用!

// 创建一个Vue实例 
const vm = new Vue({
  el: "#app-container",
  template: `<div id="app-container">{{ msg }}</div>`,
  render(h) {
    return h("div", { attrs: { id: "app-container" } }, [ "helloworld" ]);
  },
  data: {
    msg: "Hello World",
  },
});
console.log("vm", vm);

模版根节点

在vue中，template 模版根节点只能存在一个!

无法存在多个根节点，这会导致在生成虚拟dom时，无法进行差异比对!

<template>
  <div class="container"></div>
  <div class="container2"></div>
</template>

vue 基础使用

vue指令

指令 可选值 描述
v-show true/false 该元素是否显示，true显示，false为隐藏，该元素通过css属性display控制!
v-if true/false 该元素是否显示，true显示，false为隐藏，该元素若为false，则不会渲染该元素!
v-for arr or obj 可迭代项，可以遍历数组和对象属性!
v-html string 可包含html元素，并在页面上进行渲染
v-on string 可以绑定事件，简写形式@change=handleChange
v-bind any 单项数据流，可以元素属性绑定动态值，例如 style class 等...
v-model any 双向绑定，在可交互表单中使用，可以实现双向数据绑定!

指令修饰符

表单修饰符

修饰符 说明
.lazy 取代 v-model 的默认 change 事件，数据只会在 change 事件结束后更新。
.number 输入字符串转为数值类型。
.trim 自动过滤首尾空格。

事件修饰符

修饰符 说明
.stop 阻止事件冒泡。
.prevent 阻止默认事件。
.capture 添加事件捕获。
.self 只当事件在该元素本身触发时触发回调。
.once 只触发一次回调。
.passive 滚动事件的默认行为立即生效，不会等待 onscroll 事件完成。

按键修饰符

@keyup.enter="onEnter"
修饰符 说明
.enter 按下 enter 键时触发。
.tab 按下 tab 键时触发。
.delete (捕获) 按下 delete 键时触发。
.esc 按下 esc 键时触发。
.space 按下 space 键时触发。
.up 按下 up 键时触发。
.down 按下 down 键时触发。
.left 按下 left 键时触发。
.right 按下 right 键时触发。
keyCode 按下指定按键时触发。

系统修饰符

修饰符 说明
.ctrl 按下 ctrl 键时触发。
.alt 按下 alt 键时触发。
.shift 按下 shift 键时触发。
.meta 按下 meta 键时触发。

鼠标修饰符

修饰符 说明
.left 左键单击。
.right 右键单击。
.middle 中键单击。
.dblclick 双击。