目录
mustache( {{}} )语法
1.标签内渲染完数据之后,后面还可加其他东西
2.大括号内可以是表达式的形式
3.一个标签可以渲染多个数据
4.大括号{{}}内可进行运算
运行结果:
v-once指令
1.该指令后面不需要跟任何表达式.
2.该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变,即禁止响应式。
在控制台改变message的值,会看到第一个h3标签里面的message值变了,而第二个h3标签里面message的值没有变。
在控制台输入:
页面显示结果:
v-html指令
如果我们从服务器请求到的数据本身就是一个HTML代码,但是我们希望的是按照HTML格式进行解析,并且显示对应的内容。我们就可以使用v-html指令。
html指令:
1.该指令后面往往会跟上一个string类型
2.会将string的html解析出来并且进行渲染
运行结果:
v-text指令
1.v-text作用和Mustache({{}})比较相似∶都是用于将数据显示在界面中
2.与{{}}不同的是,{{}}不会覆盖标签里面的内容,而v-text会覆盖标签里面的内容
3.v-text通常情况下,接受一个string类型
运行结果:
v-pre指令
v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
比如:
运行结果:
1.第一个h2元素中的内容会被编译解析出来对应的内容
2.第二个h2元素中会直接显示{{message}}
v-cloak指令
在某些情况下,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。可以使用 v-cloak 指令来解决屏幕闪动这一问题
解决步骤:
1.在html中
2.在css中
3.在js中