06模板语法

Vue指令

基本使用

可以在App.vue中写入以下代码

组合式 API：setup()

<template>
  <div>
        {{a}}
    </div>
</template>

<script>
export default {
  setup() {
    const a = "小满开了个免费的知识星球，免费的"
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {a}
  }
}
</script>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

option API的书写风格

<script>
export default{
    data(){
        return{
            age:18
        }
    },
    methods: {
        xiaoyu(){

        }
    },
}
</script>

setup语法糖模式

<template>
  {{ a }}
  <div>

    <!-- 支持数字运算 -->
    {{ zs }}，{{ num + 5 }}
  </div>
  <div>
    <!-- 支持三元表达式 -->
    {{ num ? "true" : "false" }}
  </div>
  <div>
    <!-- API运算 -->
    <div>
      {{ _API.map(v => { return v * 2 }) }}
    </div>
    <div>
      {{ _API.map(v => v * 2) }}
    </div>


    <li v-for="item in _API">
      {{ item }}
    </li>
  </div>
</template>

<script setup lang="ts">
//也支持运算
const num: number = 1
//API运算
const _API: number[] = [1, 2, 3, 4, 5]
const zs: string = "小余祝大家2023年会越来越好"

//所有东西都在这里面定义
const a = "小满开了个免费的知识星球，免费的"
</script>

各种Vue指令用法

指令

• v- 开头都是vue 的指令
• v-text 用来显示文本
• v-html 用来展示富文本
• v-if 用来控制元素的显示隐藏（切换真假DOM）
• v-else-if 表示 v-if 的“else if 块”。可以链式调用
• v-else v-if条件收尾语句
• v-show 用来控制元素的显示隐藏（display none block Css切换）
• v-on 简写@ 用来给元素添加事件
• v-bind 简写: 用来绑定元素的属性Attr
• v-model 双向绑定
• v-for 用来遍历元素
• v-on修饰符 冒泡案例
• v-once 性能优化只渲染一次
• v-memo 性能优化会有缓存具体请看我的掘金

运算也是支持的

<template>
  <div>{{ message  + 1 }}</div>
</template>


<script setup lang="ts">
const message:number = 1
</script>

API 也是支持的

<template>
  <div>{{ message.split('，') }}</div>
</template>


<script setup lang="ts">
const message: string = "我，是，小，满"
</script>

<style></style>

v-text

<template>
  <div v-text="zs">

  </div>
</template>

<script setup lang="ts">
const zs: string = "haima祝大家2023年会越来越好"
</script>

v-html

<template>
  <div v-html="zs">

  </div>
</template>

<script setup lang="ts">
    //使用v-html，外面一层要是section
const zs: string = '<section style="color:red">小红帽班花姐姐</section>'
</script>

v-if

<template>
  <div v-if="num">
  <!-- 显示 -->
    <h1>小余在不在，不在我进来了</h1>
  </div>
</template>

<script setup lang="ts">
//也支持运算
const num: number = 1
</script>
------------------------------------------
<template>
  <div v-if="num">
  <!-- 隐藏，是会将div块内的东西给注释掉，通过F12可以看到被注释节点 -->
    <h1>小余在不在，不在我进来了</h1>
  </div>
</template>

<script setup lang="ts">
//也支持运算
const num: number = 0
</script>

v-if配合v-else

当值为true的时候，if显示，else隐藏。反之亦然

<template>
  <div v-if="bol">
    <!-- 显示 -->
    <h1>小余在不在，不在我进来了</h1>
  </div>
  <div v-else="bol">
    <!-- 显示 -->
    <h1>小余在不在，不在我进来了，看来不在，进去看看有没有洛洛的私房照</h1>
  </div>
</template>

<script setup lang="ts">
const bol: boolean = true
</script>

v-if配合v-else-if和v-else使用

<template>
  <div v-if="num == '小余在家' ">
    <!-- 不显示 -->
    <h1>小余在不在，不在我进来了，原来你在啊，为什么不说话</h1>
  </div>
  <div v-else-if="num == '小余不在家' ">
    <!-- 不显示 -->
    <h1>小余在不在，不在我进来了，看来不在，进去看看有没有洛洛的私房照</h1>
  </div>
  <div v-else>
    <!-- 显示 -->
    <h1>小余去找小满串门了</h1>
  </div>
</template>

<script setup lang="ts">
//也支持运算
const num: string = "小余去找小满串门了"
</script>

v_show

跟 v-if 的功能有那么一点像，但是比 v-if 的性能更高一点，因为v-show是将CSS样式的display调整成none，只切换了一下CSS

• 而v-if会把整个节点变成一个注释节点，怎么想工作量都会更大一点
• v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用

<template>
  <div v-if="bol">
    <!-- 显示 -->
    <h1>小余在不在，不在我进来了</h1>
  </div>
</template>

<script setup lang="ts">
//也支持运算
const bol: boolean = true
</script>
-----------------------------------------------------------------
<template>
  <div v-if="bol">
    <!-- 不显示 -->
    <h1>小余在不在，不在我进来了</h1>
  </div>
</template>

<script setup lang="ts">
//也支持运算
const bol: boolean = false
</script>
----------------------------------------------------------------------
<template>
<div>
  <!-- v-show的展示部分 -->
  <h1 v-show="switch_luo">我是洛洛</h1>
  <!-- v-show隐藏部分 -->
  <h2 v-show="switch_yu">我是小余</h2>
</div>
</template>

<script setup lang='ts'>
const switch_luo = true
const switch_yu = false

</script>

<style scoped lang='less'>

</style>

v_on

v-on: 可以简写为 @ ，没错，剩一个冒号了

<template>
  <div>
    <button v-on:click="love()">请尽情的吩咐小满吧</button>
  </div>
</template>

<script setup lang="ts">
const love = ()=>{
  console.log("吩咐+1");
}
</script>
------------------------------------------------------------------------
<!-- 动态事件切换并且简写-->
<template>
  <div>
    <button @[xiaoman]="love()">请尽情的吩咐小满吧</button>
  </div>
</template>

<script setup lang="ts">
const xiaoman = "click"
const love = ()=>{
  console.log("吩咐+1");
}
</script>
------------------------------------------------------------------------
<!--修饰符，触发冒泡 点击parent，父级也跟着触发，通常情况下我们会设置禁止这种行为-->
<template>
  <div @click="parent">
    <button @[xiaoman]="love()">请尽情的吩咐小满吧</button>
  </div>
</template>

<script setup lang="ts">
const xiaoman = "click"
const parent = ()=>{
  console.log("我是父级");

}
const love = ()=>{
  console.log("吩咐+1");

}
</script>
-------------------------------------------------------------------------------
<!-- 禁止父级冒泡，只需要加上一个stop即可-->
<div @click="parent">
<button @[xiaoman].stop="love()">请尽情的吩咐小满吧</button>
</div>

v-bind

<template>
  <div>
      <!-- 简写:    没错，简写就一个冒号，这里是绑定了对象里的值，能够成功使用-->
    <h1 :style="style1">小满现在什么色</h1>
  </div>
</template>

<script setup lang="ts">
const style1 = {
  color:"green",
  border:"2px soild #red"
}
</script>
-----------------------------------------------------------
<template>
  <div>
      <!-- 简写:    没错，简写就一个冒号，当然你也可以绑定css，或者css的各种变种 -->
    <h1 :class="['a','b']">小满现在什么色</h1>
  </div>
</template>

<script setup lang="ts">

</script>

<style>
.a{
  color: aqua;
}
.b{
  border: 1px solid #ccc;
}
</style>
-----------------------------------------------------------
<!-- 进阶，加上条件判断-->
<template>
  <div class="c" :class="[Cls ? 'a' : 'b' ]">
    小满现在什么色，取决在你手里
  </div>
</template>

<script setup lang="ts">
const Cls :boolean= true//一个条件判断，没错。除了支持动态的之外，他还能同时支持一个静态class，一动一静，别整多了，整多就报错了
</script>

<style >
.a{
  color: green;
}
.b{
  color:yellow;
}
.c{
  font-size: 50px;
}
</style>

v-model

ref 和 reactive 后面我们会详细讲解的暂时可以先理解只要包裹就是响应式的

<template>
  <div>
    <div>{{ a }}</div>
    <input type="text" v-model="a">
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue"
const a = ref('小满')
</script>

v-for

<template>
  <div>
      <!--基础用法 -->
    <div v-for="item in arr">{{ item }}</div>
  </div>
</template>

<script setup lang="ts">
const arr = ['小满','学姐','小余','班花姐姐','菜菜哥','草莓']
</script>
----------------------------------------------------------------------
<!--第二个参数则是索引index，这是一个唯一值，从0开始计数-->
<template>
  <div>
    <div v-for="(item,index) in arr">{{index}} - {{ item }}</div>
  </div>
</template>

<script setup lang="ts">
const arr:string[] = ['小满','学姐','小余','班花姐姐','菜菜哥','草莓']
</script>

提升性能

v-once

只渲染元素和组件一次，并跳过之后的更新。其实就是只执行一次，后面都不执行了，所以性能会有所提升

• 这里我们将刚刚小满写过的案例进行一个组合
• 我在h1的位置加上了v-once，证明了他只执行了一次，那就是在渲染出来的时候，所以当我们点击按钮的时候，数字没有跳到，因为已经跳过更新了，将v-once删除掉，我们界面上的数字就能继续跳动了

<template>
  <div>
    <button @click="click1" v-text="strawberry"></button>
    <h1 v-once>成功偷走 {{ state.count }} 枚，还剩{{200000-state.count}}枚金币，请谨慎偷取，不然被草莓发现你偷拿她的金币的时候，只有决一死战了</h1>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
const strawberry:string = "请从草莓身上偷走金币"
const state = reactive({count:0})
const click1 = function(){
  state.count++
}
</script>

v-memo

用法(摘录自小满掘金)

在组件和元素都可以使用，主要是可以缓存 期望的类型是个数组 any[]，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么他的更新将会被跳过，甚至虚拟 DOM 的 vnode 创建也将被跳过，提升了性能。

tips：如果 v-memo="[]" 传入的是一个空数组，那么他的效果和v-once 一样

<div v-memo="[val]"></div>

v-memo 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况)

配合v-for

配合 v-for 属于最常见的情况，但是只有助于大数据量的情况例如（1000条以上）。

tips: 当搭配 v-for 使用 v-memo，确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。

测试代码 未加 v-memo 一万条数据

当组件的 selected 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。v-memo 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。

总结

如果你的项目对性能要求非常严格可以使用，但也只是小部分提升性能，如果你的项目平时没有那么大的数据量，感觉没什么有用。

<!--这是一个数组，如果数组里面什么都不填入的话，就跟v-once是一样的效果-->
<template>
  <div>
    <div @click="select(item.id)"   :key="item.id" v-for="(item) in arr">
      {{ item.id }} - selected： {{ item.id == active }}
    </div>
  </div>
</template>

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

const arr = reactive<any[]>([])
for (let i = 0; i < 10000; i++) {
  arr.push({
    id: i + 1,
    name: "test"
  })
}

const active = ref(1)

const select = async (index: number) => {
  active.value = index;
  console.time()
  await Promise.resolve()
  console.timeEnd()
}

</script>

<style scoped lang='less'>

</style>