v-cloak
这个指令保持在元素上直到关联实例结束编译。
对官方文档的进一步解释:
v-cloak:这个字符串叫做指令
元素:这里的元素是一个宽泛的概念,是一个统称,可以具体到某一个元素,比如div
关联实例:关联值得是两个事物之间存在关系,互相影响。实例,指的是一个具体的例子,这里指的应该还是这个元素。(待定)
结束编译:是谁编译?编译器。是谁被编译?
看一个例子:
1 //css代码 2 [v-cloak]{ 3 display: none; 4 } 5 6 //html代码 7 <div v-cloak> 8 {{message}} 9 </div>
{{message}}叫做Mustache标签,它就是需要被编译的东西。
所以这个字符串的作用是:
有一个事物a,它会被处理,处理后变成b;
v-cloak这个指令会影响a的正常表现,它会用某种方式来影响a,目的是等到a成功变成b后再自动消失。
就拿本文的代码来说,可以稍微形象化地解释下:
村里有一个超级大的黑板,黑板上可以挂海报。
今天奥特曼要来这个村,村民们为了欢迎奥特曼,特意准备了一张超大海报。可是黑板上原先的海报是哥斯拉怪兽,而奥特曼来的时间又不确定,所以村民们为了不伤奥特曼的心,就找了一个魔法师,他能把黑板暂时隐藏起来,这样一来,即便哥斯拉的海报还没有被换成奥特曼,奥特曼也看不到。
不论奥特曼什么时候来,他要么就啥都看不到,要么看到的就只是他的帅照。
这里魔法师使用的方法就是隐藏。
回头再对比一下官方文档的解释:
这个指令保持在元素上直到关联实例结束编译。
魔法师需要近距离施法,而且要有施法对象,所以她必须要从她的黑魔地狱来到这个村里,把事儿处理好了再离开。
元素=村
关联实例=村子里的海报
编译=村民所做的事儿
关联实例结束编译=施法海报成功被村民换掉
这里的指令不就是魔法师吗?魔法师所做之事无法言表,但是我们知道她的名字,需要她的时候就大喊一声就行了。