5.vue-cli基础知识点

1. vue-cli中的插值表达式

<template>
  <div id="app">
    <div>{{msg}}</div>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      msg: "hello world"
    };
};
</script>

2. v-for必须加:key

<template>
  <div id="app">
    <p v-for="item of arr" :key="item">{{item}}</p>
  </div>
</template>
export default{
  data() {
    return {
      arr: ["html", "css", "javascript"]
    };
 },
}

3. 事件@click

<div @click="handleClick">{{msg}}</div>
<script>
export default {
  name: "app",
  data() {
    return {
      msg: "hello world",
    };
  },
  //事件集中写在methods属性中
  methods:{
    handleClick(){
      this.msg = "change"
    }
  }
};
</script>