1.事件绑定指令(v-on)
注意:'v-on:'可以简写为'@'
使用Vue时,如需为DOM注册事件,及其的简单,语法如下:
- <button v-on:事件名="内联语句">按钮</button>
- <button v-on:事件名="处理函数">按钮</button>
- <button v-on:事件名="处理函数(实参)">按钮</button>
内联语句指的是直接在HTML标签上使用JavaScript代码的一种方式。在Vue中,可以通过v-on
指令将内联语句与DOM事件关联起来,从而在触发事件时执行相应的JavaScript代码。
例如,在一个按钮上使用v-on:click
指令,可以指定一个内联语句作为点击事件的处理函数,如下所示:
<button v-on:click="alert('Clicked!')">按钮</button>
这里的alert('Clicked!')
就是内联语句,它会在按钮被点击时直接执行。Vue会将内联语句转换为JavaScript函数,并将其绑定到相应的DOM事件上,使得事件触发时内联语句中的代码会被执行。
这里的<button>是生成一个按钮
以下是内联语句的示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="count=count-100">-100</button>
<button @click="count--">-</button>
<span>{{count}}</span>
<button @click="count++">+</button>
<button @click="count=count+100">+100</button>
<hr>
<button @mouseenter="c--">-</button>
<span>{{c}}</span>
<button @mouseenter="c++">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
count:100,
c:50
}
})
</script>
</body>
</html>
可以看出显示两个数字,一个100一个50,并且有6个按钮,当我们对100周围按钮进行点击事件,数字会变化,但是50我们只需要触碰它的按钮就可以变化,因为mouseenter表示触碰事件
以下是v-on的参数传递,实际上就是调用一个方法,以下是v-on参数的示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='app'>
<div class="box">
<h3>自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
<button @click="buy(2)">牛奶2元</button>
</div>
<p>银行卡余额:{{money}}元</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
money:100
},
methods:{
buy(price){
this.money-=price
}
}
})
</script>
</body>
</html>
运行结果
当我们进行点击事件时,100也在发生变化
经过以上的学习,我们也可以用v-on来实现隐藏和显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="fn">切换显示隐藏</button>
<h1 v-show="isShow">hello,world</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
isShow:false
},
methods:{
fn(){
this.isShow=!this.isShow
}
}
})
</script>
</body>
</html>
运行如下
点击按钮可以自由实现hello,world的显示和隐藏
好的,以上就是v-on指令的基本内容
2.属性绑定指令(v-bind)
作用:动态设置html的标签属性 比如:src、url、title
'v-bind:'可以简写为':'
有一个图片,它的 `src` 属性值,是一个图片地址。这个地址在数据 data 中存储。
可以这样设置属性值:
- `<img v-bind:src="url" />`当然这样也是可以的
- `<img :src="url" yu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<img :src="imgUrl" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
imgUrl:'./img/素材.png',
}
})
</script>
</body>
</html>
运行结果
可以看得出来图片已经显示出来了