导图 1
基础语法
  创建应用
    Vue.createApp( )
      创建一个应用 ，任何的Vue相关的内容，都应该在此部分编写。
    const vm = app.mount( )
      vm就是获取应用的根组件，通过vm可以获得vue里的任何数据、属性和方法
    vm.$data
      获取数据对应内容
    data(){}
      data方法，用于在Vue中声明数据
    methods:{}
      methods属性，用于编写Vue中的方法
    computed:{}
      计算属性，根据数据，自动进行计算，经常用于数值计算。
    watch:{}
      属性说明
        监听属性，属性变化时，制动执行里边的函数。
        可以根据变量的改变，作异步操作和页面样式的改变。
      参数说明
        current
          现在参数的值
        prev
          以前参数的值
    注意事项
      computed 和 method 都能实现的功能，建议使用 computed ， 因为有缓存
      computed 和 watcher 都能实现的功能，建议使用 computed ， 因为更加简洁
    方法和计算属性的区别：- 当计算属性依赖的内容发生变更时，才会重新执行，得到新的结果。-方法是只要页面重新渲染，就会重新计算，得到新的内容
  VUE生命周期函数
    声明周期函数指，在某一时刻会自动执行的函数。(声明周期函数也叫钩子函数)
    记忆时可以成对进行记忆，也就是分为四组。
    1. beforeCreate( )
      在初始化 / 实例创建 之前执行的函数
    2. Created( )
      在初始化 / 实例创建 之后执行的函数
    3. beforeMount( )
      在组件内容被渲染到页面之前自动执行的函数
      注意：此时无法找到任何模板DOM节点
    4. Mounted( )
      在组件内容被渲染到页面之后自动执行的函数
    5. beforeUpdate( )
      在数据将要变化之前自动执行的函数
    6. updated( )
      在数据发生变化之后自动执行的函数
    7. beforeUnmount( )
      在VUE实例销毁之前自动执行的函数
    8. unmounted( )
      在VUE实例销毁之后自动执行的函数
  常用模板语法
    插值表达式{{xxx}}
      在模板中输出变量,在插值表达式中是可以写JavaScript表达式的。例如：{{1+2}}，但不能写语句。
    基础指令
      v-html
        转义输出变量的HTML标签
      v-bind
        绑定HTML标签中的属性值
      v-once
        读取一次变量值，不随变量 改变而改变
      v-if
        模板中进行判断，根据变量负责DOM的展示与否。
        如果v-if的值为false时，将直接移除DOM元素
      v-show
        模板中进行判断，根据变量负责DOM的展示与否。
        动过样式进行展示，为false时， display:none
      v-on
        阻止默认行为 - @click.prevent
        在模板中绑定事件,例如 v-on:click="handleClick"
        $event 传递原生事件：handleClick(num,$event)
      ref
        ref 是获取Dom 节点 / 组件引用 的一个语法
        模板语法：<div ref="count">
        程序写法：this.$refs.count
    指令简写方法
      v-bind 简写 ：
        原写法：<div v-bind:title="message">
        简写法：<div :title="message">
        动态属性绑定： <div :[xxx]="message"> ，xxx是在data里定义的变量
      v-on 简写 @
        原写法：<div v-on:click=“handleClick”>
        简写法：<div v-@click=“handleClick”>
        动态事件绑定： <div @[xxx]="handleClick"> ，xxx是在data里定义的变量
  样式绑定语法
    用字符串绑定动态样式
      方法：在data()方法里，定义一个变量，然后用v-bind在模板中绑定属性
      案例; <div : class="classString">Hello World</div>
    用对象绑定动态样式
      方法：在data( )里声明一个对象，例如叫classObject。
      案例：classObject:{red:true,green:true}
    用数组绑定动态样式
      方法：在data( )方法里,定义一个数组，数组中有的值，为模板中绑定的样式
      案例：classArray:['red','green']
    行内样式动态绑定
      字符串形式
        方法：直接在data( )方法里，声明一个CSS样式的字符串，然后在模板中进行绑定。
        data( )中编写案例： styleString :'color:yellow'
        模板中绑定案例：<div :style="styleString">
      对象形式
        方法：在data( )方法里，声明一个变量，变量是一个对象。然后在模板中进行绑定。
        data( )中编写案例：styleObject:{color:'orange'}
        模板中绑定案例：<div :style="styleObject">
      注意事项：建议在工作中使用对象的形式，来编写模板中的行内样式动态绑定。因为这样更加直观，字符串拼接也不容易出错。
  列表循环渲染
    v-for
      可以直接在模板中使用v-for来循环打印数组和对象
        数组循环案例：v-for="(item,index) in list"
        对象循环案例：v-for="(value,key，index) in list"
      Vue要求循环时在模板中增加key值，避免重复渲染
        :key="index"
    变更数组的方法
      push( )
        从数组尾部添加内容
      unshift( )
        从数组头部添加内容
      pop( )
        从数组末尾删除内容
      shift( )
        从数组头部删除内容
      sort( )
        对数组进行排序
      reverse( )
        对数组进行取反
      splice（）
        从数组中山区具体的内容
    特殊用法
      v-for="item in 10"
        从1循环到10
    注意事项： 循环和判断不能写在一个标签上，否认是没办法进行判断的。
  事件绑定
    事件绑定修饰符
      @click.stop
        停止事件冒泡
      @click.self
        停止向下传递
      @click.prevent
        阻止默认行为
      @click.capture
        捕获模式修饰符
      @click.once
        事件只绑定一次
      @scroll.passive
        提升滚动性能
    按键绑定修饰符
      @keydown
        按键就可以触发事件
      @keydown.enter
        按下回车键时触发
      @keydown.tab
        按下tab键时触发
      @keydown.delete
        按下删除键时触发
      @keydown.esc
        按下ESC键时触发
      @keydown.up
        按下上键时触发
      @keydown.down
        按下下键时触发
      ......有很多
    鼠标修饰符
      @click.left
        点击鼠标左键触发
      @click.right
        点击鼠标右键触发
      @click.middle
        点击鼠标中键触发
    精确修饰符
      @click.ctrl.exact
        按ctrl和鼠标键时才会触发
  双向绑定
    v-modle
      双向绑定的最基本用法
      <input v-model="message" />
      <textarea v-model="message" />
      <input type="checkbox" v-model="message" />
    修饰符
      v-model.lazy
        当失去焦点时才会触发双向绑定
      v-model.number
        自动转变为number类型
      v-model.trim
        去掉字符串前后的空格