Vue3学习之路--Vue基础 模版语法(二)

Mustache语法

模版语法

React的开发模式:

React使用jsx 所以对应的代码都是编写类似于js的一种语法;

之后通过Babel将jsx编译成React.creatElement函数调用

Vue也支持jsx的开发模式

大多情况下,使用基于HTML的模版语法;

在模版中 允许开发者以声明式的方式将DOM和底层组件实例的数据 绑定在一起

在底层的实现中,Vue将模版编译成虚拟DOM渲染函数,

Mustache双大括号语法(掌握)

如果我们希望把数据显示到模版中,使用最多的语法是"Mustache语法(双大括号)的文本插值"

data返回的对象 是有添加到Vue的响应式系统中

当data中的数据发生变化时 对应的内容也会发生更新

当然 Mustache中不仅仅可以是data中的属性 也可以是一个 JavaScript的表达式

<div id="app">
    <!-- 1 基本使用 -->
    <h2>{{message}}</h2>
    <h2>当前计数:{{counter}}</h2>

    <!-- 2 表达式 -->
    <h2>计数双倍:{{ counter * 2 }}</h2>
    <h2>展示信息:{{ infos.split(" ") }}</h2>

    <!-- 3 三元运算符 -->
    <h2>{{ age>=18? "成年人":"未成年人" }}</h2>

    <!-- 4 调用methods中的函数 -->
    <h2>{{ formateDate(time) }}</h2>

    <!-- 5 注意:这里不能定义语句! if语句也不支持 -->
</div>
<script src="../lib/vue.js"></script>
<script>
    // 创建app
    const app = Vue.createApp({
        data: function () {
            return {
                message: "Hello Vue!",
                counter: 100,
                infos: "my name is xiong",
                age: 22,
                time: 123
            }
        },
        methods: {
            formateDate(data) {
                return "2020-10-10 " + data
            }
        }
    })
    // 挂载app
    app.mount('#app')

常见的基本指令

v-once指令(了解)

v-once用于指定元素或组件只能渲染一次

当数据发生变化时 元素或组件以及其所有子元素将视为静态内容 并且跳过

该指令可以用于性能优化!

<div id="app">
        <!-- 指令:v-once =>只渲染一次 -->
        <h2 v-once>{{ message }}
            <span>数字:{{counter}}</span>
        </h2>
        <h1>{{ message }}</h1>
        <button @click="changeMessage">改变message</button>
    </div>

<script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue!",
                    counter: 100
                }
            },
            methods: {
                changeMessage() {
                    this.message = "你好,Vue!"
                    this.counter += 100
                    console.log(this.message, this.counter)
                }
            }
        })
        // 挂载app
        app.mount('#app')

v-text指令(了解)

用于更新元素textContent:

 <h2 v-text="message">aaaa</h2> //此时拿到message 会把'aaaa'覆盖掉

V-html指令(了解)

默认情况下,展示的内容本身是html的,那么vue不会对他进行特殊的解析

如果我们希望这个内容被Vue解析出来,可以使用v-html来展示

<div id="app">
        <h2>{{content}}</h2>
        <h2 v-html="content"></h2>

    </div>

<script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    content: '<span style="color:red;font-size:30px;">哈哈哈哈</span>'
                }
            },
        })
        // 挂载app
        app.mount('#app')
    </script>

V-pre指令(了解)

v-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签:

跳过不需要编译的节点,加快编 译的速度

<div id="app">
        <h2>{{message}}</h2>
        <p>当前计数{{counter}}</p>
        <!-- 当加了v-pre之后  将不会编译 -->
        <p v-pre>{{}}</p>
    </div>

<script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue!",
                    counter: 0
                }
            },
        })
        // 挂载app
        app.mount('#app')

    </script>

v-cloak(了解) cloak=>斗篷的意思

这个指令保持在元素上直到关联组件实例结束编译

它必须和css一起使用,这个指令可以隐藏未编译的Mustache标签直到组件实例准备完毕

<style>
        [v-cloak] {
            display: none;
        }
    </style>

<div id="app">
        <h2 v-cloak>{{message}}</h2>
    </div>

<script src="../lib/vue.js"></script>
<script>
    setTimeout(() => {
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue!"
                }
            },
        })
        // 挂载app
        app.mount('#app')
    }, 3000);
</script>

v-memo(新)

指定数据发生改变,才改变其他数据,其他数据发生改变,不会改变

<div id="app">
        <div v-memo="[name]">
            <h2>姓名:{{name}}</h2>
            <h2>年龄:{{age}}</h2>
            <h2>身高:{{height}}</h2>
            <!-- 需求 只有name发生改变 其他东西才改变  -->
        </div>
        <button @click="updataInfo">改变信息</button>
    </div>

<script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    name: "xiong",
                    age: 18,
                    height: 1.88
                }
            },
            methods: {
                updataInfo() {
                    this.name = "kobe"
                    // this.age = 20
                }
            }
        })
        // 挂载app
        app.mount('#app')

v-bind绑定属性(掌握)

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

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

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

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

缩写: :

预期:any|Object

参数:attrOrProp

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

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

绑定基本属性

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

<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>

<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

<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列表

<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有两种方式:

对象语法

数组语法

对象语法:(掌握)

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

数组语法:

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

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

动态绑定属性(了解,少见)

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

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

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

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

绑定一个对象(掌握)

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

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

<!-- 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来监听一下点击事件:

 <!-- 1 基本的写法 -->
<div class="box" v-on:click="divClick"></div>

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

<!-- 2 语法糖写法 (重点掌握)-->
<div class="box" @click="divClick"></div>

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

<!-- 4 绑定其他事件 (掌握)-->
<div class="box" @mousemove="divMouseMove"></div>

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

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

v-on参数传递

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

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

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

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

<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}模式添加侦听器

<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类似

<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

<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