vue 模版语法

<script >
export default{
  data(){
    return {
      name:'zhangsan',
      age:15,
      msg:'<h2>标题</h2>',
      src:'/favicon.ico',
      id1:'id1',
      attributeName:'id',
      mouseEvent:'click'
    }
  },
  
}
</script>

<template>
  <!-- 根组件实例的所有property 在模版中都访问 -->
  <div>
    <h2 >名称：{{ name }}</h2>
    <h2>年龄{{ age }}</h2>
    <!-- v-once 当数据更新时，插值处的数据不会更改 -->
    <h2 v-once>不修改名称{{ name }}</h2>
    <!-- v-on 用来监听事件 -->
    <button v-on:click="name='lisi'"> change name</button>
    <!-- 语法糖 -->
    <button @click="name='lisi'"> change name</button>

    <p v-html="msg"></p>
    <!-- v-bind:动态绑定属性内容 -->
    <img v-bind:src="src"/>
    <img :src="src"/>
    <!-- 动态参数 -->
    <!-- 动态属性 -->
    <p v-bind:[attributeName]="id1">绑定事件由蓝变绿</p>
    <button @click="attributeName='class'">修改属性变为绿</button>

    <!-- 动态事件 -->
    <button @[mouseEvent]="attributeName='class'">修改属性变为绿</button>
    <button @click="mouseEvent='mouseover'">改变事件</button>

  </div>
</template>

<style scoped>

.id1 {
    color:green;
  }

  #id1 {
    color:blue;
  }
</style>