指令:

差值表达式:

• ** **{{参数}}

v-html:

• 内容不会以纯文本形式展示,如果有html 会以代码样式展示

v-text:

• 纯文本样式展示

v-bind:

• ** **:参数(缩写)
• 绑定参数

v-on:

• 指令监听
• v-on:click -> @click (缩写)

v-model:

• 双向绑定

v-if:

• 条件渲染,只有条件为true时才渲染
• v-else
• v-else-if

v-for:

• 循环渲染

• <h1 v-for='tem in list' :key ='tem'></h1>
  

v-solt:

• 具名插槽 通过name指定具体使用插槽

响应式函数:

reactive()

• 只适用于对象,数组和Map Set

ref()

• 可以接受任何类型,并在.value()下暴露属性值

子组件接受父组件传值:

• 父组件
  • 使用v-bind 绑定需要传递给子组件的值

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'
​
const greeting = ref('Hello from parent')
</script>
​
<template>
  <ChildComp :msg="greeting"/>
</template>

• 子组件
  • 通过poros 定义需要接受的值

<script setup>
const props = defineProps({
  msg: String
})
</script>
​
<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

子组件调用(触发)父组件事件(emit):

• 父组件接受子组件调用 response 方法 并将子组件参数赋值给 本地变量

  <script setup>
  import { ref } from 'vue'
  import ChildComp from './ChildComp.vue'
  ​
  const childMsg = ref('No child msg yet')
  </script>
  ​
  <template>
    <ChildComp @response='msg => childMsg = msg' />
    <p>{{ childMsg }}</p>
  </template>
  

• 子组件通过emit 调用父组件 response方法并传递参数

  <script setup>
  const emit = defineEmits(['response'])
  ​
  emit('response', 'hello from child')
  </script>
  ​
  <template>
    <h2>Child component</h2>
  </template>
  

插槽****:

计算属性与方法的区别?:

• 计算属性拥有缓存,只有对象发生改变时才会重新计算更新缓存,否则只会立即返回上次计算结果

事件修饰符:

• .stop
  • 阻止事件冒泡
• .prevent
  • 阻止默认事件
• .self
  • 只有event.target是当前操作的元素时才触发事件；
• .capture
  • 使用事件的捕获模式；
• .once
  • 事件只触发一次
• .passive

v-model 修饰符:

• .lazy
  • 默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据
• .number
  • 用户输入自动变为数字
• .trim
  • 去除两端空格