复习Vue知识点

v-html

```javascript
<template>
<div><p v-html="testHtml"></p></div>
</template>
<script lang="ts">
export default {
    data() {
        return {
            testHtml: 'test html <b>加粗</b> <i>斜体</i>',
        }
    }
}

<
computed
- data 不变不会重新计算

```javascript
<template>
    <div>
        <p>index {{index}}</p>

        <input v-model="inputVal"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
index: 15
}
    },
    computed: {
       
        inputVal: {
            get() {
                return this.index * 2
            },
            set(val) {
                this.index = val/2
            }
        }
    }
}
</script>

watch 监听

<template>
  <div>
    <input v-model="name"/>

  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
name: '123' 
}
  },
  watch: {
    name(oldVal, val) {
      // 值类型拿到 oldVal 和 val
      console.log('name', oldVal, val) 
    },
 
  }
}
</script>

• v-for 既可以遍历数组，也可以遍历对象
• v-for和v-if不能一起使用

 <ul>
            <li v-for="(item, index) in arr" :key="item.id">
                {{index}} - {{item.id}} - {{item.title}}
            </li>
        </ul>

事件

<!-- 单击事件将停止冒泡 -->
<a @click.stop="clickAction"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="submitAction"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="clickAction"></a>



<!-- 当 event.target 是元素本身时才会触发事件处理器 -->

<div @click.self="clickAction">...</div>

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->

<div @click.capture="clickAction">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="clickAction"></a>

<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="scrollAction">...</div>

父子组件通信：父组件可以通过
props 向子组件传递数据，而子组件可以通过事件（emit）向父组件发送消息。这是最常见和简单的组件通信方式。

• 子组件访问父组件的方法：子组件可以通过
  this.$parent 访问父组件的属性和方法。这种方式适用于简单的层次结构。
• 父组件可以通过
  this.$refs访问子组件的属性和方法，

动态组件 <component :is="component-name">