基础语法

Vue基础语法知识总结，包括创建应用、VUE生命周期函数、常用模板语法、样式绑定语法、列表循环渲染、事件绑定等内容。

基础语法

• 创建应用
  • 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
      • 去掉字符串前后的空格