vue基础指令

指令

不常用

v-html

可以解析html标签

v-text

所有内容都视为文本，不做解析

v-cloak

在页面开始渲染时。{{}}语法有可能没有被解析就渲染了，可以配合[v-cloak]:display:none一起使用，渲染后v-cloak属性会被去除。

v-pre

v-once

只会渲染一次，数据更新也不会再次渲染

常用

{{}}语法

功能与v-text一样，可以函数调用，三元运算符

v-model

v-model上面有介绍它的双向绑定功能，对于v-model指令，vue限定只能对表单控件进行绑定，常见的有<input>、<select>、<textarea>等，v-model默认绑定的是input事件，v-model:lazy 是change事件。

v-bind

对于html标签的text、value等属性，Vue里面提供了v-text、v-model去绑定。但是对于除此之外的其他属性呢，这就要用到接下来要讲的v-bind指令了。博主的理解是v-bind的作用是绑定除了text、value之外的其他html标签属性，常见的比如class、style、自定义标签的自定义属性等

用于高阶组件的自定义属性绑定
v-bind

<children v-bind=‘attrObject’></children>

data() {
  return {
    attrObject:{
    src:'http://baidu.com',
    abc:'123',
    href:'http://baidu.com'
    }
  }
}

class动态绑定的几种方式

1.对象方法

• 简单的绑定

:class="{ 'active': isActive, 'sort': isSort }"

• 判断是否绑定

:class="{'active':isActive==-1, 'sort': isSort }}" 

• 对象放data里

:class="classObject"

data() {
  return {
    classObject:{ active: true, sort:false }
  }
}

• 使用computed属性

 :class="classObject"
data() {
  return {
    isActive: true,
    isSort: false
  }
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      sort:this.isSort
    }
  }
}

2.数组方法

• 简单数组

:class="[isActive,isSort]"
data() {
  return{
    isActive:'active',
    isSort:'sort'
 }
}

• 判断绑定

:class="[isActive?'active':'']"

• 多个绑定

:class="[{ active: isActive }, 'sort']"

style动态绑定的几种方式
1.对象语法

<div id="box" :style="{color:activeColor, 'font-size':size}">红嘴绿鹦哥</div>

<div id="box" :style="{color:activeColor, fontSize：size}">红嘴绿鹦哥</div>

备注：font-size这种语法必须要加’',否则要报错，也可以直接使用小驼峰语法

样式对象放data里

<div id="box" :style="styleObject">红嘴绿鹦哥</div>

var vm= new Vue({

    el:‘#box‘,

    data:{

        styleObject:{

            color:‘red‘,

            fontSize:‘30px‘

        }

    }

})

2.数组语法

```javascript
<div class="box" :style="[styleObjectA, styleObjectB]">生命不息，奋斗不止</div>

var vm2= new Vue({

    el:‘.box‘,

    data:{

        styleObjectA:{

            fontSize:‘36px‘,

            color:‘blue‘

        },

        styleObjectB:{

            textDecoration:‘underline‘

        }

    }

})

#### v-if
用于展示隐藏，底层原理是操控元素的创建和销毁
#### v-show
用于展示隐藏，底层原理是操作dispaly属性，是否显示该元素如果值是false对应的Dom标签还是会渲染到页面上面   只是将该标签的css属性display设为none而已而如果你用v-if值，bool值为false的时候整个dom树都不被渲染到页面上面。从这点上来说看，如果你的需求是需要经常切换元素的显示和隐藏，使用v-show效率更高，而如果你只做一次条件判断，使用v-if更加合适。
#### v-else
 v-if可以单独使用但是v-else的前面必须要有一个v-if的条件或者v-show指令  这个和我们的编程原理是一样的
#### v-on
对于事件的监听和绑定，jquery里面最常用的就是on了。同样，在Vue里面，v-on指令用来绑定标签的事件，其语法和v-bind基本类似。
#### v-for
除了基础数据之外，还支持Json数组的绑定。

在v-for里面，可以使用<template> 标签来渲染多个元素块，下面就基于bootstrap样式使用v-for、v-if、v-else等实现一个简单的demo。