//指令语法:
1.什么是指定,有什么作用?
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式的作用语DOM
2.vue框架中的所有指令的名字都以v-开始的
3.插值是写在标签当中用的,指令写在
vue框加所有的指令都以Html 标签的属性的形式存在的,
例如:<span 指令写 在这 >{{这里是插值语法的位置}}</span>
注意:虽然指令是写在标签的属性位置上,但是这个命令浏览器是无法看懂的,是 需 要先让vue框架进行编译,编译之后的内容都是浏览器可以看到的
4.指令的语法规则
指令的一个语法格式
<HTML 标签 v-指令名:参数 = “表达式”></HTML>
表达式,之前在插值语法中{{这里可以写什么}},那么指令中的表达式就可以写什么,实际上是一模一样的。但是需要注意的是,在指令中的表达式位置不能再外层添加{{}}
不是所有的指令都有参数和表达式
有的指令,不需要参数,也不需要表达式 例:v-once
有的指令,不需要参数,但是需要表达式,例 :v-if = “表达式”
有的指令,既需要参数,也需要表达式 例: v-bind : 参数 = “表达式”
- v-once指令
作用:只渲染元素一次,随后重新渲染,元素及其所有的子节点将被现为静态内存并跳过,这可以用于优化更新性能
- 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>