(在讲指令之前,可以先了解插值表达式,如果已经知道,当我没说)
一.插值表达式
1.数据绑定最常见的形式就是双大括号的文本插值,Mustache上属性的值替代。只要绑定的数据对象上属性发生了改变,插值处的内容都会更新。,message 是将数据解析成纯文本的,也就是说,就算中含有了 html,message签,它也是只看做纯文本的,不能输出真正的 html。
完整代码例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>豪哥用例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello 503'
}
})
</script>
</body>
</html>
运行结果:
二.基础(内置)指令
1.Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
说简单点:
v-text 指令:
在与插值表达式的比较中:
它与花括号的区别是:使用 v-text 在页面加载时不会显示'message',解决了插值表达式闪烁问题,因为它是属性而不是插值表达式。
应用例子:
<div id="app">
<p v-text="message"></p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
}
});
v-text
通过设置元素的 textContent 属性来工作,因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent
的部分,应该使用 mustache interpolations 代替。
v-html指令
v-htm1 指令用于将 HTML 标签和文本插入到元素中。
如果您尝试使用文本插值(使用大括号{{ }})输出 HTML 标签,结果将只是一个文本字符串。
使用<style scoped>在单文件组件(SFC)中定义的范围样式不会影响 v-htm1 指令中的 HTML。
为了实现 SFC 中 v-htm1 包含的 HTML 的范围样式,我们可以将 CSS 模块与<style module〉结合使用。 v-html
的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html
来编写模板,不如重新想想怎么使用组件来代替。
典例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>503秘密基地</h1>'
}
})
</script>
</body>
</html>
运行结果 :
在HTML模板中,使用v-html指令将"message"属性的值渲染到页面中。v-html指令会将属性值作为HTML解析并插入到指令所在的元素中。
最终的结果是页面中显示了一个h1标题,内容为"503秘密基地"。
注意:无论是v-html还是v-text,如果绑定了data中属性之后,会覆盖掉原本标签上的内容。
v-show指令
官方解释:v-show
基于表达式值的真假性,来改变元素的可见性。我的说法差不多(根据表达式的值来控制元素的显示与隐藏。)
期望的绑定值类型:any
通过设置内联样式的CSS 属性来工作,当元素可见时将使用初始displayv-show值。当条件改变时,也会触发过渡效果。
例如1:
<div v-show="isVisible">This is a visible element</div>
在上面的代码中,v-show
指令被绑定在一个<div>
元素上,它的值为isVisible
,表示这个元素的显示与隐藏将根据isVisible
的值来决定。
- 如果
isVisible
的值为true
,那么该<div>
元素将会显示在页面上。 - 如果
isVisible
的值为false
,那么该<div>
元素将会被隐藏,其占用的空间也会被隐藏。
v-show的特点是在元素的style
属性上使用了display
属性来控制元素的显示与隐藏,不会从DOM中移除元素,因此会占用页面的空间。
v-show的表达式可以是任何返回布尔值的表达式。可以是一个data中定义的属性,也可以是一个计算属性或者一个方法的返回值。
例如2,在Vue实例中定义了一个名为isVisible
的属性:
new Vue({
el: '#app',
data: {
isVisible: true
}
})
那么该元素的显示与隐藏将根据isVisible
属性的值来决定。
注意:v-show
不支持在 <template>
元素上使用,也不能和 v-else
搭配使用。
v-if指令
解释:v-if是Vue.js中的一个条件渲染指令,用于根据表达式的真假来判断是否渲染元素。
特点:
<div v-if="isVisible">This is a visible element</div>
在上面的代码中,v-if
指令被绑定在一个<div>
元素上,它的值为isVisible
,表示这个元素是否渲染将根据isVisible
的值来决定。
- 如果
isVisible
的值为true
,那么该<div>
元素将会被渲染并显示在页面上。 - 如果
isVisible
的值为false
,那么该<div>
元素将不会被渲染,并且在DOM中不存在。
v-if的特点是根据条件动态地将元素渲染到DOM中或从DOM中移除,从而实现元素的显示与隐藏。
v-if的表达式可以是任何返回布尔值的表达式。可以是一个data中定义的属性,也可以是一个计算属性或者一个方法的返回值。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>火影DD</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">林,苏,周,罗,邱,李</p>
<template v-if="ok">
<h1>九江职业技术学院503秘密基地</h1>
<p>学的不仅是技术,更是梦想!</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
</html>
运行结果:
v-show与v-if的不同
v-show 和 v-if 之间的区别在于 v-if 根据条件创建(渲染)元素,但 v-show 元素已经创建,仅 v-show 改变其可见性(display)。
因此,切换对象的可见性时最好使用 v-show,因为浏览器更容易做到,并且可以带来更快的响应和更好的用户体验。
使用 v-if 而不是 v-show 的原因是 v-if 可以与 v-else-if 和 v-else 一起使用。
官方解释:
都讲到v-if,那就将v-else也说了去,if,else,对于学习语言的是多么的熟悉,到哪都密不可分
语法上也都相差不大。
v-else
基本解释:v-else指令是Vue.js模板语法中的一种指令,用于在条件渲染中定义一个“否则”分支。
使用v-if指令时,可以通过v-else指令来定义一个“否则”分支,该分支会在v-if条件为假时被渲染。v-else指令必须紧跟在v-if或v-else-if指令之后,并且不能单独使用。
典例1:
<div v-if="condition">
条件为真时渲染的内容
</div>
<div v-else>
条件为假时渲染的内容
</div>
解释:
如果condition
为真,则第一个div会被渲染;如果condition
为假,则第二个div会被渲染。
v-else指令的存在可以简化条件渲染的逻辑,使代码更加清晰易读。
注意:一个 v-else
元素必须跟在一个 v-if
或者 v-else-if
元素后面,否则它将不会被v-
v-else-if
v-on指令
含义:
v-on指令用于绑定DOM事件到Vue实例的方法上。它可以在模板中监听DOM事件,并执行指定的方法。
使用v-on指令的一般语法是将事件名称作为指令参数,方法名作为指令的值。例如,可以通过v-on:click来监听元素的点击事件,然后在Vue实例中定义一个名为clickHandler的方法来处理点击事件。
v-on指令还可以使用简化语法,将@符号作为指令的前缀。例如,@click相当于v-on:click。
关于调用传参,诸位道友可看:
- 传递参数给Vue方法:可以在v-on指令中使用方法参数来获取事件对象或其他自定义参数,并将其传递给Vue方法。例如,可以通过@click指令的参数来传递事件对象。
<button v-on:click="doSomething($event)">Click me</button>
methods: {
doSomething(event) {
// 使用event获取事件对象
}
}
2.使用修饰符:v-on指令可以使用修饰符来改变事件监听的行为。例如,使用.stop修饰符可以阻止事件冒泡。
<button v-on:click.stop="doSomething">Click me</button>
methods: {
doSomething() {
// 执行某些操作
}
}
典例1:
<!DOCTYPE html>
<html>
<head>
<title>电灯开关</title>
<style>
#app {
border: dashed black 1px;
display: inline-block;
padding-bottom: 10px;
}
#app > button {
display: block;
margin: auto;
}
#lightDiv {
position: relative;
width: 150px;
height: 150px;
}
#lightDiv > img {
position: relative;
width: 100%;
height: 100%;
}
#lightDiv > div {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<h1>503电灯开关</h1>
<p>v-on 指令用在按钮标签上来监听“click”事件。 当“click”事件发生时,“lightOn”数据属性在“true”和“false”之间切换,使灯泡后面的黄色 div 可见/隐藏。</p>
<div id="app">
<div id="lightDiv">
<div v-show="lightOn"></div>
<img src="img_lightBulb.svg">
</div>
<button v-on:click=" lightOn =! lightOn ">开关灯</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
lightOn: false
}
}
})
app.mount('#app')
</script>
</body>
</html>
运行结果:
解释:这是一个电灯开关的页面。页面中有一个电灯图像,当点击"开关灯"按钮时,图像后方的黄色div会显示/隐藏,表示电灯是否亮着。页面使用Vue.js框架实现了点击按钮时切换灯泡状态的功能。
在HTML部分,通过v-show指令来控制灯泡后面的黄色div的显示与隐藏,当lightOn为true时,div显示,当lightOn为false时,div隐藏。
在按钮部分,使用v-on指令监听按钮的click事件,当按钮被点击时,通过表达式“lightOn =! lightOn”来切换lightOn的值,实现灯的开关效果。
v-bind命令
解释:
v-bind指令是Vue.js中用于动态绑定HTML特性的指令,它的主要作用是将Vue实例中的数据绑定到HTML元素的特性上。(Vue 的内联样式是通过使用 v-bind 将样式属性绑定到 Vue 来完成的.)
在Vue.js中,v-bind指令还有一个简写形式,即":属性名"。这被称为v-bind的语法糖。
使用v-bind的语法糖,可以直接在HTML元素中使用冒号加特性名的方式来绑定数据。
官方解释:
简单小例子:
<!-- 使用v-bind的完整写法 -->
<img v-bind:src="imgUrl">
<!-- 使用v-bind的语法糖写法 -->
<img :src="imgUrl">
解释:通过使用v-bind的语法糖写法,将Vue实例中的imgUrl数据绑定到img元素的src特性上。当imgUrl的值发生变化时,img元素的src特性也会相应地更新。
1.绑定属性值:
<!-- 常规写法 -->
<div v-bind:class="{ active: isActive, 'text-bold': isBold }"></div>
<!-- 语法糖写法 -->
<div :class="{ active: isActive, 'text-bold': isBold }"></div>
使用v-bind指令将imageUrl属性绑定到img元素的src属性上,实现动态地修改图片的URL
2.动态绑定class:
<!-- 常规写法 -->
<div v-bind:class="{ active: isActive, 'text-bold': isBold }"></div>
<!-- 语法糖写法 -->
<div :class="{ active: isActive, 'text-bold': isBold }"></div>
使用v-bind指令将一个对象作为参数传递给class属性,根据isActive和isBold的值动态地设置元素的class。
3.动态绑定样式:
<!-- 常规写法 -->
<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
<!-- 语法糖写法 -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
使用v-bind指令将一个对象作为参数传递给style属性,根据textColor和fontSize的值动态地设置元素的。
注意: