一、模板语法

1、文本渲染

使用双花括号语法插入文本

<template>
  <div>
    <h3>msg: {{ message }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "输出信息"
    }
  }
}
</script>

<style scoped></style>

2、渲染标签

<template>
  <div>
    <div v-html="rawHtml"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: "<a href='http://www.baidu.com'>百度</a>"
    }
  }
}
</script>

<style scoped></style>

3、属性

<template>
  <div>
    <div v-bind:id="idValue">属性测试</div>
    <!-- 可以简写为: -->
    <div :id="idValue">属性测试</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      idValue: 500
    }
  }
}
</script>

<style scoped></style>

5、模板语法支持表达式

<template>
  <div>
    <p>{{ number + 10 }}</p>
    <p>{{ flag ? "结果为真" : "结果为假" }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 500,
      flag: false
    }
  }
}
</script>

<style scoped></style>

二、条件渲染

1、条件渲染(为假时不渲染)

<template>
  <div>
    <p v-if="flag">为真时显示</p>
    <p v-else>为假时显示</p>

  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false
    }
  }
}
</script>

<style scoped></style>

2、条件展示(渲染不显示)

<template>
  <div>
    <p>写在前</p>
    <p v-show="flag">为真时显示</p>
    <p>写在后</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false
    }
  }
}
</script>

<style scoped></style>

3、区别

v-if 切换时会有较高的渲染开销
v-show 有较好的性能

三、列表渲染

1、列表渲染

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item.msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ msg: "数据1" }, { msg: "数据2" }]
    }
  }
}
</script>

<style scoped></style>

2、维护状态

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ msg: "数据1", id: 1 }, { msg: "数据2", id: 2 }]
    }
  }
}
</script>

<style scoped></style>

数据更新，已经渲染数据不变，仅添加新数据。给数据添加索引，方便重用原有数据，保持数据顺序。

四、事件处理

1、事件监听

<template>
  <div>
    <!-- 使用v-on:event 来监听事件，简写为 @event -->
    <!-- <button v-on:click="count += 1">计数加一</button> -->
    <button @click="count += 1">计数加一</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<style scoped></style>

2、事件处理方法

<template>
  <div>
    <button @click="AddCount">计数加一</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    AddCount(event) {
      this.count++;
    }
  }
}
</script>

<style scoped></style>

3、内联处理器中的方法（事件传递参数）

<template>
  <div>
    <button @click="AddCount(2)">计数加二</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    AddCount(num) {
      this.count += num;
      console.log(num);
    }
  }
}
</script>

<style scoped></style>

五、表单输入绑定

1、表单输入绑定

<template>
  <div>
    <input v-model="msg" placeholder="请输入">
    <p>输入了：{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: ""
    }
  },
  methods: {

  }
}
</script>

<style scoped></style>

2、修饰符

<template>
  <div>
    <!-- lazy:在change（输入结束，失去选中）事件后同步 -->
    <!-- trim：足底不过过滤首位空白字符 -->
    <input v-model.lazy.trim="msg" placeholder="请输入">
    <p>输入了：{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: ""
    }
  },
  methods: {

  }
}
</script>

<style scoped></style>