v-bind
基本使用：在属性前加上v-bind:来动态绑定
<template id="my-app">
<!-- v-bind的基本使用 -->
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="link">百度一下</a>
</template>
<script>
const app={
template:"#my-app",
data(){
return{
imgUrl: "https://avatars.githubusercontent.com/u/42291026?v=4",
link: "https://www.baidu.com"
}
}
};使用语法糖简写：
<template id="my-app">
<!-- 1.v-bind的基本使用 -->
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="link">百度一下</a>
<!-- 2.v-bind的语法糖 : -->
<a :href="link">百度一下</a>
</template>v-bind绑定class的对象语法
<template id="my-app">
<!-- 对象语法，传入一个对象 -->
<div :class="{'active':isActive}">啊啊啊</div>
<button @click="toggle">切换</button>
<!-- 也可以有多个键值对 -->
<div :class="{'active':isActive, title:true}">啊啊啊</div>
<!-- 默认class和动态class相结合 -->
<div class="abc cba" :class="{'active':isActive, title:true, title:true}">啊啊啊</div>
<!-- 将对象放到一个单独的属性中 -->
<div :class="classObj">啊啊啊</div>
<!-- 将对象放到一个methods的方法中 -->
<div :class="getClassObj()">啊啊啊</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
message: "hello world",
isActive: true,
classObj: {'active':true, title:true}
}
},
methods:{
toggle(){
this.isActive=!this.isActive;
},
getClassObj(){
return {'active':true, title:true};
}
}
};
Vue.createApp(app).mount("#app");
</script>v-bind绑定class的数组语法
<template id="my-app">
<div :class="['abc',title]">哈哈哈</div>
<div :class="['abc',title,isActive ? 'active' :'']">哈哈哈</div>
<div :class="['abc',title,{Active: true}]">哈哈哈</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
title: 'cba',
isActive: true
}
},
methods:{
}
};
Vue.createApp(app).mount("#app");
</script>同理，v-bind绑定style的对象语法：
<template id="my-app">
<div :style="{color: finalColor,'font-size': '30px'}">哈哈</div>
<div :style="{color: finalColor,fontSize: '30px'}">哈哈</div>
<div :style="{color: finalColor,fontSize: finalSize + 'px'}">哈哈</div>
<div :style="finalStyleObj">哈哈哈</div>
<div :style="getFinalStyleObj()">哈哈哈</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
finalColor: 'red',
finalSize: 50,
finalStyleObj:{
color: 'red',
fontSize: '70px',
backgroundColor: 'black'
}
}
},
methods:{
getFinalStyleObj(){
return {
color: 'red',
fontSize: '70px',
backgroundColor: 'black'
}
}
}
};v-bind绑定style的数组语法：
<template id="my-app">
<div :style="[style1Obj, style2Obj]">哈哈哈</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
style1Obj: {
color: 'red',
fontSize: '30px'
},
style2Obj: {
textDecoration: "underline"
}
}
},
methods:{
}
};v-bind动态绑定属性
<template id="my-app">
<div :[name]="value"></div>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
name: 'cba',
value: 'abc'
}
},
methods:{
}
};
Vue.createApp(app).mount("#app");
</script>v-bind属性直接绑定一个对象
<template id="my-app">
<div v-bind='info'></div>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
info: {
'name': 'sk',
'age': 18,
'height': 1.88
}
}
},
methods:{
}
};
Vue.createApp(app).mount("#app");
</script>v-on
基本使用
<template id="my-app">
<!-- 完整写法 v-on:监听的事件="methods中的一个方法" -->
<button v-on:click="btn1Click">按钮1</button>
<div class="area" v-on:mousemove="mouseMove"></div>
<!-- 语法糖 -->
<button @click="btn1Click">按钮1</button>
<!-- 绑定一个表达式，inline statement -->
<button @click="counter++">{{counter}}</button>
<!-- 绑定一个对象 -->
<div class="area" v-on="{click: btn1Click, mousemove: mouseMove}"></div>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
message: "hello world",
counter: 100
}
},
methods:{
btn1Click(){
console.log("按钮1发生了点击");
},
mouseMove(){
console.log("鼠标移动");
}
}
};
Vue.createApp(app).mount("#app");
</script>v-on传递参数
<template id="my-app">
<!-- 默认传入event对象，可以在方法中获取 -->
<button @click="btn1Click">按钮1</button>
<!-- $event可以获取事件发生时的事件对象 -->
<button @click="bnt2Click($event, 'shopkeeper')">按钮2</button>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
message: "hello world"
}
},
methods:{
btn1Click(e){
console.log(e);
},
bnt2Click(event, name, age){
console.log(name,event,age);
}
}
};
Vue.createApp(app).mount("#app");
</script>当参数数量不匹配时，多余参数将被忽略，缺少的参数将会undefined。
v-on的修饰符用于对事件就行进一步的处理
例如.stop可以防止子标签接收到的事件再传递给父标签
<template id="my-app">
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
</template>使用.enter可以限定@keyup仅在输入enter时触发
<template id="my-app">
<input type="text" @keyup.enter="keyUp">
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
message: "hello world"
}
},
methods:{
keyUp(event){
console.log("keyUp",event.target.value);
}
}
};
Vue.createApp(app).mount("#app");
</script>