vue常见指令及其用法

v-show\v-if\v-else-if\v-else

<template>
    <div>在 Vue 中提供两种指令：一种是内置指令，另一种是自定义指令。所有的指令都是以 v- 开头的。</div>
    <div>v-show 指令是用于显示或隐藏元素，它是以 style 样式的方式来实现的。</div>
    <div>v-if 指令也是用于根据条件表达式来带有条件的渲染。如果条件为假，那么页面中将不会渲染当前的元素。</div>
    <div>如果所需要的元素要做频繁的切换时，最好使用 v-show，如果是根据权限来显示或隐藏某些功能，则使用 v-if 比较好。</div>
    <div>v-else指令，它是在 v-if 条件不满足时才起作用，它个指定不能单独使用，必须配合 v-if 一起使用。</div>
    <div v-show="flag">显示</div>

    <div v-if="flag">v-if 指令</div>
    <div v-else>当条件为假时可以显示</div>

    <ul>
        <li v-if="score >= 90">成绩为优</li>
        <li v-else-if="score >= 70">成绩为良</li>
        <li v-else-if="score >= 60">成绩一般</li>
        <li v-else>成绩较差</li>
    </ul>
</template>

<script setup lang="ts">
    const flag: boolean = false

    const score: number = 50
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
div {
    margin: 10px;
}
</style>

v-for

<template>
    <div>v-for 指令的使用，用于遍历数组、对象、数字的值，使用的语法是 别名 in 数组|对象|数字</div>
    <div>循环数字</div>
    <ul>
        <li v-for="n in 5">{{ n }}</li>
    </ul>
    <div>循环数组</div>
    <ul>
        <li v-for="item in arr">{{ item }}</li>
    </ul>
    <ul>
        <li v-for="item in arr2">{{ item }}</li>
    </ul>
    <div>循环对象</div>
    <ul>
        <li v-for="item in person">{{ item }}</li>
    </ul>
    <p>如果遍历的是单个对象，则是把对象的属性逐个取出</p>
    <div>在使用 v-for 指令时，除了使用 循环变量 in 数字|数组|对象 这种方式外，还可以获取的索引值。</div>

    <ul>
        <li v-for="(v, i) in arr">{{ i }} --> {{ v }}</li>
    </ul>

    <ul>
        <li v-for="(p, key) in person">{{ key }} -- {{ p }}</li>
    </ul>
    <p>v-for如果遍历的是数组，则可以获取到数组的元素和下标（索引），使用方式为： (元素, 索引) in 数组</p>
    <p>v-for如果遍历的是对象，则可以获取到对象的属性名和属性值，使用方式为：(属性, 值) in 对象</p>

    <p></p>
    <p>遍历对象数组</p>
    <ul>
        <li v-for="person in persons">{{ person.id }} -- {{ person.name }} -- {{ person.age }}</li>
    </ul>
    <p>注意：在使用 v-for 指令时， 最好给定一个 key 属性，用于优化 Vue 对 DOM 的渲染。</p>
    <ul>
        <li v-for="person in persons" :key="person.id">{{ person.id }} --> {{ person.name }} -- {{ person.age }}</li>
    </ul>
    <p>指定 key 属性的值只能是数字或字符串，不能是对象，并且值要唯一</p>
</template>

<script setup lang="ts">
    // 定义数组
    const arr: number[] = [1, 2, 3, 4, 5]
    const arr2: Array<number> = [4, 5, 6, 7, 8]

    // 定义对象数据结构
    type Person = {
        id: number
        name: string
        age: number
    }
    // 声明对象变量
    const person: Person = {
        id: 1,
        name: '张三',
        age: 18,
    }

    // 对象数组
    const persons: Person[] = [
        {id: 1, name: '刘备', age: 20},
        {id: 2, name: '关羽', age: 19},
        {id: 3, name: '张飞', age:18},
    ]
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
div {
    margin: 10px;
}
</style>

v-model

<template>
    <div>v-model指令的使用</div>
    <input type="text" v-model="username">
    <p>{{ username }}</p>
    <button @click="show">点击</button>
    <p>v-model 是一个双向绑定指令</p>
    <p>v-model指令一般用于表单元素</p>
</template>

<script setup lang="ts">
    import { ref } from 'vue'

    const username = ref<string>('hello')

    const show = () => {
        console.log(username.value);
        username.value = '1111'
    }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
div {
    margin: 10px;
}
</style>

v-on

<template>
    <div>v-on 指令用于添加事件</div>
    <p v-show="flag">显示或隐藏</p>
    <button v-on:click="flag = !flag">点击切换</button><br>
    <button v-on:click="switchFlag">点击切换</button><br>
    <button @click="switchFlag">点击切换</button><br>

    <div>要想数据通过正常的切换，我们需要把 flag 变量的值定义为响应式对象，通过 vue 提供的 ref 可以实现，而使用的时候要注意<br>
    如果是在 template 模板中使用，则无须写 .value 属性，直接写变量名即可。<br>
        如果是在 script 脚本中使用，则需要写 .value 属性。
    </div>
    <div>对于 v-on 指令而言，由于操作非常频繁，因此在 vue 中提供了简写方式，通过 @符号来替换 v-on:</div>
    <div>v-on 指令支持动态事件，需要使用 [事件名] 的方式来使用</div>
    <button @[event]="switchFlag()">动态事件</button>

    <div>v-on 指令还可以传递参数</div>
    <button @click="show('hello')">带参的事件</button>
    <p>在事件中指定的函数名称后面可以带()括号，也可以不带() 括号，如果函数有参数，则必须带() 括号</p>

    <div>对于事件而言，它有一个事件对象，如何获取这个事件对象呢？</div>
    <button @click="getEvent">获取事件对象</button>
    <div>如果是一个带参的事件，如何获取事件对象</div>
    <button @click="hasParamAndEvent('重庆', $event)">带参数并且有事件</button>
    <div>如果事件中有参数，须要使用 $event 来获取事件对象，它是一个固定写法， 出现的位置可以任意。</div>

    <div>事件处理还有一些修饰符，比如阻止默认形为、阻止冒泡等。</div>
    <a @click.prevent href="https://www.baidu.com">百度</a>
    <div>可以在事件名称后通过 .prevent 来阻止默认形为</div>
</template>

<script setup lang="ts">
    import {ref} from "vue";


    let flag = ref<boolean>(true)

    // 定义事件的具体名称
    const event: string = 'click'

    // 定义方法
    const switchFlag = () => {
        flag.value = !flag.value
    }

    // 定义带参数的事件
    const show = (s: string) => {
        console.log(s)
    }

    // 定义获取事件对象的方法
    const getEvent = (event: PointerEvent) => {
        console.log(event, event.currentTarget)
    }

    // 定义有参带事件对象的方法
    const hasParamAndEvent = (p: string, e: PointerEvent) => {
        console.log(p, e.currentTarget)
    }

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
div {
    margin: 10px;
}
</style>

v-bind

<template>
    <div>v-bind指令的使用</div>
    <div>这个指令是用于绑定一个或多个属性</div>
    <div>使用 v-bind 来给 img 标签绑定 src 属性</div>
    <img v-bind:src="imgPath">
    <div>还可以指定动态属性，也是需要使用中括号 [] 来引用名称</div>
    <div v-bind:[attr]="1">给div绑定了一个id属性</div>
    <p>如果值是数字，则可以不用在 script 标签中定义，如果值不是数字，则需要定义</p>
    <div v-bind:name="'hello'">值是一个字符串</div>
    <p>如果值是字符串，那么我们可以在 script 中以它为名称来定义变量，也可以使用引号把这个字符串包起来。</p>

    <div>由于v-bind指令使用也非常的频繁，因此在 vue 中也提供了简写方式，通过 : 来替换 v-bind:</div>

    <img :src="imgPath">
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    //const hello: string = 'hello'

    // 定义动态属性
    const attr: string = 'name'

    // 定义 imgPath 属性的值
    const imgPath = 'src/assets/logo.png'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
div {
    margin: 10px;
}
</style>

v-cloak

<template>
    <div>v-cloak指令的使用</div>
    <div>这个指令用于防抖</div>
    <div v-cloak>{{ message }}</div>
    <p>使用这个指定要配合CSS样式</p>
</template>

<script setup lang="ts">
    const message: string = 'hello'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
[v-cloak] {
    display: none;
}
div {
    margin: 10px;
}
</style>