当前位置: 首页 > news >正文

Vue中的常用指令

Vue 会根据不同的【指令】,针对标签实现不同的【功能】

概念:指令(Directives)是 Vue 提供的带有 v- 前缀 的 特殊 标签属性

为啥要学:提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类:

  • 内容渲染指令(v-html、v-text)
  • 条件渲染指令(v-show、v-if、v-else、v-else-if)
  • 事件绑定指令(v-on)
  • 属性绑定指令 (v-bind)
  • 双向绑定指令(v-model)
  • 列表渲染指令(v-for)

指令是 vue 开发中最基础、最常用、最简单的知识点。

语法:

v-html = "表达式 " → 动态设置元素 innerHTML

示例代码:

<body><div id="app"><!-- 插值表达式并不能解析标签,而是会以存文本的方式展示到页面上 --><div>{{ msg }}</div><div v-html="msg"></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {msg: `<h3>学前端~来黑马!</h3>`}})</script>
</body>

具体有哪些指令可以查询官网

学习 --> API

image-20240128182108578

可以看见,总共14个指令,但这14个并不都是常用的,只用下述用红框框起来的这10个指令才是常用的

image-20240128182240360

http://www.lryc.cn/news/357074.html

相关文章:

  • 百度页面奔跑的白熊html、css
  • Day-02面向对象
  • Sentinel-2 哨兵二号数据介绍及下载
  • 阿里智能信息数据挖掘复盘
  • Flutter中图片是怎么在flutter上呈现出来的?
  • 使用 CNN 训练自己的数据集
  • 自动控制: 最小二乘估计(LSE)、加权最小二乘估计(WLS)和线性最小方差估计
  • 基于VMware安装Linux虚拟机
  • 6、phpjm混淆解密和php反序列化
  • Codeforces Round 909 (Div. 3) E. Queue Sort(模拟 + 贪心之找到了一个边界点)
  • 设计模式基础——设计原则介绍
  • 【校园网网络维修】当前用户使用的IP与设备重定向地址中IP不一致,请重新认证
  • 如何找到docker的run(启动命令)
  • Spring如何管理Bean的生命周期呢?
  • Java网络编程:UDP通信篇
  • HTML+CSS+JS简易计算器
  • STM32使用ST-LINK下载程序中需要注意的几点
  • 我和jetson-Nano的故事(12)——安装pytorch 以及 torchvision
  • 「异步魔法:Python数据库交互的革命」(一)
  • 探秘GPT-4o:从版本对比到技术能力的全面评价
  • 四川汇烁面试总结
  • 【小程序 按钮 表单 】
  • 高铁Wifi是如何接入的?
  • gitlab之docker-compose汉化离线安装
  • 【算法】dd爱转转
  • Python3 笔记:IDLE的几个基本设置
  • Mysql:存储过程练习
  • 详解Java ThreadLocal
  • Unable to parse response body for Response{requestLine=PUT
  • GitHub的原理及应用详解(六)