(1)v-bind、v-on
v-bind的基本用法是动态更新HTML元素上的属性,如id,class,href,src等。
v-on,点击事件上
<style>
.left{
color:red;
}
</style>
<body>
<div id="app">
<div v-bind:class="{left:isleft}">{{message}}</div>
<div v-on:click="change">点击此处改变isleft的值</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message:"你好!",
isleft: true
},
methods: {
change:function(){
if(this.isleft===true){
this.isleft=false;
}else{
this.isleft=true;
}
}
}
})
</script>
</body>
三元表达式:
<div id="app">
<div v-bind:class="[is?classLeft:classRight]">{{message}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好!",
is:true,
classLeft:"left",
classRight:"right"
},
})
</script>
缩写
<!--v-bind完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- v-on完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
1.事件修饰符
.stop 阻止事件冒泡,只会触发点击事件的那一层
.prevent 提交时不再重载页面
.capture 当元素发生冒泡时,优先触发该绑定事件
.self 只有点击该事件才会执行
.once事件只会触发一次
.passive不会阻止事件的默认行为