前言

Vue.js 是一个用于构建用户界面的渐进式框架，它设计得非常灵活，可以轻松地被集成到现有的项目中，或者作为构建大型单页应用的基础。在其中Vue.js 的组件化是其核心概念之一，它允许开发者将界面拆分成独立、可复用的组件，使得开发大型应用更加模块化和高效。

在App.vue中可以引入多个组件将界面拆分成独立、可复用的组件，使得开发大型应用更加模块化和高效

<template>
    <Hello></Hello>
    <condition></condition>
    <list></list>
    <attribute></attribute>
</template>

<script setup>
import Hello from './components/Hello.vue';
import condition from './components/condition.vue';
import list from './components/list.vue';
import attribute from './components/attribute.vue';



</script>

<style lang="scss" scoped>

</style>

正文

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

1. v-test

双大括号会将数据解释为纯文本，而v-test的作用也是如此

<template>
    <div>
        <div>{{ msg }}</div>
        <div v-text="msg2"></div>
    </div>
</template>

<script setup>
const msg = 'Hello World'
const msg2 = 'Hello Vue'
</script>

<style lang="scss" scoped>

</style>

2. v-html

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令

<template>
    <div>
        <div>{{ msg }}</div>
        <div v-text="msg2"></div>
        <div v-text="msg3"></div>
        <div v-text="msg3"></div>
    </div>
</template>

<script setup>
const msg = 'Hello World'
const msg2 = 'Hello Vue'
const msg3 = '<p>床前明月光</p><p>疑是地上霜</p>' //富文本
</script>

<style lang="scss" scoped>

</style>

将v-text更改为v-html

        <div v-html="msg3"></div>

3. v-if

v-if是一个条件指令，用于根据条件渲染元素。如果条件为真（truthy），Vue 将渲染元素；如果条件为假（falsy），元素将不会被渲染。

<template>
    <h2 @click="happy">{{ count }}</h2>
    <h3 v-if= "count <30">我很开心</h3>
    <h3 v-else-if="count<40">我不开心</h3>
    <h3 v-else>我很痛苦</h3>
</template>

<script setup>
import { ref } from 'vue'
let count = ref(0)
const happy = () => {
    count.value++
}
</script>

<style lang="sss" scoped>

</style>

在这段代码中，当响应值count的大小发生改变时，通过if和else if语句可以实现输出不同的内容

4. v-show

v-show是一个指令，用于根据条件切换元素的CSS display 属性。与v-if不同，v-show不管条件真假，元素始终会被渲染到DOM中，但它的显示与否会根据条件改变。如果条件为真（truthy），元素将显示（display不为none）；如果条件为假（falsy），元素将被隐藏（display设为none）。

    <h4 v-show="count <30">我很开心</h4><!--超过这个范围也会加载html，但不会显示 -->

v-show的使用非常灵活，适用于简单的显示/隐藏逻辑。然而，如果条件变化非常频繁，使用v-show可能会导致性能问题，因为每次条件变化时，Vue.js都会更新元素的display属性。在这种情况下，使用v-if可能更合适，因为v-if会确保在条件不满足时不渲染元素，从而减少DOM操作。

5. v-for

v-for是一个指令，用于基于源数据多次渲染一个元素或组件。它允许你重复一个元素或模板，为每个元素绑定一个来自源数据的值。

当使用v-for时，每个元素都应该有一个唯一的key属性，这有助于Vue.js跟踪每个节点的身份，提高渲染效率。

<template>
    <ul>
        <li v-for="(item,index) in list" :key="item.id">
            {{ index+1}}-{{ item.name }}
        </li>
    </ul>
</template>

<script setup>
const list =[
    {id:1,name:"盖亚"},
    {id:2,name:"迪迦"},
    {id:3,name:"赛文"},
    {id:4,name:"普罗米修斯"},
    {id:5,name:"雷神"}
]
</script>

<style lang="css" scoped>
</style>

这里，除了数组的元素，v-for还提供了一个索引值。

6. v-on

<button v-on:click="handle">确定</button>

在Vue中，v-on指令可以简写为@符号，因此上述代码的简写形式为：

<button @click="handle">确定</button>

v-on用于监听DOM事件的指令。它允许你绑定一个方法到DOM事件上，当该事件触发时，相应的方法会被执行。例如，v-on:click表示当按钮被点击时调用handle方法。

7. v-bind

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令

<template>
    <img v-bind:src="pic" alt="">
    <a v-bind:href="url">去百度</a>
</template>

<script setup>
import { ref } from 'vue'
const pic = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.caC1jQN-9BLsMuBUuLYuFAHaLI?w=202&h=304&c=7&r=0&o=5&dpr=1.5&pid=1.7'
const url = 'https://www.baidu.com'

</script>

<style lang="css" scoped>
</style>

这里 href 就是一个参数，它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。

    <img :src="pic" alt="">
    <a :href="url">去百度</a>

总结

本文简单介绍了一下Vue中模板语法的指令v-test、v-html、v-if 、v-show、v-for、v-on、v-bind

新手入门Vue第一课“模板语法”

前言

正文