Vue学习-Vue基本指令总结

Vue复习-Vue指令总结

1 插值表达式

{ { }}:插值表达式 写的时候最好加两个空格 { {}}

2 v-text

直接把数据渲染出来,有html标签也不会解析

<h1 v-text="msg"></h1>

msg:"Hello"

3 v-html

双大括号的方式将会把数据解释为纯文本,而不是html,想要输出html可以用v-html指令,相当于hs的innerHtml属性

<div v-html="name"></div>

这个div的内容将会替换成属性值name，直接作为HTML进行渲染

但是 能不使用就不使用，因为有可能会造成XSS攻击

4 v-if

可以实现条件渲染,Vue会根据表达式的值真假条件来渲染元素

<a v-if="2>1">yes</a>

0,-0,""会自动转化成false 1会转成true 也可以放表达式
如果为 true 则显示，否则不显示

5 v-else

搭配v-if使用,它必须紧跟在v-id或者v-else-if后面,否则不起作用

<p v-if="score>=60">及格</p>
<p v-else>不及格</p>

6 v-else-if

v-else-if充当的v-id的else-if块,可以链式的使用多次

<div v-if="type==='A'">
    A
</div>
<div v-if="type==='B'">
    B
</div>
<div v-if="type==='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>

7 v-show

也是根据条件展示元素,要注意与v-if的区别,如果v-if的值是false,则这块元素被销毁,在dom中不存在,但是v-show的元素时钟会被渲染并保存在dom中,它只是简单地切换了css的display属性,v-show不支持template标签

<a v-show="true">yes</a>

提一笔:v-if有更高的切换开销,v-show有更高的初始渲染开销,因此,如果哦要非常频繁的切换,则使用v-show比较好,如果很少改变,则v-if比较好

8 v-pre

主要用来跳过这个元素和它子元素的编译过程,可以用来线束原始的Mustache标签,跳过大量没有指令的节点加快编译

<div id="app">
    <span v-pre>{
   {
   message}}</span>  //这条语句不进行编译
    <span>{
   {
   message}}</span>
</div>	

所以仅仅显示第二个span里的内容

9 v-el

可以使用v-el指令,去给这个元素注册一个缩影,方便通过所属实例的$el访问这个元素

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>

注：HTML不区分大小写，所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$e