<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-常用指令-绑定类名</title>
<script src="js/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.size{
font-size: 100px;
}
.color{
color: red;
}
.active{
background: skyblue;
}
</style>
</head>
<body>
<!--
1.v-bind指令的作用
v-bind指令给"任意标签"的"任意属性"绑定数据
对于大部分的属性而言我们只需要直接赋值即可, 例如:value="name"
但是对于class和style属性而言, 它的格式比较特殊
2.通过v-bind绑定类名格式
:class="['需要绑定类名', ...]"
3.注意点:
3.1直接赋值一个类名(没有放到数组中)默认回去Model中查找
:class="需要绑定类名"
2.2数组中的类名没有用引号括起来也会去Model中查找
:class="[需要绑定类名]"
2.3数组的每一个元素都可以是一个三目运算符按需导入
:class="[flag?'active':'']"
2.4可以使用对象来替代数组中的三目运算符按需导入
:class="[{'active': true}]"
2.5绑定的类名太多可以将类名封装到Model中
obj: {
'color': true,
'size': true,
'active': false,
}
4.绑定类名企业应用场景
从服务器动态获取样式后通过v-bind动态绑定类名
这样就可以让服务端来控制前端样式
常见场景: 618 双11等
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <p class="size color active">我是段落</p>-->
<!--
注意点:
如果需要通过v-bind给class绑定类名, 那么不能直接赋值
默认情况下v-bind会去Model中查找数据, 但是Model中没有对应的类名, 所以无效, 所以不能直接赋值
-->
<!-- <p :class="size">我是段落</p>-->
<!--
注意点:
如果想让v-bind去style中查找类名, 那么就必须把类名放到数组中
但是放到数组中之后默认还是回去Model中查找
-->
<!-- <p :class="[size]">我是段落</p>-->
<!--
注意点:
将类名放到数组中之后, 还需要利用引号将类名括起来才会去style中查找
-->
<!-- <p :class="['size', 'color', 'active']">我是段落</p>-->
<!--
注意点:
如果是通过v-bind类绑定类名, 那么在绑定的时候可以编写一个三目运算符来实现按需绑定
格式: 条件表达式 ? '需要绑定的类名' : ''
-->
<!-- <p :class="['size', 'color', flag ? 'active' : '']">我是段落</p>-->
<!--
注意点:
如果是通过v-bind类绑定类名, 那么在绑定的时候可以通过对象来决定是否需要绑定
格式: {'需要绑定的类名' : 是否绑定}
-->
<!-- <p :class="['size', 'color',{'active' : false}]">我是段落</p>-->
<!--
注意点:
如果是通过v-bind类绑定类名, 那么还可以使用Model中的对象来替换数组
-->
<p :class="obj">我是段落</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
flag: false,
obj:{
'size': false,
'color': false,
'active': true,
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-常用指令-绑定样式</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.如何通过v-bind给style属性绑定数据
1.1将数据放到对象中
:style="{color:'red','font-size':'50px'}"
1.2将数据放到Model对象中
obj: {
color: 'red',
'font-size': '80px',
}
2.注意点
2.1如果属性名称包含-, 那么必须用引号括起来
2.2如果需要绑定Model中的多个对象, 可以放到一个数组中赋值
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <p style="color: red">我是段落</p>-->
<!--
注意点:
和绑定类名一样, 默认情况下v-bind回去Model中查找, 找不到所以没有效果
-->
<!-- <p :style="color: red">我是段落</p>-->
<!--
注意点:
我们只需要将样式代码放到对象中赋值给style即可
但是取值必须用引号括起来
-->
<!-- <p :style="{color: 'red'}">我是段落</p>-->
<!--
注意点:
如果样式的名称带-, 那么也必须用引号括起来才可以
-->
<!-- <p :style="{color: 'red', 'font-size': '100px'}">我是段落</p>-->
<!-- <p :style="obj">我是段落</p>-->
<!--
注意点:
如果Model中保存了多个样式的对象 ,想将多个对象都绑定给style, 那么可以将多个对象放到数组中赋值给style即可
-->
<p :style="[obj1, obj2]">我是段落</p>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
obj1:{
"color": "blue",
"font-size": "100px"
},
obj2: {
"background-color": "red"
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-常用指令-v-on</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-on指令?
v-on指令专门用于给元素绑定监听事件
2.v-on指令格式
v-on:事件名称="回调函数名称"
@事件名称="回调函数名称"
3.v-on注意点:
v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <button onclick="alert('lnj')">我是按钮</button>-->
<!--
注意点:
1.如果是通过v-on来绑定监听事件, 那么在指定事件名称的时候不需要写on
2.如果是通过v-on来绑定监听事件, 那么在赋值的时候必须赋值一个回调函数的名称
-->
<!-- <button v-on:click="alert('lnj')">我是按钮</button>-->
<!--
注意点:
当绑定的事件被触发后, 会调用Vue实例的methods对象中对应的回调函数
-->
<!-- <button v-on:click="myFn">我是按钮</button>-->
<button @click="myFn">我是按钮</button>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
},
methods: {
myFn(){
alert('lnj')
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-常用指令-v-on修饰符</title>
<script src="js/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.a{
width: 300px;
height: 300px;
background: red;
}
.b{
width: 200px;
height: 200px;
background: blue;
}
.c{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<!--
1.v-on修饰符
在事件中有很多东西需要我们处理, 例如事件冒泡,事件捕获, 阻止默认行为等
那么在Vue中如何处理以上内容呢, 我们可以通过v-on修饰符来处理
2.常见修饰符
.once - 只触发一次回调。
.prevent - 调用 event.preventDefault()。
.stop - 调用 event.stopPropagation()。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.capture - 添加事件侦听器时使用 capture 模式。
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!--注意点: 默认情况下事件的回调函数可以反复的执行, 只要事件被触发就会执行-->
<!-- <button v-on:click="myFn">我是按钮</button>-->
<!--如果想让事件监听的回调函数只执行一次, 那么就可以使用.once修饰符-->
<!-- <button v-on:click.once ="myFn">我是按钮</button>-->
<!--如果想阻止元素的默认行为, 那么可以使用.prevent修饰符-->
<!-- <a href="http://www.it666.com" v-on:click.prevent="myFn">我是A标签</a>-->
<!--
默认情况下载嵌套的元素中, 如果都监听了相同的事件, 那么会触发事件冒泡
如果想阻止事件冒泡, 那么可以使用.stop修饰符
-->
<!--<div class="a" @click="myFn1">
<div class="b" @click.stop="myFn2">
<div class="c" @click="myFn3"></div>
</div>
</div>-->
<!--
如果想让回调只有当前元素触发事件的时候才执行, 那么就可以使用.self修饰符
-->
<!--<div class="a" @click="myFn1">
<div class="b" @click.self="myFn2">
<div class="c" @click="myFn3"></div>
</div>
</div>-->
<!--
默认情况下是事件冒泡, 如果想变成事件捕获, 那么就需要使用.capture修饰符
-->
<div class="a" @click.capture="myFn1">
<div class="b" @click.capture="myFn2">
<div class="c" @click.capture="myFn3"></div>
</div>
</div>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
},
methods: {
myFn(){
alert('lnj');
},
myFn1(){
console.log("爷爷");
},
myFn2(){
console.log("爸爸");
},
myFn3(){
console.log("儿子");
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-常用指令-v-on注意点</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.v-on注意点
1.1绑定回调函数名称的时候, 后面可以写()也可以不写
v-on:click="myFn"
v-on:click="myFn()"
1.2可以给绑定的回调函数传递参数
v-on:click="myFn('lnj', 33)"
1.3如果在绑定的函数中需要用到data中的数据必须加上this
-->
<!--这里就是MVVM中的View-->
<div id="app">
<button @click="myFn('lnj', 33, $event)">我是按钮</button>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
gender: "man"
},
methods: {
myFn(name, age, e){
console.log(this.gender);
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-常用指令-v-on按键修饰符</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是按键修饰符
我们可以通过按键修饰符监听特定按键触发的事件
例如: 可以监听当前事件是否是回车触发的, 可以监听当前事件是否是ESC触发的等
2.按键修饰符分类
2.1系统预定义修饰符
2.2自定义修饰符
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <input type="text" @keyup.enter="myFn">-->
<input type="text" @keyup.f2="myFn">
</div>
<script>
Vue.config.keyCodes.f2 = 113;
let vue = new Vue({
el: '#app',
data: {
},
methods: {
myFn(){
alert("lnj");
}
}
});
</script>
</body>
</html>
我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com
本文是一篇关于Vue.js入门的学习指南，由知名讲师李南江讲解。内容涵盖Vue的基本概念、安装、组件化开发、响应式原理以及实战应用。通过本文，读者将能够快速上手Vue开发，掌握现代前端框架的核心技能。
扫一扫
4633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
