【前端框架及项目面试-笔记】vue2 的基本使用：v-html、computed和watch、条件循环、事件、表单等考点

基本使用

• 模板（插值、指令）
• computed和watch
• class和style
• 条件
• 循环
• 事件
• 表单

v-html

• v-html : 会有 XSS 风险，会覆盖子组件

示例

<p v-html="rawHtml">
  <span>有 xss 风险</span>
  <span>【注意】使用 v-html 之后，将会覆盖子元素</span>
</p>

data() {
  return {
    rawHtml: '指令 - 原始 html <b>加粗</b> <i>斜体</i>',
  }
}

看下页面（localhost: 8080)：

* computed 和 watch

• computed 有缓存，data 不变则不会重新计算。 （提高性能）
• watch 如何深度监听 (针对引用类型）
• watch 监听引用类型，拿不到 oldVal

computed

<div>
    <p>num {
  {num}}</p>
    <p>double1 {
  {double1}}</p>
    <input v-model="double2"/>
</div>

data() {
    return {
        num: 20
    }
},
computed: {
    double1() {
        return this.num * 2
    },
    // v-model 是双向数据绑定，所以一定要有 get 和 set,如果只有一个它就会报错。
    double2: {
        get() {
            return this.num * 2
        },
        set(val) {
            this.num = val/2
        }
    }
}

watch

data() {
    return {
        name: '酥梨',
        info: {
            city: '上海'
        }
    }
},