vue3常用指令 - 技术栈

一，v-text和v-html

都是z在

javascript 复制代码

 <h1>v-text 和 v-html</h1>
      <p v-text="msg"></p>
      <p v-html="msg"></p>
      <p v-html="'msg'"></p>


const msg = "<b>你好世界<b/>";

html中渲染内容的，这两个指令后面接的是变量名

v-text:渲染的内容如果包含html不会被解析出来，类似innerText

v-html:渲染的内容如果包含html会被解析出来，类似innerHTml

二，v-show 和 v-if

都可以控制元素的显隐后面的值是结果为布尔值的表达式

v-show:利用display属性来控制显隐，浏览器dom树中还存在，使用场景：适合频繁操作的场景，以及安全要求不高的场景

v-if：利用元素的添加和删除来控制显隐，dom树中不存在,更安全，性能消耗更大，使用场景：适合安全要求较高的场景

javascript 复制代码

<p v-show="flag">v-show按钮</p>
      <p v-if="flag">v-if按钮</p>


const flag = true;

三，v-if 和 v-else-if 和 v-else

用来在模板中对数据进行条件渲染，类似于js中的if/else

后面的值是一个表达式，而且是一个结果为布尔值的表达式

javascript 复制代码

小明同学打怪兽打了<span v-html="score"></span>只
      <p v-if="score >= 90">拯救银河系</p>
      <p v-else-if="score >= 70">拯救地球</p>
      <p v-else-if="score >= 60">拯救人类</p>
      <p v-else>拯救银河系</p>

const score = 80;

四，v-for和:key

在模板装渲染列表数据，被循环渲染的数据可以数组，对象，数字，字符串

<div v-for="(循环项,当前索引） in 列表数据" :key="唯一标识"></div> 数组

<div v-for="(当前项的值,当前项的键,当前索引) in 列表数据" :key="唯一标识"></div> 对象

javascript 复制代码

 <p
        v-for="(item, index) in list"
        :key="item.id"
      >
        {{ item.id }}:{{ item.title }}:{{ index }}
      </p>

      <p
        v-for="(value, key, index) in user"
        :key="value"
      >
        {{ value }}:{{ key }}:{{ index }}
      </p>

      <p
        v-for="item in 5"
        :key="item"
      >
        {{ item }}
      </p>
      <p
        v-for="item in 'hello'"
        :key="item"
      >
        {{ item }}
      </p>


const list = [
  { id: 0, title: "html" },
  { id: 1, title: "css" },
  { id: 2, title: "js" },
];

const user = {
  name: "李四",
  age: 12,
  hobby: "paly",
};

五v-on

在模板中绑定事件，通过v-on：事件类型 = "事件句柄/函数名"来实现页面的交互

因为在这种场景非常高频，所以可以简写为@事件类型="事件句柄/函数名"

在事件声明的函数中，可以直接通过形参获取取到事件对象

如果在事件句柄中传入了参数，可以传入第二个参数$event 把事件对象手动传入到函数内部使用

javascript 复制代码

<button v-on:click="handClick">按钮1</button>
      <button @click="handClick">按钮2</button>
      <button @click="handClick1('hello', $event)">按钮3</button>

const handClick = (e) => {
  console.log("1111", e);
};
const handClick1 = (msg, e) => {
  console.log(msg, e);
};

六v-model

双向数据绑定,用在表单元素，在输入框中修改了v-model绑定的值，那么使用到该值的位置会同步更新

javascript 复制代码

p>{{ name }}</p>
      <input
        type="text"
        v-model="name"
      />
      <button @click="handClick2">提交</button>

//const name = ref('你好')
import { ref } from "vue"; //ref声明的变量是响应式数据
const name = ref("你好");

const handClick2 = () => {
  //特别注意：在js中通过.value的方法读取ref声明的响应式数据
  console.log(name.value);
  name.value = "修改后的数据";
};

七v-bind

v-bind: 给标签添加动态属性

v-bind:属性名 = "{属性名1：布尔值,属性名2，布尔值}"

v-bind:属性名 = "[布尔值？属性名1：属性名2]"

:缩写

:属性名="{属性名1：布尔值，属性名2：布尔值}"

:属性名="[布尔值？属性名1:属性名2]"

javascript 复制代码

  <h1>考试成绩</h1>
    <ul>
      <li :style="{ fontSize: '30px' }">语文：144</li>
      <li v-bind:class="{ active: flag }">数学：144</li>
      <li
        class="abc"
        v-bind:class="[flag ? 'active' : '']"
      >
        英语：144
      </li>
    </ul>
    <img
      :src="imgUrl"
      alt=""
    />


import { ref } from "vue";
const flag = ref(true);

const handleClick = () => {
  msg.value = "不会改变";
};

const imgUrl = ref(
  "https://tse1-mm.cn.bing.net/th/id/OIP-C.PKEGERhWPUpBdgVRoBAGfQHaDx?w=350&h=178&c=7&r=0&o=5&dpr=1.2&pid=1.7"
);

.active {
  color: red;
}

八v-slots

插槽是一种用于组件内容分发的机制，它允许你将内容从父组件传递到子组件的模板中

简单理解占位置用的

插槽的基本类型：

默认插槽，如果没有指定插槽的名称，那么它就是默认插槽，组件中有且仅有一个插槽

具名插槽当你需要在子组件模板中插入多个内容块时，可以使用具名插槽。

作用域插槽作用域插槽允许子组件将数据作为插槽的一部分传递回父组件，这样父组件可以访问子组件的数据来渲染内容

默认插槽

javascript 复制代码

<!-- 子组件 -->
<template>
  <div>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

<!-- 父组件 -->
<template>
  <ChildComponent>
    <p>这是插入到子组件的内容</p>
  </ChildComponent>
</template>

具名插槽

javascript 复制代码

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot> <!-- 具名插槽 -->
    <slot name="footer"></slot> <!-- 具名插槽 -->
  </div>
</template>


<!-- 父组件 -->
<template>
  <ChildComponent>
    <template #header>
      <h1>这是头部内容</h1>
    </template>
    <template #footer>
      <p>这是底部内容</p>
    </template>
  </ChildComponent>
</template>

作用域插槽

javascript 复制代码

<!-- 子组件 -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item">{{ item.defaultText }}</slot> <!-- 传递 item 对象给父组件 -->
    </li>
  </ul>
</template>

<script setup>
const items = ref([{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]);
</script>



<!-- 父组件 -->
<template>
  <ChildComponent>
    <template #default="slotProps">
      <span>{{ slotProps.item.text }}</span> <!-- 使用子组件传递的数据 -->
    </template>
  </ChildComponent>
</template>

九。v-pre

v-pre 是一个内置指令，用于跳过元素的编译过程

javascript 复制代码

<!-- 这将原样渲染 <div> 内的 HTML，不会解析任何 Vue 指令 -->
<div v-pre>
  {{ this will not be rendered }}
  <span v-if="true">neither will this</span>
</div>

在这个例子中，<div> 内的内容将不会被 Vue 解析，所以 {``{ this will not be rendered }} 和 <span v-if="true">neither will this</span> 都不会被处理。

十，v-once

v-once 是一个指令，用于渲染元素和组件时只执行一次初始化，之后视图更新时不再重新渲染该元素或组件

十一，v-cloak

v-cloak 指令，通过隐藏未渲染的模板表达式，直到 Vue 实例完成渲染