Computed

用法

• 被计算出来的属性

new Vue({
  data: {
    user: {
      email: "test@qq.com",
      nickname: "wt",
       phone: "123456"
    }
  },
  computed: {
      displayName() {
         const user = this.user;
         return user.nickname || user.email || user.phone;
      }
   },
    template: `
      <div>{{displayName}}</div>
    `
})

缓存

• 如果依赖的属性没有变化，就不会重新计算
• getter / setter 默认不会缓存， Vue 做了特殊处理

Watch

用法

• 当数据变化时，执行一个函数

变化

• 简单类型看值，复杂类型看地址
• 与 "===" 规则相同

deep

<template>
  <div><button @click="obj.a = 1">修改 {{obj.a}}</button></div>
</template>
<script>
  export default{
    watch:{
        obj: {
          handler(){
              console.log("修改obj")
          },
          deep: true
        }
    }
  }
</script>

• 如果 obj.a 变了，需要触发 obj 的 watch
• 如果需要则，使用 deep: true
• 如果不需要，则使用 deep: false

展示内容

表达式

• {{ object.a }} 表达式
• {{ n + 1 }} 可以写任何运算
• {{ fn ( n ) }} 可以调用函数
• 如果值为 undefined 或者 null 就不显示
• 其他： <div v-text="表达式"></div>

HTML 内容

• 假设 data.x 值为 <strong>hi</strong>
• <div v-html="x"></div> 即可显示粗体 hi

不编译

• <div v-pre>{{ n }}</div>

绑定属性

• 绑定属性

<img v-bind:src="x" />

• v-bind 可以缩写为 :

绑定事件

v-on: 事件名

• 发现函数就加括号调用，否则直接运行代码

<button @click="n+=1">click</button>

• 缩写

<button @click="n+=1">+1</button>

条件判断

• if...else

<div v-if="x>0">
  x > 0
</div>
<div v-else>
  x <= 0
</div>

循环

• for (value, key) in ...

<ul>
  <li v-for="(key, value) in obj" :key="key">
     属性名： {{key}}, 属性值: {{value}}
  </li>
</ul>

显示、隐藏

v-show

<div v-show="judge"></div>

近似等于

<div :style="{display: judge ? 'block' : 'none'}"></div>

.sync

.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

<template>
  <div id="app">
    this is parent, value is : {{ val }}
    <Son :value="val" @update:value="val = $event"/>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      val: 100,
    };
  },
  components: {
    Son: {
      props: ["value"],
      template: `
        <div>this is children,show val: {{ value }}
            <button @click="$emit('update:value', value+1)">+1</button>
        </div>
      `,
    },
  },
};
</script>

<style>

上面的代码和下面的代码效果一致。

<template>
  <div id="app">
    this is parent, value is : {{ val }}
    <Son :value.sync="val" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      val: 100,
    };
  },
  components: {
    Son: {
      props: ["value"],
      template: `
        <div>this is children,show val: {{ value }}
            <button @click="$emit('update:value', value+1)">+1</button>
        </div>
      `,
    },
  },
};
</script>