Vue常见简写 “:“ , “@“ , “#“

一、 :  是什么?
1. : 是什么意思?

示例::data="tableData"

其中这个 : 其实是v-bind的简写形式,实际开发中非常常见,所以首先先来说一下这个 : 的意义和使用.

首先需要了解一下v-bind,v-bind指令指示Vue将元素的id属性与组件的tabalData属性保持一致.如果绑定的值为null或undefined,那么该属性将从渲染的元素上移除.通常想要响应式的绑定一个属性,都会选择v-bind.

而 : 就是v-bind的简写形式,可能看起来和一般的HTML属性长得不太一样,但它的确是合法合规的属性绑定字符,并且所有支持Vue的浏览器都可正常解析它.并且,它不会出现在最终渲染的Dom中,相信在你深入了解过它后,会喜欢这种写法的.
2.怎么使用 : ?

最常见的应该就是 : disabled 通常用来判断是否禁用,当isButtonDisabled为true或空字符串时表示禁用,当isButtonDisabled为false时,表示不禁用

其中 : 表示v-bind,表示disabled该boolean类型判断与isButtonDisabled该boolean类型属性进行绑定,isButtonDisabled属性的boolean值等于disabled的boolean值.

<button :disabled="isButtonDisabled">Button</button>

也可以动态绑定多个值,例如一个对象

    data() {
      return {
        objectOfAttrs: {
          id: 'container',
          class: 'wrapper'
        }
      }
    }
     
     
     
    <div v-bind="objectOfAttrs"></div>

 或者一个数组

    <script setup lang="ts">
    import { tableData } from "./data";
     
    const columns: TableColumnList = [
      {
        label: "日期",
        prop: "date"
      },
      {
        label: "姓名",
        prop: "name"
      },
      {
        label: "地址",
        prop: "address"
      }
    ];
    </script>
     
    <template>
      <pure-table :data="tableData" :columns="columns" />
    </template>

二、@ 是什么?
1. @ 是什么意思?

示例: @click="add"

其中这个@其实就是v-on的简写形式,实际开发中也非常常见,接下来说一下@的意义和使用

首先了解一下v-on,如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令.例如通过用户的点击,去调用该点击事件的方法来改变属性的值.
2.怎么使用 @ ?

 如下例子,页面中会有两个按钮,一个上面标注[+],一个上面标注[-],当用户点击[+]按钮时,会调用后面的add方法,方法中对属性counter进行+1操作.

    <body>
      <div id="app">
        <h2>{{counter}}</h2>
        <button @click="add">+</button>
        <button @click="sub">-</button>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            counter: 0
          },
          methods: {
            add() {
              this.counter++
            },
            sub() {
              this.counter--
            }
          },
        })
      </script>
    </body>

也可以在按钮点击事件上传入参数,如: @ click="adds(3)"

    <body>
      <div id="app">
        <h2>{{counter}}</h2>
        <button @click="adds(3)">+</button>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            counter: 0
          },
          methods: {
            adds(n) {
              this.counter+n
            }
          },
        })
      </script>
    </body>

三、#  是什么?
1. # 是什么意思?

示例: template #header

其中这个#其实就是v-slot的简写形式,实际开发中也非常常见,接下来说一下#的意义和使用

首先了解一下v-slot,v-slot是具名插槽所使用的指令,意思就是将这部分模版片段传入子组件对应名字的插槽中,如果不太了解什么插槽,请查看Vue.js中文文档.插槽 Slots | Vue.js
2.怎么使用 # ?

如下代码,向<BaseLayout>传递插槽内容

    <BaseLayout>
      <template #header>
        <h1>Here might be a page title</h1>
      </template>
     
      <!-- 隐式的默认插槽 -->
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
     
      <template #footer>
        <p>Here's some contact info</p>
      </template>
    </BaseLayout>

 在组件中使用slot+name具名插槽

    <template>
      <div class="container">
        <header>
          <slot name="header"></slot>
        </header>
        <main>
          <slot></slot>
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>
    </template>

<template>元素中的内容全部被传递到相应的插槽,最终渲染出的HTML为:

    <div class="container">
      <header>
        <h1>Here might be a page title</h1>
      </header>
      <main>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
      </main>
      <footer>
        <p>Here's some contact info</p>
      </footer>
    </div>

      

 
总结

提示:以上就是今天要讲的内容,本文仅仅是作为初学者对Vue不太了解,无法读懂一些简写代码的知识补充,讲解的也是比较基础并且常用的一些简写.如依旧不太了解,请去Vue.js官方中文文档继续学习.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/800371.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux虚拟主机中如何进行扫描检查恶意软件

看到论坛中有网友留言想要知道Linux虚拟主机上是否有扫描检测工具可以检测病毒文件或者恶意软件的。因为想要知道是否有此功能&#xff0c;以便他后去购买产品是可以更清晰的去咨询以及了解。正如这边是有使用Hostease提供商的Linux 虚拟主机&#xff0c;而cPanel中如何进行扫描…

012——LED模块驱动开发(基于I.MX6uLL)

目录 一、 硬件原理图 二、 驱动程序 三、 应用程序 四、 Makefile 五、操作 一、 硬件原理图 又是非常经典的点灯环节 &#xff0c;每次学新语言第一步都是hello world&#xff0c;拿到新板子或者学习新的操作系统&#xff0c;第一步就是点灯。 LED 的驱动方式&#xff0…

2024年阿里云优惠券(代金券)在哪里领取?

阿里云作为国内领先的云计算服务提供商&#xff0c;不仅提供了稳定、高效的云服务&#xff0c;还时常推出各种优惠活动&#xff0c;以此来吸引用户上云。其中&#xff0c;阿里云优惠券就是一种常见的优惠方式。那么&#xff0c;在2024年&#xff0c;我们该如何领取阿里云优惠券…

[开源] 基于GRU的时间序列预测模型python代码

基于GRU的时间序列预测模型python代码分享给大家&#xff0c;记得点赞哦 #!/usr/bin/env python # coding: utf-8import time time_start time.time() import numpy as np import matplotlib.pyplot as plt import pandas as pd import math from keras.models import Sequent…

Python第四次作业

周六&#xff1a; 1. 找出10000以内能被5或6整除&#xff0c;但不能被两者同时整除的数&#xff08;函数&#xff09; def find_number():for number in range(0,10000):if number % 5 0 or number % 6 0:if number % 5 ! number % 6:ls.append(number)print(ls)ls [] fin…

Git Flow困境逃脱指南

本来来自极狐GitLab 资源中心&#xff0c;原文链接&#xff1a;https://resources.gitlab.cn/articles/020183ba-cfc0-4917-b901-248acdcfc92f。 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff…

面板数据回归模型(二)房价的影响因素分析

1.数据来源 本文选择我国出一线城市房价均值、新一线城市房价均值、二线城市房价均值、货币供应量和利率。选取2002-2018年的数据,共17组数据,由于数据的自然对数变换不改变原有的协整关系,并能使其趋势线性化,消除时间序列中存在的异方差现象,所以对所有数据取其自然对数…

Java多线程+分治求和,太牛了

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 个人IP&#xff1a;shigen 最近的一个面试&#xff0c;shigen简直被吊打&#xff0c;简历上写了熟悉高并发…

大模型实践:如何选择适合自己场景的Prompt框架?

1. 选择适合自己场景的Prompt框架需要考虑哪些因素&#xff1f; 以下是一些关键的步骤和考虑点&#xff1a; 理解任务需求&#xff1a;首先&#xff0c;明确你的任务类型&#xff08;如文本生成、问答、文本分类、机器翻译等&#xff09;和具体需求。不同的任务可能需要不同类…

蓝桥杯DFS-最大数字

解题思路 我们从最高位开始要利用自己的1号操作和2号操作保证当前这个数位的数一定要尽可能最大。 然后分别考虑两种操作&#xff0c;首先两种操作不可能混用&#xff0c;因为它们是抵消的效果&#xff0c;所以要么对这个数全使用1操作&#xff0c;要么2操作。假设某个数位的…

[论文精读]Spatio-Temporal Graph Convolution for Resting-State fMRI Analysis

论文网址&#xff1a;Spatio-Temporal Graph Convolution for Resting-State fMRI Analysis | SpringerLink 论文代码&#xff1a;GitHub - sgadgil6/cnslab_fmri: CNS (Computational Neuroscience) Lab project for age/sex classification of fMRI scans 英文是纯手打的&a…

键值数据库Redis——Windows环境下载安装+命令行基本操作+Java操纵Redis

文章目录 前言一、下载与安装&#xff08;Windows环境&#xff09;** 检查数据库连接状态 **** 查看Redis数据库信息 ** 二、Redis五种数据结构与基本操作获取所有的key——keys *清空所有的key——flushall2.1 字符串操作2.2 散列操作2.3 列表操作2.4 集合操作2.5 位图操作 三…

小核引导RTOS---RISC-V C906

文章目录 参考日志编译框架目标fip 启动流程fip文件组成BL2程序 总结思考备注 参考 参考1. How does FSBL load the FreeRTOS on the small core and execute it?参考2. Duo now supports big and little cores?Come and play!Milk-V Duo, start&#xff01;参考3. 使用uboo…

【Mybatis】Mybatis 二级缓存全详解教程

【Mybatis-Plus】Mybatis-Plus 二级缓存全详解 一&#xff0c;Mybatis-Plus介绍 MyBatis-Plus&#xff08;简称MP&#xff09;是一个基于 MyBatis 的增强工具&#xff0c;它简化了 MyBatis 的开发&#xff0c;并且提供了许多便利的功能&#xff0c;帮助开发者更高效地进行持久…

数字电路基础(Digital Circuit Basis )

目录 一、什么是数字电路&#xff1f; &#xff08;Digital Circuit &#xff09; 1.概念 2.分类 3.优点 4.数电与模电的区别 二、数制 (十进制&#xff1a;Decimal) 1.概述 2.进位制 3.基数 4.位权 5.二进制的算术运算 三、编码 (二进制&#xff1a;Binary ) 1.什…

Windows下Oracle表死锁处理过程

Windows下Oracle表死锁处理过程 1.问题现象 Oracle 12c数据库安装在Windows下&#xff0c;在一个大数据量表批量更新操作时&#xff0c;异常中断。表锁死&#xff0c;查询访问长时间无反应。 2.处理过程 &#xff08;1&#xff09;锁表对象 select object_name as 对象名称…

解释一下Python中的命名空间和作用域

解释一下Python中的命名空间和作用域 在Python中&#xff0c;命名空间和作用域是两个非常重要的概念&#xff0c;它们对于理解变量的可见性和生命周期至关重要。下面我将详细解释这两个概念。 一、命名空间 命名空间是一个字典&#xff0c;它用于存储变量名&#xff08;键&a…

[蓝桥杯 2023 省 A]幸运数有奖问答

[蓝桥杯 2023 省 A] 填空问题 题目描述 A. 幸运数 小蓝认为如果一个数含有偶数个数位&#xff0c;并且前面一半的数位之和等于后面一半的数位之和&#xff0c;则这个数是他的幸运数字。例如 2314 2314 2314 是一个幸运数字&#xff0c;因为它有 4 4 4 个数位&#xff0c;并…

JAVA8新特性

JAVA8新特性 1、函数式编程 主要关注对数据进行了什么操作 1.1 优点 代码简洁 容易理解 易于“并发编程” 2、lamada表达式 (参数列表)->{代码}未使用 new Thread(new Runnable() {Overridepublic void run() {System.out.println(123123123);}}).start(); 使用…

CSS常见样式

字体相关的样式 <style>div{/* 斜体 */font-style: italic;/* 加粗 100-900*/font-weight: 900;/* 字体大小 */font-size: 20px;/* 声明字体格式 */font-family: "微软雅黑";}</style> div内部文字垂直居中 只需要将行高设为其height的大小即可。 div{…