目录
一.v-bind
1 .v-bind的基本使用
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind的基本使用</title>
</head>
<body>
<div id="app"></div>
<!-- vue2 template模板中只能有一个根元素 -->
<!-- vue3 是允许template中有多个根元素 -->
<template id="my-app">
<!-- 1.v-bind的基本使用 -->
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="link">ruiwiki.cn</a>
<!-- 2.v-bind提供一个语法糖 -->
<img :src="imgUrl" alt="">
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word",
imgUrl: "https://img.foreverblog.cn/wormhole_4_tp.gif",
link: "https://ruiwiki.cn"
}
},
// 声明方法
methods: {
}
}).mount("#app");
</script>
</body>
</html>
2. v-bind绑定class-对象语法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind绑定class</title>
<style >
.active {
color: red;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 对象语法：{'active': boolean} -->
<div :class="{'active': isActive}">test</div>
<button @click="toggle">切换</button>
<!-- 也可以多个键值对 -->
<div :class="{active: isActive, title: true}">测试</div>
<div :class="{active: isActive, title: true}">测试</div>
<!-- 默认的class和动态的class的结合 -->
<div class="abc cba" :class="{active: isActive, title: true}">测试</div>
<!-- 将对象放到一个单独的属性中 -->
<div class="abc cba" :class="classObj">测试</div>
<!-- 将返回的对象放到一个methods方法中 -->
<div class="abc cba" :class="getClassObj()">测试</div>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word",
isActive: true,
title: "abc",
classObj: {
active: true,
title: true
}
}
},
// 声明方法
methods: {
toggle() {
this.isActive = !this.isActive;
},
getClassObj() {
return {
active: true,
title: true
}
}
}
}).mount("#app");
</script>
</body>
</html>
3. v-bind绑定class-数组语法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind绑定class</title>
<style >
.active {
color: red;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<div :class="['abc', title]">测试</div>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello World",
title: "cba"
}
},
// 声明方法
methods: {
}
}).mount("#app");
</script>
</body>
</html>
4. v-bind绑定sytle-对象语法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind绑定sytle-对象语法</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- :style="{cssPropertyName: cssPropertyValue}" -->
<div :style="{color: finalColor, 'font-size': '30px'}">test</div>
<div :style="{color: finalColor, fontSize: '30px'}">test</div>
<div :style="{color: finalColor, fontSize: finalFontSize + 'px'}">test</div>
<div :style="finalStyleObj">zaker</div>
<div :style="getFinalStyleObj()">zaker</div>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word",
finalColor: "red",
finalFontSize: "50",
finalStyleObj: {
'font-size': '50px',
fontWeight: 700,
backgroundColor: 'red'
}
}
},
// 声明方法
methods: {
getFinalStyleObj() {
return {
'font-size': '50px',
fontWeight: 700,
backgroundColor: 'red'
}
}
}
}).mount("#app");
</script>
</body>
</html>
5. v-bind绑定sytle-数组语法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind绑定sytle-数组语法</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<div :style="[style1Obj, style2Obj]">test</div>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word",
style1Obj: {
color: 'red',
fontSize: '30px'
},
style2Obj: {
textDecoration: "underline"
}
}
},
// 声明方法
methods: {
}
}).mount("#app");
</script>
</body>
</html>
6. v-bind动态绑定属性
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind动态绑定属性</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<div :[name]="value">zaker</div>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word",
name: "cba",
value: "kobe"
}
},
// 声明方法
methods: {
}
}).mount("#app");
</script>
</body>
</html>
7. v-bind属性绑定对象
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind属性绑定对象</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<div v-bind="info">test</div>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word",
info: {
name: "why",
age: 18,
height: 1.88
}
}
},
// 声明方法
methods: {
}
}).mount("#app");
</script>
</body>
</html>
8. v-no的基本使用
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-no的基本使用</title>
<style>
.cleck {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 完整写法：v-on:监听的时间=methods中的方法 -->
<button v-on:click="btnClick">登录</button>
<div class="cleck" v-on:mousemove="mouseMove"></div>
<!-- 语法糖 -->
<button @click="btnClick">登录</button>
<!-- 绑定一个表达式:inline statement -->
<button @click="counter++">{{counter}}</button>
<!-- 绑定一个对象 -->
<div class="cleck" v-on="{click: btnClick, mousemove: mouseMove}"></div>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word",
counter: 100
}
},
// 声明方法
methods: {
btnClick() {
console.log("点击事件");
},
mouseMove() {
console.log("鼠标移动事件");
}
}
}).mount("#app");
</script>
</body>
</html>
9. v-no的参数传递
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-no的参数传递</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 默认传入event对象，可以在方法中获取 -->
<button @click="btn1Click">按钮</button>
<!-- $event 可以获取收到事件发生是的事件对象 -->
<button @click="btn2Click($event, 'coderwhy', '18')">按钮</button>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word"
}
},
// 声明方法
methods: {
btn1Click(event) {
console.log(event);
},
btn2Click(event, name, age) {
console.log(event, name, age);
}
}
}).mount("#app");
</script>
</body>
</html>
10. v-on的修饰符
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on的参数传递</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<div @click="divClick">
<!-- 事件冒泡 -->
<button @click.stop="btnClick">按钮</button>
</div>
<input type="text" @keyup.enter="enterKeyup">
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word"
}
},
// 声明方法
methods: {
divClick() {
console.log("divClick")
},
btnClick() {
console.log("btnClick")
},
enterKeyup(event) {
console.log("keyup", event.target.value)
}
}
}).mount("#app");
</script>
</body>
</html>
本文作者:ruiwiki
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
目录
