四、v-bind绑定属性

前面的这些指令,主要是将值插入到模版内容中

但是除了内容需要动态来决定外,某些属性我们也希望动态来绑定

如动态绑定a元素的href属性动态绑定img元素的src属性

绑定属性我们使用v-bind:

缩写: :

预期:any|Object

参数:attrOrProp

修饰符: .camel - 将kebab-case attribute 名转换为 camelCase

用法:动态地绑定一个或多个attribute或一个组件prop到表达式

绑定基本属性

v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值

HTML
<div id="app">
    <!-- 1 绑定img的src属性 -->
    <img v-bind:src="imgUrl" alt="">
    <!-- <img :src="imgUrl" alt=""> 语法糖写法 -->
    <!-- 2 绑定a的超链接 -->
    <a v-bind:href="href">百度一下</a>
    <!-- <a :href="href">百度一下</a> -->
</div>

JavaScript
<script src="../lib/vue.js"></script>
<script>
    // 创建app
    const app = Vue.createApp({
        data: function () {
            return {
                message: "Hello Vue!",
                imgUrl: "http://p1.music.126.net/SZx_bVkBZ20dKE1YZrH_wQ==/109951167861631226.jpg",
                href: "http://www.baidu.com"
            }
        },
    })
    // 挂载app
    app.mount('#app')
</script>

五、绑定class 和style

绑定class介绍

在开发中,我们的元素class也是动态的,如:

当数据为某个状态时字体为红色

当数据为另一个状态时,字体为黑色

绑定class有两种方式:

对象语法

数组语法

绑定class-对象语法

对象语法: 我们可以传给 :class一个对象,动态切换class

JavaScript
<div id="app">
    <!-- 1 基本绑定class -->
    <h2 class="classes">Hello World</h2>
    <!-- 2 动态class可以写对象语法 -->
    <button :class=" isActive ? 'active':'' " @click="btnC">我是按钮</button>
    <!-- 2 1 对象语法的基本使用 -->
    <button :class="{ active:isActive }" @click="btnC">我是按钮</button>
    <!-- 2 2 对象语法的多个键值对 -->
    <button :class="{ active:isActive , xiong:true , kobe:false }" @click="btnC">我是按钮</button>
    <!-- 2 3 动态绑定class是可以和普通的class同时使用的 -->
    <button class="abc cba" :class="{ active:isActive , xiong:true , kobe:false }" @click="btnC">我是按钮</button>
    <!-- 2 4  -->
    <button class="abc cba" :class="getClasses()" @click="btnC">我是按钮</button>
</div>
<script src="../lib/vue.js"></script>
<script>
    // 创建app
    const app = Vue.createApp({
        data: function () {
            return {
                classes: "abc cba nba",
                isActive: false
            }
        },
        methods: {
            btnC() {
                this.isActive = !this.isActive
            },
            getClasses() {
                return { active: this.isActive, xiong: true, kobe: false }
            }
        }
    })
    // 挂载app
    app.mount('#app')
</script>

绑定class-数组语法

数组语法:可以把数组传给:class 以应用一个class列表

JavaScript
<tempale id="app">
    <!--1 直接传入一个数组-->
    <h2 :class="['abc','cba','nba']">Hello Array</h2>
    <!--2 数组中也可以使用三元运算符 或绑定变量-->
    <h2 :class="['abc',cba,isnba?'nba':'']">Hello Array</h2>
    <!--3 数组中也可以使用对象语法-->
    <h2 :class="['abc',cba,{'nba':isnba}]">Hello Array</h2>
</template>

绑定style属性介绍

我们可以利用v-bind:style来绑定一些CSS内联样式:

因为某些样式我们需要根据数据动态来决定

如某字段的颜色大小等等

Css property名可以用驼峰式或短横线分割(短横线分割要用引号括起来)来命名

绑定class有两种方式:

对象语法

数组语法

对象语法:

JavaScript
<h2 :style="{color:fontColor,'font-size':fontSize+'px'}">Hello World</h2>

数组语法:

style的数组语法可以将多个样式对象应用到同一个元素上

JavaScript
<h2 :style="[styleObj1,styleObj2]">Hello World</h2>

动态绑定属性

在某些情况下,我们 属性的名称 可能也不是固定的

前面我们无论绑定src href class style 属性名称都是固定的

如果属性名称不是固定的我们可以使用 :[属性名]="值"的格式来定义

这种绑定的方式我们称之为动态绑定属性

绑定一个对象

如果我们希望将一个 对象的所有属性 绑定到元素上的所有属性 应该怎么做?

我们可以直接使用v-bind绑定一个对象;

HTML
<!-- v-bind绑定对象: 给组件传递参数-->
<!-- 简写 -->
<h2 :="props">Hello Bind</h2>
<h2 v-bind="props">Hello Bind</h2>

v-on绑定事件

在前端开发,我们需要经常和用户进行各种各样的交互

这个时候我们就必须监听用户发生的事件如点击拖拽键盘事件等等

在Vue中如何监听时间呢? 使用v-on指令

v-on的用法

v-on的使用:

缩写:@

预期:Function|InIne Statement|Object

参数:event

修饰符:

.stop - 调用event-stopPropagation()

.prevent - 调用event-preventDefault()

.capture - 添加事件侦听器时使用capture模式

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调

.{keyAlias} - 仅当事件从特定键触发时才触发回调

.once - 只触发一次回调

.left - 只当点击鼠标左键时触发

.right - 只当点击鼠标右键时触发

.middle - 只当点击鼠标中间时触发

.passive - {passive:true}模式添加侦听器

v-on的基本使用

我们可以使用v-on来监听一下点击事件:

JavaScript

v-on:click可以写成@click 是它的语法糖写法:

JavaScript

当然我们也可以绑定其他事件:

JavaScript

如果我们希望一个元素绑定多个事件这个时候可以传入一个对象:

JavaScript
<!-- 5 元素绑定多个事件 (掌握)-->
<div class="box" @mousemove="divMouseMove" @click="divClick"></div>
<!-- 下面这种写法 不太常见 了解就行 -->
<div class="box" @="{click:divClick,mousemove:divMouseMove}"></div>

v-on参数传递

当通过methods中定义方法,以供@click调用时需要注意参数问题:

一:如果该方法不需要额外参数,那么方法后的()可以不添加

但是:如果方法本身没有一个参数那么会默认将原生事件event参数传递进去

二:如果需要同时传入某个参数同时需要event时可以通过$event传入事件JavaScript

<div id="app">
        <!-- 1 默认传递 event对象 -->
        <button @click="btnClick">按钮1</button>
        <!-- 2 只有自己的参数 明确的参数-->
        <button @click="btn2Click('xiong',age)">按钮2</button>
        <!-- 3 自己的参数 和 event对象 -->
        <!-- 在模版中 想要明确的获取event对象  固定语法:$event -->
        <button @click="btn3Click('xiong',age,$event)">按钮3</button>
        <h2>{{message}}</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue!",
                    age: 18  // 如果没写这个不会报错 会直接undefined
                }
            },
            methods: {
                // 1 默认参数:event对象
                // 总结 如果在绑定事件的时候 没有传递任何参数,
                // 那么evnet对象会被默认传递进来
                btnClick(event) {
                    console.log('btnClick', event);
                },
                btn2Click(name, age) {
                    console.log('btn2Click', name, age);
                },
                btn3Click(name, age, event) {
                    console.log('btn3Click', name, age, event);
                }
            }
        })
        // 挂载app
        app.mount('#app')
    </script>

v-on的修饰符

v-on支持修饰符,修饰符相当于对事件进行了一些特殊的处理:

.stop - 调用event-stopPropagation()

.prevent - 调用event-preventDefault()

.capture - 添加事件侦听器时使用capture模式

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调

.{keyAlias} - 仅当事件从特定键触发时才触发回调

.once - 只触发一次回调

.left - 只当点击鼠标左键时触发

.right - 只当点击鼠标右键时触发

.middle - 只当点击鼠标中间时触发

.passive - {passive:true}模式添加侦听器

HTML
<div id="app">
    <div class="box" @click="divClick">
        <button @click.stop="btnClick">按钮</button>
        <!--阻止冒泡-->
    </div>
</div>

六、Vue的条件渲染

条件渲染

在某些情况下,我们需要根据当前的条件决定某些元素或组件是否需要渲染,这个时候我们就需要进行条件判断了

Vue提供了下面的指令来进行条件判断:

V-if

V-else

V-else-if

V-show

V-if v-else v-else-if

它们用于根据条件来渲染某一块内容

这些内容只有再条件为true时才会被渲染出来这三个指令与Js的条件语句if else else if类似

JavaScript
<div id="app">
    <h1 v-if="score > 90">优秀</h1>
    <h2 v-else-if="score > 80">良好</h2>
    <h3 v-else-if="score >= 60 ">及格</h3>
    <h4 v-else>不及格</h4>
</div>

v-if的渲染原理:

v-if是惰性的

条件为false时判断的内容完全不会被渲染或者会被销毁掉

条件为true时才会真正渲染条件块中的内容

template元素

因为v-if是一个指令所以必须将其添加到一个元素上

如果我们希望切换的是多个元素呢?

此时我们渲染div但是我们并不希望 div这种元素被渲染

这个时候我们可以选择使用template

template元素可以当做不可见的包裹元素,且在v-if上使用,但最终template不会被渲染出来

有点类似于小程序中的block

JavaScript
<div id="app">
    <!-- v-if="条件" 当条件成立执行什么-->
    <template v-if="Object.keys(info).length">
        <h2>个人信息</h2>
        <ul>
            <li>姓名{{info.name}}</li>
            <li>年龄{{info.age}}</li>
        </ul>
    </template>
    <!-- v-else -->
    <template v-else>
        <h2>没有输入个人信息</h2>
        <p>请输入个人信息后 再进行展示</p>
    </template>
</div>

v-show

v-show和v-if的用法看起来是一致的也是根据一个条件决定是否显示元素或组件;

v-show和v-if的区别

用法上的区别:

v-show是不支持template

v-show不可以和v-else一起使用

其次本质的区别:

v-show元素无论是否需要显示到浏览器上,它的DOM实际都是存在的,只是通过css的display属性来进行切换

v-if当条件为false时其对应的元素压根不会被渲染到DOM中

开发中如何选择?

如果我们的元素需要显示和隐藏之间频繁切换那么使用v-show

如果不会频繁的发生切换那么使用v-if

Vue | Vue.js 基础模版语法（二）

四、v-bind绑定属性

绑定基本属性

五、绑定class 和style

绑定class介绍

绑定class-对象语法

绑定class-数组语法

绑定style属性介绍

动态绑定属性

绑定一个对象

v-on绑定事件

v-on的用法

v-on的基本使用

v-on参数传递

v-on的修饰符

六、Vue的条件渲染

条件渲染

template元素

v-show

v-show和v-if的区别

热门文章

最新文章

相关课程

相关电子书

相关实验场景

Vue | Vue.js 基础 模版语法（二）

四、v-bind绑定属性

绑定基本属性

五、绑定class 和style

绑定class介绍

绑定class-对象语法

绑定class-数组语法

绑定style属性介绍

动态绑定属性

绑定一个对象

v-on绑定事件

v-on的用法

v-on的基本使用

v-on参数传递

v-on的修饰符

六、Vue的条件渲染

条件渲染

template元素

v-show

v-show和v-if的区别

热门文章

最新文章

相关课程

相关电子书

相关实验场景

Vue | Vue.js 基础模版语法（二）