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

模板语法指令语法——02

//指令语法:

1.什么是指定,有什么作用?

指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式的作用语DOM

2.vue框架中的所有指令的名字都以v-开始的

3.插值是写在标签当中用的,指令写在

vue框加所有的指令都以Html 标签的属性的形式存在的,

例如:<span 指令写 在这 >{{这里是插值语法的位置}}</span>

注意:虽然指令是写在标签的属性位置上,但是这个命令浏览器是无法看懂的,是 需 要先让vue框架进行编译,编译之后的内容都是浏览器可以看到的

4.指令的语法规则

指令的一个语法格式

<HTML 标签 v-指令名:参数 = “表达式”></HTML>

表达式,之前在插值语法中{{这里可以写什么}},那么指令中的表达式就可以写什么,实际上是一模一样的。但是需要注意的是,在指令中的表达式位置不能再外层添加{{}}

不是所有的指令都有参数和表达式

有的指令,不需要参数,也不需要表达式 例:v-once

有的指令,不需要参数,但是需要表达式,例 :v-if = “表达式”

有的指令,既需要参数,也需要表达式 例: v-bind : 参数 = “表达式”

  1. v-once指令

作用:只渲染元素一次,随后重新渲染,元素及其所有的子节点将被现为静态内存并跳过,这可以用于优化更新性能

  1. v-if = "表达式"指令

作用:表达式的执行结果需要一个布尔类型的数据: true或者 false

true:这个指令所在的标签会被渲染到浏览器当中去

false:这个指令所在的标签不会被渲染到浏览器当中去

<body>

<div id ='app'>

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

<h1 v-once> {{msg}} </h1>

<h1 v-if="a>b">测试:{{msg}} </h1>

</div>

<script>

new Vue ({

el : '#app'

data(){

msg : ' qwert'

a : ' 20'

b : ' 21'

}

})

</scirpt>

</body>

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

相关文章:

  • Comparable 和 Comparator 接口的区别
  • Python requests爬虫
  • Docker 基本管理及部署
  • Ubuntu下安装配置和调优Docker,支持IPV6
  • Proteus + Keil单片机仿真教程(六)多位LED数码管的动态显示
  • WEB开发-HTML页面更新部分内容
  • 休息时间c++
  • zabbix 自定义监控项及触发器
  • easyExcel 不规则模板导入数据
  • 前端调试技巧(npm Link,vscode调试,浏览器调试等)
  • SSL证书到期自动巡检脚本-推送钉钉告警
  • Winform打印编程基础
  • Python编程实例-Python的隐藏特性
  • 防火墙安全策略利用
  • SystemUIService启动-Android13
  • linux权限深度解析——探索原理
  • Qt学生管理系统(付源码)
  • 重磅!新公司法正式实施,这些变化你必须知道! ️
  • [Flask笔记]一个完整的Flask程序
  • 企业专利布局怎么弄
  • ArduPilot开源飞控之AP_Mount_Topotek
  • React组件间通信的几种方式
  • 2024最新国际版抖音TikTok安装教程,免root免拔卡安卓+iOS,附全套安装工具!
  • kafka与zookeeper的SSL认证教程
  • 为何数字化转型项目会夭折?深入分析失败的关键因素
  • 数据结构(其二)--线性表
  • 软链接node_modules
  • Apache中使用SSI设置
  • Java Stream API详解:高效处理集合数据的利器
  • Python使用策略模式和openpyxl库创建Excel文件并追加内容