Vue中的指令介绍

vue中的指令

dom元素的行间属性，vue提供了内置的指令，必须以v-开头，后面的值均为变量

v-cloak：

消除页面刚加载时会看到{{}}闪一下的效果，可加给最外层的根元素；

//需要添加对应的css样式
    [v-cloak]{
      display: none;
    }

v-model（表单元素设置了之后会忽略掉value，checked，selected）

让表单元素和数据实现双向绑定（映射关系）

 <input type="text" v-model="msg">

v-text：代替 {{}} 渲染成文本（不会识别html标签）可以防止网速卡慢时{{}}出现在页面上

{{}} 中的值都会解析成文本内容；

{{msg}}等价于<div v-text="msg"><!--此处不能再写内容,防止出现闪的效果--></div>

v-html：把html字符渲染成html

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

v-once：只绑定一次(不能写成v-once=”msg”)

<div v-once>{{msg}}</div>

v-bind：动态地绑定一个或多个特性

可以通过v-bind:src绑定要跳转的资源路径，可简写为:src
:src后面的值就可以是变量、表达式、赋值运算、计算、三元运算符（尽量少写逻辑运算）

v-for：遍历数组、对象、字符串、数字

解决了循环问题，更高效，会在原有的基础上进行修改，会复用原有的结构，不会修改所有DOM

要循环创建哪一个标签就在那一个标签上加v-for，后面的循环最好用in，用of有时会报错循环数组或对象使用v-for指令

  <div v-for="(val,index) in msg">
      {{val,index}}  //msg为数组时，val为数组中的每一项，index为索引
  </div>  
  <div v-for="(value,key,index) in msg">
      {{key}}={{value}}{{index}};  //msg为对象时，key为对象中的每个属性名,value为属性值,index为索引
  </div>  

条件渲染：v-if v-else-if v-else与v-show

<div id="app">
	<button @click="flag=!flag">请点击</button>
	//template标签是vue提供给我们的没有任何实际意义，用来包裹元素用的（v-show不支持template标签）
	<template v-if="flag">
    	<label>登录</label>
    	<input type="text" key="1">//key 管理复用的元素 若不想复用DOM元素,只需要给相应的DOM元素增加不同的key值
	</template>
	<template v-else>
    	<label>注册</label>
    	<input type="text" key="2">
	</template>
</div>

let vm=new Vue({
    el:'#app',
    data:{
	    flag:true
    }
});

v-show

条件满足才让v-show所在标签以及标签内的内容显示（操作的是元素的css样式），不支持 template 标签

 <input type="text" v-show="flag">//flag为true时，input框才显示

v-on：监听 DOM 事件(v-on:click可缩写为@click)

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码（在 methods
对象中定义的方法，而且methods中的方法名不能和data中的变量名一样）

 <div v-on:click ="fn1('zhaosi,$event')">{{msg}}</div>
 <div @click ="fn1('zhaosi,$event')">{{msg}}</div>//上面的简写 方法后面可加（）可不加。不加的话默认会传入事件对象e，加（）代表要传参数，如果要用事件对象，则需要传$event

自定义指令

可通过在vue实例的directives：{}属性中赋予自定义指令意义

<div id="app">
     <button v-color="flag">变色</button>
  </div>
  let vm=new Vue({
     el:'#app',
     data:{
         flag:true
     },
     directives:{//在这里赋予对应自定义指令意义
         //可直接写对应的指令不用写v-
         color(el,val){
         //el和val都是默认给的：el指的是指令所绑定的DOM元素，val是一个对象，里面存储的是有关指令的信息，可用val.value获取到指令绑定的变量（或者表达式）所代表的值，这里就是flag所代表的值 'red'
         el.style.background=val.value;
         }
     }
  });