指令2
v-bind
v-bind可以动态获取超链接地址
<div id="app">
<a v-bind:href="ulr">百度一下</a>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
ulr:"https://www.baidu.com",
}
})
</script>
v-bind语法糖
去掉v-bind,只留下冒号:
<a :href="ulr">百度一下</a>
v-bind也可以用在更改class属性:
用法一:直接通过{ }绑定一个类
<h2 :class="{'active':isActive}">Hello Vue</h2>
用法二:也可以通过判断,传入多个值
用法三:和普通类同时存在时,并不冲突
<head>
<style>
.acticve{
color: blue;
}
.line{
height: 200px;
width: 100px;
border: 1px solid blue;
}
.title{
line-height: 20px;
}
</style>
</head>
<body>
<div id="app">
<h2 class="title" v-bind:class="{acticve:isActive,line:isLine}">哈哈!</h2>
<button v-on:click="btnclick">点击变化样式</button>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
ulr:"https://www.baidu.com",
isActive:false,
isLine:false,
},
methods:{
btnclick:function(){
this.isActive = !this.isActive;
this.isLine = !this.isLine;
}
}
})
</script>
</body>
点击按钮之后:
用法四:如果过于复杂,也可以放在一个methods或者computed中。
<h2 :class="classes">Hello Vue</h2>
注:classes是一个计算属性
计算属性
<div id="app">
<h2>{{fullname}}</h2>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
firstname:"LeBron",
lastname:"James",
},
computed:{ //新的属性
fullname : function(){
return this.firstname + ' '+ this.lastname;
}
}
})
</script>
计算复杂属性
<div id="app">
<h2>总价格:{{totalPrice}}</h2>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
books:[
{id:110,name:"张三的一生",price:110},
{id:110,name:"张三的二生",price:160},
{id:110,name:"法外狂徒的一生",price:180},
{id:110,name:"张三颠沛流离的一生",price:230},
{id:110,name:"李四的一生",price:10},
]
},
computed:{
totalPrice:function(){
let result = 0;
for(let i = 0; i<this.books.length;i++){
result += this.books[i].price;
}
return result;
}
}
})
</script>
computed 与 methods:
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
事件监听
在前端开发中,需要经常和用户交互,这个时候就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等,那如何在Vue中监听事件呢?
使用v-on指令
v-on介绍
- 作用:绑定事件监听器
- 缩写:@
- 预期:Function | Inline Statement | Object
- 参数:event
语法糖:可以将v-on: 简写成@
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
add() {
this.counter++;
},
sub() {
this.counter--;
}
},
})
</script>
v-on的参数问题
在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,这个时候,Vue会默认将浏览器产生的event事件对象作为参数传入到方法
<body>
<div id="app">
<button @click="btn1">按钮一</button>
</div>
<script>
const app = new Vue({
el:"#app",
methods:{
btn1(event){
console.log(event);
}
}
})
</script>
</body>
点击按钮会在控制台产生:
注意!
方法定义时,如果需要event对象,同时又需要其他参数,在调用方法时,如何手动获取浏览器参数event对象:$event
<button @click="btn1($event,event2)">按钮一</button>
<script>
methods:{
btn1(event,event2){
console.log(event);
console.log(event2);
}
</script>
v-on 修饰符
.stop可以阻止事件冒泡
<button @click.stop="btn1">按钮一</button>
.prevent 可以取消默认事件
<form action="baidu">
<input type="submit" value="提交按钮" @click.prevent="submitclick">
</form>
.once 只触发一次回调
<button @click.once="btn1">按钮一</button>