vue1

v-bind: =:

<template>
  <div id="app">
    <a :href="url">6666</ a>
    <img :src="logo" alt="" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "https://cn.bing.com/",
      logo: "http://n.sinaimg.cn/blog/340/w210h130/20211224/e11c-1778581e06278e3a9cacd743a1d07f05.jpg",
    };
  },
};
</script>

v-on

<template>
  <div id="app">
    <h1>当前购买数量：{{ count }}</h1>
    <button v-on:click="count = count + 1">点击+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
};
</script>

黄豆:
[图片]

黄豆:
<template>
  <div id="app">
    <h1>当前购买数量：{{ count }}</h1>
    <button v-on:click="count = count + 1">点击+1</button>
    <button v-on:click="add">11111</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    add() {
      console.log(111);
      this.count = this.count + 1;
    },
  },
};
</script>

methods方法

<template>
  <div id="app">
    <h1>当前购买数量：{{ count }}</h1>
    <button v-on:click="count = count + 1">点击+1</button>
    <button v-on:click="add">11111</button>
    <button v-on:click="addf(10)">+10</button>
    <!-- 简写方式 -->
    <button @click="addf(10)"></button>
  </div>
</template>

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

v-on=@

事件对象

<template>
  <div id="app">
    <h1>当前购买数量：{{ count }}</h1>
    <button @click="addfn()">111111</button>
    <button @click="addfn">222222</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    addfn(e) {
      console.log(e);
    },
  },
};
</script>
<template>
  <div id="app">
    <h1>当前购买数量：{{ count }}</h1>
    <button @click="addfn()">111111</button>
    <button @click="addfn">222222</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    addfn(e) {
      console.log(e);
    },
  },
};
</script>