vue指令集前端-尔嵘-

目前vue.js官网最新的指令如下：

指令如下：

  1.v-if v-else v-else-if <div v-if="aa==0">hello</div> <div v-else-if="aa==1 || aa != 2">world</div> <div v-else>world</div> 2.v-for <div v-for="(item,index) in Array" :key = "index"></div> 3.v-on: 等价@ <button v-on:click ="clickHandler">切换</button> 等价 <button @click ="clickHandler">切换</button> 4.v-model   用于在表单上创建双向数据绑定。 v-model只适用在表单控件中.比如：表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。 <input v-model:ko="ko">  v-model修饰符  <1> .lazy  默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。   <input v-model.lazy="msg">  <2> .number  自动将用户的输入值转化为数值类型   <input v-model.number="msg">  <3> .trim  自动过滤用户输入的首尾空格   <input v-model.trim="msg">  5.V-bind 数据绑定 示例1:: <img v-bind:src="srcu" > 示例2: data:{    isRed:true   } <div v-bind:class='{box1:isRed}'></div> <div class="box" v-bind:class='{box2:isgreen}'></div> <button v-on:click="changecolor">切换颜色</button>  changecolor(){                 this.isgreen=!this.isgreen  } 6.v-html、 v-text  data:{  str:"<p>嘿嘿嘿</p>" } <div v-html="str"></div>  <span v-text="msg"></span> 等价于 <span>{{msg}}</span>  7.v-show、v-hide 示例: <h1 v-show="3>2">3大于2，输出!</h1>   //条件为TRUE，输出 <h1 v-show="2>10">不大于10，不输出!</h1>   //条件为false，不输出  注意:  v-if有更高的切换开销  v-show有更高的初始渲染开销。 因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好。v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。  v-show 隐藏 是display:'none';  v-if 隐藏是 visibility:hidden;  1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；    2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。   8.v-slot:在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。 建议看官网的插槽 9.v-cloak:用来保持在元素上直到关联实例结束时进行编译。 示例：  <div id="app" v-cloak>   <div>    {{message}}   </div>  </div>  <script type="text/javascript">   new Vue({     el:'#app',     data:{    message:'hello world'     }   })  </script>    在页面加载时会闪烁，先显示:    <div>      {{message}}  </div>  然后才会编译为：    <div>      hello world!  </div> 10.v-pre: 主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。   <div id="app">   <span v-pre>{{message}}</span>  //这条语句不进行编译   <span>{{message}}</span>  </div>  最终仅显示第二个span的内容 11.v-once: v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。  <span v-once>This will never change:{{msg}}</span>  //单个元素  <div v-once>//有子元素   <h1>comment</h1>   <p>{{msg}}</p>  </div>  <my-component v-once:comment="msg"></my-component>  //组件  <ul>   <li v-for="i in list">{{i}}</li>  </ul>  上面的例子中，msg,list即使产生改变，也不会重新渲染。