vue指令（组件）的基本使用一

接触过angular 的小伙伴们可能觉得学起vue的指令更加简单（个人认为），因为很相似，但一些语法略有不同，记录一下遇到的问题

首先来说一下vue2.0以后很多语法发生变化，但我们往往搜索到的文章是用1.0的语法，这时可能就要多注意一下新语法是如何写的；例如 v-for 的index属性，在之前是$index,

但你在2.0中使用就会报$index is not defined;

一、v-for

<ul>  
         <li @click="toggle(tab.view,index)" v-for="tab in tabs" v-bind:class="{active: index==active}">
        {{tab.type}}  
        </li> 

<ul/>

解决了$index,发现还是报错，语法写的有问题，index也找不到；后来想到是不是没有引入index，解决

<ul>  
         <li @click="toggle(tab.view,index)" v-for="(tab,index) in tabs" v-bind:class="{active: index==active}">
        {{tab.type}}  
        </li> 

<ul/>

犯这个错误可能是受angular 影响，我记得 angular的ng-repeat  的$index并不需要引入，注意吧；

v-for 除了这种写法，还可以是v-for="((key,value)) in tabs" 与angular 类似；

二、v-bind:class 或：class 

1、对象语法

支持某个css实现与否，值为boolean值，true或false,等同ng-class  v-bind:class="{active: index==active}"，支持多个class属性v-bind:class="{active: index==active，name:true(或者boolean变量)}"

2、数组语法（官网）-没用过

<div v-bind:class="[activeClass, errorClass]"></div>

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

三、v-bind:src 图片路径   这里vue2.0和1有区别，注意（1.0为src）

四、v-style（官网）与na-class雷同

1、对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {activeColor: 'red',fontSize: 30}

或者另外的更好

<div v-bind:style="styleObject"></div>

data: {styleObject: {color: 'red',fontSize: '13px'}}

2、数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

多个数组对象

五、v-if \v-show 区别无非一个是移除元素，一个是display:none，值都为boolean值

六、v-on:click （还有其他）等事件

七、绑定基本数据   {{}}与angular 相似，出现加载{{}}问题，angular 用ng-bind=""绑定，vue 我还没试，貌似有cloak方法

八、表单组件 

v-model 与ng-model 类似， 绑定data,即可实现双向绑定；

九、过滤器

用于对数据进行处理（有全局和局部两种）

1、局部（用|）

{{ message | capitalize }}

你可以在一个组件的选项中定义本地的过滤器

filters: {

capitalize: function (value) {

 if (!value) return ''

value = value.toString()

return value.charAt(0).toUpperCase() + value.slice(1)

}

}

也可实现函数传参

{{ message | filterA('arg1', arg2) }}

全局过滤器还没用到；就这些吧，都是基础了；