阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js 指令

      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

      渲染指令

      目录
      目录