Vue.js 指令
   3 分钟阅读

VUEJS 属于 MVVM 模式,是封一个组件,然后根据场景使用不同的组件;

VUE 中分为三个结构;

M- model –>数据

V- view  ->HTML

VM- viewModel   ->HTML和数据之间的管道,起到粘合剂的作用;

而渲染 view 层的 HTML,就需要了解指令,如果你以前接触过 angular,那么你可以非常容易的上手他,因为你会发现和 angular 的指令原理差不多的;

为了方便记忆,把指令为几种形式;

一、页面渲染指令

v-text

v-html

v-if

v-show

v-else

v-for

v-bind (简写为:)

二、事件绑定指令

v-on(简写为@)

三、动态修改双向值指令

v-model

一、页面渲染指令详解;

v-text

这个指令可以更新元素的 textContent,{{}}插值也被编译为 textNode 的一个 v-text 指令;两者相似,可以看作等价的;

v-html

这个指令可以更新元素的 htmlContent, 等价于{{{}}}这种的写法;v-text 和 v-html 在 vue 初识的时候已经了解了,就不再附属

v-if

这个指令可以完全根据表达式的值在 DOM 中生成或者不生成一个元素 / 元素块;

原理:

表达式值为 true,对应元素的 clone 值会被重新插入到 DOM 中(FOCUS);

表达式值为 false,对应的元素在 DOM 中 s 输出后再删除;

为了更好的组件化,if 可以用作大段的 HTML 判断 (template、style、script 这三个标签分别包裹 HTML/JS/CSS 的代码),如下;

v-if

注意:template 在虚拟 DOM 中仅仅是一个包装元素,作为一个判断作用,我个人感觉类似代码块的{}这种的意思,在真实的 DOM 输出时,template 这个标签并不会会被输出的;

v-show

字面理解,就是显示,这个指令就像他的名字一样,只是控制元素的 display,无论里面的表达式结果为 true 还是 false,都会渲染出来,然后再根据表达式为真还是假来切 display;

亲测 v-show 不支持 template 标签,通过上面的例子可以看出,v-show 是通过 display 来判断,上面的 isMan 和 isWoman 一个 true 一个为 false,通过看 elements,为 false 的有一个行内样式 display 为 none 的属性;

v-if 和 v-show 的区别;

1、if是虚拟DOM中运算后,为false值的不输出在页面,属于真实渲染,show是全部输出;亲测输出的时候,show和if都有FOCUS现象;一闪而过,哈哈懵逼了!

2、if切换的时候是真实的销毁和重建条件块内的事件监听器和子组件,代价较高,但是更彻底;show切换时候更加效率,因为他只控制了css

3、if支持template标签,show不支持template标签

4、一般show用于频繁切换的场景(因为DOM全部输出了,切换的成本低);if用于几乎不切换的场景(因为真实渲染,渲染的更干净,不像show的页面初始输出成本高);

v-else

这个指令是对 if 和 show 指令的补充,写的一个 else 块;

v-else

  • v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别;
  • v-else 元素是否渲染在 HTML 中,取决于前面使用的是 v-if 还是 v-show 指令。

v-for

渲染列表等数组对象;用法如下

v-bind:

可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是写 HTML 元素的特性(attribute),图片的 src 等;

用法 v-bind:argument=”expression”

例如 v-bind:class=”expression ? trueValue : falseValue”

缩写为冒号

例如 :class=”expression ? trueValue : falseValue”

v-bind

渲染指令