模板语法指令语法——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>

相关推荐

  1. 模板语法指令语法——02

    2024-07-12 00:20:05       24 阅读
  2. Vue模版语法(初学Vue之v-指令语法

    2024-07-12 00:20:05       34 阅读
  3. vue3 学习笔记11 -- 模板语法指令

    2024-07-12 00:20:05       23 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 00:20:05       70 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 00:20:05       74 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 00:20:05       62 阅读
  4. Python语言-面向对象

    2024-07-12 00:20:05       72 阅读

热门阅读

  1. LeetCode 算法:实现 Trie (前缀树) c++

    2024-07-12 00:20:05       23 阅读
  2. 周报 | 24.7.1-24.7.7文章汇总

    2024-07-12 00:20:05       21 阅读
  3. httpclient访问https请求报错处理

    2024-07-12 00:20:05       20 阅读
  4. 力扣---41. 缺失的第一个正数

    2024-07-12 00:20:05       25 阅读
  5. 微信小程序之使用上拉加载实现图片懒加载

    2024-07-12 00:20:05       26 阅读
  6. C++ --> 类和对象(一)

    2024-07-12 00:20:05       22 阅读
  7. 系统架构的基础:定义、原则与发展历程

    2024-07-12 00:20:05       23 阅读