这里只介绍v-on和v-bind的使用方法。
v-on
v-on 是 Vue.js 中用于监听 DOM 事件的指令。它允许你在触发特定事件（如点击、鼠标移动、键盘输入等）时执行相应的方法或逻辑。
基本语法：
htmlCopy
<!-- 点击事件示例 -->
<button v-on:click="methodName">点击我</button>v-on是 Vue 的指令，用于监听事件。click是要监听的事件类型，这里是点击事件。methodName是在触发点击事件时将要执行的方法。
缩写形式：
v-on 还有一种缩写形式 @，功能完全相同。
htmlCopy
<!-- 点击事件示例（缩写形式） -->
<button @click="methodName">点击我</button>事件处理方法：
在 Vue 实例中，你需要在 methods 中定义相应的方法，以便在触发事件时执行。
javascriptCopy
new Vue({
el: '#app',
methods: {
methodName: function () {
// 这里写入要执行的逻辑
console.log('点击事件被触发了！');
}
}
})当按钮被点击时，methodName 方法将被调用，你可以在这个方法中编写你需要执行的代码逻辑。
传递参数：
你也可以在触发事件时传递参数到事件处理方法中。
htmlCopy
<!-- 传递参数的点击事件示例 -->
<button @click="handleClick('参数')">点击我</button>
javascriptCopy
methods: {
handleClick: function (param) {
console.log('传递的参数是：', param);
}
}动态事件名和方法名：
v-on 还支持动态地绑定事件名和方法名。
htmlCopy
<!-- 动态事件名和方法名示例 -->
<button v-on:[dynamicEventName]="dynamicMethodName">点击我</button>
javascriptCopy
data: {
dynamicEventName: 'click',
dynamicMethodName: 'handleClick'
},
methods: {
handleClick: function () {
console.log('动态绑定事件和方法！');
}
}这允许你根据数据或计算属性的值动态地绑定事件和方法，增加了灵活性和可重用性。
总之，v-on 是 Vue.js 中用于处理 DOM 事件的指令，能够使事件处理变得简单而直观，并且易于管理和维护。
实战使用方法：
把图片放到页面上，设置图片的标题
html
<body>
<div id="app"></div>
<template id="my-app">
<button @click="foo(-5)">-</button> <!--mouseenter鼠标滑入事件 -->
<span>{{count}}</span>
<button @click="foo(10)">+</button>
</template>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template:'#my-app',
data(){
return{
count:10
}
},
methods:{
foo(count){
this.count+=count // 获取到data的count
}
}
})
app.mount('#app')
</script>
</body>v-bind
v-bind 是 Vue 中用于动态绑定 HTML 属性的指令。它允许你在 HTML 中使用 Vue 的数据来动态地更新元素的属性。
基本语法
htmlCopy
<!-- 绑定元素的属性 -->
<img v-bind:src="imageSrc">
<a v-bind:href="link">链接</a>v-bind是 Vue 提供的指令，用于动态绑定 HTML 属性。:src和:href是要绑定的属性，冒号:是v-bind的简写形式。imageSrc和link是 Vue 实例中的数据。
示例
javascriptCopy
new Vue({
el: '#app',
data: {
imageSrc: 'https://via.placeholder.com/150', // 图片链接
link: 'https://www.example.com' // 链接地址
}
});动态属性绑定
使用 v-bind，你可以动态地绑定元素的任何属性，比如 class、style 等。这使得属性的值能够根据 Vue 实例中的数据动态变化。
htmlCopy
<!-- 动态绑定 class -->
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 动态绑定 style -->
<div v-bind:style="{ color: textColor, fontSize: textSize + 'px' }"></div>在这些例子中，isActive、hasError、textColor 和 textSize 都是 Vue 实例中的数据，它们可以根据数据的变化来动态更新元素的属性值。
缩写形式
v-bind 还有一种更简洁的写法，可以直接使用 :。
htmlCopy
<!-- 缩写形式 -->
<img :src="imageSrc">
<a :href="link">链接</a>为什么重要
v-bind 让你能够将 Vue 实例中的数据与 HTML 元素的属性进行关联，实现了数据驱动视图的目的。这种动态绑定使得页面的渲染更具有逻辑性和灵活性，让你能够根据应用的状态动态地更新元素的属性，使 Vue 应用更加强大和可维护。
图片切换实战
点击下一页动态切换图片，到达第一页和最后一页时隐藏上一页或下一页的按钮
html
<body>
<div id="app"></div>
<template id="my-app">
<button v-show="index>0" @click="foo(-1)">上一页</button>
<img :src="arr[index]" alt=""v-bind:title="msg">
<button v-show="index<arr.length-1" @click="foo(1)">下一页</button>
</template>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template:'#my-app',
data(){
return{
index:0,
arr:[
'qq.png',
'qq2.jpg',
'qq3.png'
]
}
},
methods:{
foo(index){
this.index+=index
}
}
})
app.mount('#app')
</script>实战没有用到上面所说全部方法，程序员得学会自学，只看不敲不得行。