教程5 Vue3常用内置指令（插值、v-bind、v-model、v-on、v-text、v-html、v-once、v-pre、v-cloak、v-slot）

已于 2023-03-08 08:19:27 修改
阅读量1.4k 收藏 6
点赞数 1
文章标签： html javascript 前端
于 2023-03-05 09:56:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boxuestudio/article/details/128899938
版权

准备：新建项目

1、使用Vite创建Vue Typescript 项目（instructions）

npm create vite@latest

在这里插入图片描述

2、项目文件结构

在这里插入图片描述

3、运行

在这里插入图片描述

一、文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

1、基本用法：

template

<span>Message: {{ msg }}</span>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

2、案例：修改App.vue：

<script setup lang="ts">
const msg = "Hello World!"

</script>

<template>  
  <h1>{{ msg }}</h1>
</template>

3、案例运行结果

在这里插入图片描述

二、 v-bind 绑定id或属性

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

1、基本用法：

<div v-bind:id="dynamicId"></div>

2、简写：

<div :id="dynamicId"></div>

3、案例运行结果

在这里插入图片描述

4、案例（修改App.vue）

<script setup lang="ts">

const imgUrl =  "https://img2.baidu.com/it/u=617579813,2960860841&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
const url = "http://www.gengdan.cn"
const className = 'title1'

</script>

<template>
  <img :src="imgUrl"/>
  <br/>
  <a :href="url">耿丹官网</a>
  <h1 :class="className">我是标题一，请把我变成红色</h1> 
</template>

<style>
img{
  height: 200px;
}
a{
  font-size:28px;
}
.title1 {
  color: red;
}
</style>

三、 v-model 双向绑定

v-model 可以在组件上使用以实现双向绑定。

1、v-model 在原生元素上的用法：

template

<input v-model="searchText" />

2、案例运行结果

在这里插入图片描述

3、案例（修改App.vue）

<script setup lang="ts">
let username = "admin";
let password = "123456";
let intro = "我是系统管理员";

function doLogin(){
  console.log(username);
  console.log(password);
  console.log(intro);
}
</script>

<template>
  <div id="app">
    <div>
      <label>
        账号：
        <input type="text" v-model="username" />
      </label>
    </div>
    <div>
      <label>
        密码：
        <input type="text" v-model="password" />
      </label>
    </div>
    <div>
      个人简介：
      <textarea v-model="intro"></textarea>
    </div>
    <div>
      <button @click="doLogin">登录系统</button>
    </div>
  </div>
</template>

四、 v-on 给元素绑定事件监听器。

缩写：@

期望的绑定值类型：Function | Inline Statement | Object (不带参数)

参数：event (使用对象语法则为可选项)

修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 在捕获模式添加事件监听器。
.self - 只有事件从元素本身发出才触发处理函数。
.{keyAlias} - 只在某些按键下触发处理函数。
.once - 最多触发一次处理函数。
.left - 只在鼠标左键事件触发处理函数。
.right - 只在鼠标右键事件触发处理函数。
.middle - 只在鼠标中键事件触发处理函数。
.passive - 通过 { passive: true } 附加一个 DOM 事件。

1、v-on基本用法：

<button v-on:click="doThis">方法一</button>

2、v-on简写用法：

<button @click="doThis">方法二</button>

3、v-on内联语句调用方法：

<button v-on:click="say('hi')">方法三</button>

4、v-on单击事件案例运行结果：

在这里插入图片描述

5、v-on单击事件案例：

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

const count = ref(0);
let n = "";

// 分数加1函数
function add() {
  count.value = count.value + 1;
  console.log(count);
}

// 分数减1函数
function reduce() {
  if (count.value == 0) {
    alert("得分不能小于0");
  } else {
    count.value = count.value - 1;
  }
}

// 加分函数
function enterAdd() {
  if (count.value + parseInt(n) < 0) {
    alert("得分不能小于0");
  } else {
    count.value = count.value + parseInt(n);
  }
  n = "";
}
</script>

<template>
  <div id="app">
    总分：{{ count }} <br />
    <button v-on:click="add">加分</button>
    <button @click="reduce">减分</button>
    <br />
    <!-- 回车调用加法事件 -->
    加分：<input type="text" v-on:keyup.enter="enterAdd" v-model="n" />
  </div>
</template>

6、v-on键盘、鼠标事件案例：

在这里插入图片描述

（1）事件的基本使用： 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

（2）键盘和鼠标事件监听

v-on:click(@click) ——>注册点击事件
v-on:keydown(@keydown) ——>注册键盘按下事件
v-on:keyup(@keyup) ——>注册键盘弹起事件
v-on:mousedown(@mousedown) ——>注册鼠标按下事件
v-on:mouseover(@mouseover) ——>注册鼠标弹起事件
v-on:submit(@submit) ——>注册表单事件
v-on:scroll(@scroll) ——>注册滚动条(上下按键)事件
v-on:wheel(@wheel) ——>注册滚轮事件

（3）常用的七种按键:

@keyup.enter        enter键触发
@keyup.delete      delete和backspace键触发(删除键 和 退格键 都能触发,但delete不会删除输入内容)
@keyup.esc            esc键触发
@keyup.space       space键触发
@keyup.tab            tab键触发　　(特殊按键,因tab本身功能是切换焦点,按下tab时就会切换,所以tab常用在@keydown.tab)
@keyup.up             up键触发
@keyup.down       down键触发
@keyup.left            left键触发
@keyup.right         right键触发   除tab外其它特殊按键:　　系统修饰键: ctrl,  alt,  shift,  meta(win键)  　　(1) 配合keyup使用: 按下修饰键,在按下其它键,随后释放其它键,事件才触发, 如@keyup.ctrl.y='绑定方法'　　(2) 配合keydown使用: 正常触发事件

（4）键盘、鼠标案例

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

function mouseDown() {
  console.log("鼠标被按下了！");
}

function mouseUp() {
  console.log("鼠标被抬起了！");
}

function onKeyUp(e:any) {
  console.log(e.key, e.keyCode, "键被抬起了"); // 显示按键的名称和编码
}

function onKeyPress(e:any) {
  console.log(e.key, e.keyCode, "键被按下了"); // 显示按键的名称和编码
}

function onEnterEvent() {
  console.log("您按下了回车");
}

function onTabKeyDown(){
  console.log("Tab键被按下！");
}

function onDelKeyDown(){
  console.log("删除键被按下！");
}

function onUpKeyDown(){
  console.log("向上的键被按下了！");
}

function onDownKeyDown(){
  console.log("向下的键被按下了！");
}

function onLeftKeyDown(){
  console.log("向左的键被按下了！");
}

function onRightKeyDown(){
  console.log("向右的键被按下了！");
}
</script>

<template>
  <div id="app">
    回车引发事件：<input type="text" @keyup.enter="onEnterEvent" /><br/>
    Tab键、退格或删除键引发事件：   <input @keydown.tab="onTabKeyDown"  @keydown.delete="onDelKeyDown" /><br/>
    上、下、左、右键引发事件：   <input  @keydown.up="onUpKeyDown" @keydown.down="onDownKeyDown" @keydown.left="onLeftKeyDown" @keydown.right="onRightKeyDown"/><br/>
    <button v-on="{ mousedown: mouseDown, mouseup: mouseUp }">鼠标事件</button>
    <button @keyup="onKeyUp" @keypress="onKeyPress">键盘事件</button>
  </div>
</template>

<style>
* {
  font-size: 28px;
  margin-top: 50px;
  margin: 10px;
}
</style>

（5）滚轮事件

在这里插入图片描述
参考源码：

<template>
    <div>
        <ul @wheel="wheelFun">
        <li v-for="item in 100">{{ item }}</li>
        </ul>
    </div>
</template>
<script setup  lang="ts">
import {ref} from "vue"
const conter = ref(0)
const wheelFun = () => {
    console.log(conter.value++ + "滚轮滚动了！");
}
</script>
<style scoped>
    
</style>

五、 v-text 更新元素的文本内容

期望的绑定值类型：string

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>


<script setup lang="ts">
let msg = `<h1 style="color:blue">v-text用法</h1><p>原样的字符串，还是挺简单的吧？</p>`;
</script>

<template>
  <div id="app">
    <span v-text="msg"></span>
  </div>
</template>

在这里插入图片描述

六、 v-html 更新元素的 innerHTML

期望的绑定值类型：string
v-html 的内容直接作为普通 HTML 插入。

<script setup lang="ts">
let htmlContent = `<h1 style="color:blue">v-html用法</h1><p>还是挺简单的吧？</p>`;
</script>

<template>
  <div id="app">
    <div v-html="htmlContent"></div>
  </div>
</template>

在这里插入图片描述

七、v-once 仅渲染元素和组件一次，并跳过之后的更新

在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

<script setup lang="ts">

let msg = "Hello v-once";
const list = ["苹果", "香蕉", "香梨", "菠萝"];

</script>

<template>
  <div id="app">
    <!-- 单个元素 -->
    <span v-once>我不变: {{ msg }}</span>
    <!-- 带有子元素的元素 -->
    <div v-once>
      <h1>comment</h1>
      <p>{{ msg }}</p>
    </div>
    <!-- 组件 -->
    <MyComponent v-once :comment="msg" />
    <!-- `v-for` 指令 -->
    <ul>
      <li v-for="i in list" v-once>{{ i }}</li>
    </ul>
  </div>
</template>

<style>
* {
  font-size: 28px;
  margin-top: 50px;
  margin: 10px;
}
</style>

在这里插入图片描述

八、v-pre 跳过该元素及其所有子元素的编译

元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

示例：

template

<span v-pre>{{ this will not be compiled }}</span>

九、v-cloak 用于隐藏尚未完成编译的 DOM 模板。

该指令只在没有构建步骤的环境下需要使用。

当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。

<div v-cloak>
  {{ message }}
</div>


[v-cloak] {
  display: none;
}

十、v-slot 用于声明具名插槽或是期望接收 props 的作用域插槽

缩写：#

期望的绑定值类型：能够合法在函数参数位置使用的 JavaScript 表达式。支持解构语法。绑定值是可选的——只有在给作用域插槽传递 props 才需要。

参数：插槽名 (可选，默认是 default)

1、实例：子获取父的值

在这里插入图片描述
App.vue是父组件，HelloWorld.vue是子组件

（1）App.vue参考源码

<template>
  <div class="container-component-a">
    <h1>组件A</h1><hr>
    <HelloWorld name1="abc">
      <div>父组件的div</div>
    </HelloWorld>
  </div>
</template>
 
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";

</script>

（2）HelloWorld.vue参考源码

<template>
  <div class="container-component-b">
    <h1>组件HelloWorld</h1>
    <div>
      <div>子组件HelloWorld的div</div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

2、实例：父子相互取值

（1）运行结果

在这里插入图片描述
App.vue是父组件，HelloWorld.vue是子组件

（2）App.vue参考源码

<template>
  <div class="container-component-a">
    <h1>组件A</h1><hr>    
    <HelloWorld>
      <template v-slot:name1="data1">
        {{ data1 }}
      </template>
    </HelloWorld>
  </div>
</template>
 
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";

</script>

（3）HelloWorld.vue参考源码

<template>
  <div class="container-component-b">
    <h1>组件HelloWorld</h1>
    <slot name="name1" :data2="user"></slot>
  </div>
</template>

<script setup lang="ts">
const user = { lastName: "Huang" };

</script>

3、实例：todo列表

（1）运行结果

在这里插入图片描述

（2）App.vue参考源码


<template>
  <div class="container-component-a">
    <h1>组件A</h1><hr>    
    <HelloWorld>
      <template v-slot:name1="data1">
        <span v-if="data1.data2.isCompleted">√</span>
        {{data1.data2.title}}
      </template>
    </HelloWorld>
  </div>
</template>
 
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";

</script>

（3）HelloWorld.vue参考源码


<template>
  <div class="container-component-b">
    <h1>组件HelloWorld</h1>
    <ul>
      <li v-for="todo in todoLists" v-bind:key="todo.id">
        <slot name="name1" :data2="todo"></slot>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const todoLists = [
  {
    id: 1,
    title: "吃饭",
    isCompleted: true,
  },
  {
    id: 2,
    title: "睡觉",
  },
  {
    id: 3,
    title: "打逗逗",
  },
];
</script>
JunLianHuang
关注
「Vue3系列」Vue3指令
日常笔记/总结/系列知识梳理
03-02 1241
注册自定义指令有两种方式：全局注册和局部注册。全局注册的指令可以在任何 Vue 实例中使用，而局部注册的指令只能在特定的 Vue 实例或组件中使用。// 全局注册// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})// 局部注册// 定义指令})在 Vue 3 中，自定义指令允许你注册一些可以在模板中重复使用的行为。这些行为可以附加到任何元素上，并在元素的特定生命周期钩子中执行自定义逻辑。
vue基础（插值表达式，v-bind，v-on，v-model ）
weixin_69742797的博客
05-19 971
1、vue单文件组件：扩展名（.vue）的文件 包含三个结构： 模板结构：template--是必须的、模板中只能有一个根元素，所以要将结构包裹到div中。 功能：script--返回当前组件实例；export default{}--引入组件默认会进行返回的实例，返 回当前组件实例 样式：style 2、插值表达式： 语法：{{表达式}} 表达式里面可以写---->变量，表达式，调用a...
vue3之v-bind
06-03 264
【代码】vue3.2之style: v-bind。
Vue3 中的 v-bind 指令：你不知道的那些工作原理
最新发布
kfashfasf的博客
06-25 1160
在transform阶段处理vue内置的v-for、v-model等指令时会去执行一堆transform转换函数，其中有个转换函数中会去执行buildProps函数。buildProps函数会去遍历当前node节点的所有props数组，此时的props中还是存的是v-bind指令，每个prop中存的是v-bind指令绑定的属性名和属性值。在for循环遍历node节点的所有props时，每次都会执行转换函数。如果我们在写v-bind时将值也给省略了，此时v-bind指令绑定的属性值就是undefined。
vue3中的v-bind
qq_51976882的博客
02-08 1124
v-bind是 Vue.js 中的一个核心指令，用于在 Vue 组件或 DOM 元素上绑定数据属性。它允许你将 Vue 实例中的数据或计算属性绑定到 DOM 元素的属性上。当数据发生变化时，v-bind会自动更新 DOM 元素的属性。v-bind的简写形式是冒号。例如，v-bind:src可以简写为:src。以下是v-bind
二、Vue3基础[内置指令]
黑日里不灭的light
10-29 742
解释：同v-html相对，内容只会以纯文本内容展示。
Vue基础之指令
qq_50564231的博客
03-21 65
上一篇文章带领大家了解了Vue基础内容之一的生命周期，学习了生命周期三个阶段中最重要的8个生命周期函数，点击回顾Vue基础之生命周期。这篇文章开始学习Vue基础的另外一个重要内容——指令。除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。和组件类似，自定义指令在模板中使用前必须先注册。而根据注册方式的不同可分为局部注册和全局注册。
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
在Vue.js中，过滤器（Filters）是Vue实例的一个非常有用的特性，它允许用户对从插值表达式和v-bind表达式中输出的文本进行格式化。Vue2允许自定义过滤器，这些过滤器可以被添加到JavaScript表达式的尾部，并由“管道...
对Vue- 动态元素属性及v-bind和v-model的区别详解
10-18
在学习Vue框架的过程中，对于动态元素属性的使用以及Vue提供的指令v-bind和v-model的理解是非常关键的。这两个指令在Vue.js中用于数据绑定，但是它们的使用场景和作用有着本质的区别。接下来，我将从多个维度详细...
详解vue中v-model和v-bind绑定数据的异同
01-21
vue的模板采用DOM模板，也就是说它的模板可以当做DOM节点运行，在浏览器下不报错，绑定数据有三种方式，一种是插值，也就是{{name}}的形式，一种是v-bind，还有一种是v-model。{{name}}的形式比较好理解，就是以文本...
Vue3指令
如果相遇，那么你好哦~
11-08 73
Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以v-开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。 Vue 指令是带有前缀v-的特殊 HTML 属性，它赋予 HTML 标签额外的功能。 与传统的 JavaScript 方法相比，使用 Vue 创建响应式页面要容易得多，并且需要的代码更少。
vue3 v-bind
seimeii的博客
08-02 1201
vue3 v-bind
Vue3 v-bind & v-on & v-model
xiangxiongfly
02-22 1034
v-bind 属性绑定 v-on 事件绑定 v-model 双向绑定
VUE3基本指令
znhyXYG的博客
07-04 4002
vue基础指令
Vue学习（三）——v-bind指令
weixin_45927758的博客
10-05 642
1.动态绑定链接 src="link"或者src="{{link}}"都是不可取的，我们需要通过v-bind属性来动态绑定链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
Vue3最全基础指令
把全世界的花都给一个人
02-24 2966
一，概述 构建用户界面的渐进式JavaScript框架 前段框架： Vue 尤雨溪 React Facebook脸书 Angular google Jquery 二，安装 <script src="vue.js"> 三，实例化 模板 <div id = "app"> </div> 创建app const app = Vue.createApp({ data(){return {}} }...
Vue3基础之v-bind与v-on
study_way的博客
12-11 1156
通过绑定一个数组到 v-bind:style 或 :style 上，可以将多个样式对象组合应用到元素上。baseStyles 和 dynamicStylesArray 是两个样式对象，通过 :style 将它们组合应用到元素上。这种方式可以用于将基本样式与动态样式组合，实现更灵活的样式管理。当 dynamicStylesObject 中的属性值发生变化时，元素的样式也会相应地更新。是 Vue 中两个非常常用的指令，分别用于属性绑定和事件绑定。来绑定事件处理函数。在 Vue 3 中，你还可以使用简写语法。
Vue3-在HTML标签、组件标签上使用v-model
杨荧的CSDN博客
01-24 2252
Vue 3中的v-model指令可以用于实现表单元素和自定义组件的双向数据绑定，提供了便捷的方式来处理表单输入和组件通信
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值