{text:"apple4"}

                ]

            }

        })

**关键点：使用 v-bind 指令将属性传到每一个重复的组件中，缤纷切让它等于遍历出来的元素。

Vue.js脚手架使用

webstorm eslint配置：推荐一篇文章：http://blog.csdn.net/whitehack/article/details/52422873

src目录是我们要开发的目录：

assets: 放置一些图片，如logo等。

components: 目录里面放了一个组件文件，可以不用。

App.vue.js: 项目入口文件，我们也可以直接将组建写这里，而不使用 components 目录。

main.js: 项目的核心文件。

**使用要点：在App.Vue.js中导入components组件文件夹下写好的组件，在模板里使用组件，导出默认，导出的名字为模板最外层元素的id或者class名称，components写组件名称；单独的组件写好后也要记得导出默认，导出的名字为模板最外层元素的id或者class名称。[这些都遵循了ES6语法格式]

<script>

// 导入组件

import Hello from './components/Hello'

export default {

  name: 'app',

  components: {

    Hello

  }

}

</script>

**在我第一次使用时eslint报错：

错误1：导入的地址必须使用单引号

错误2：在从导出时components属性冒号之后要加空格，再写大括号

错误3：components属性下写组件名称，应该缩进4个空格

错误4：在Apple.vue中多写了个s[个人不细心，此类错误尽量避免]

当这些错误都修改完成之后，页面正常显示出来了：[eslint检查比较严格，如果想要关闭可以自行百度]

Vue.js具体使用

Vue.js 条件

v-if、v-else-if、v-else

条件语句的作用：通过判断不同的条件，显示不同的区块，类似php条件语句的用法，同样可以嵌套v-else-if（2.1.0新增）。

v-show

控制显示隐藏，不支持<template>语法,也不支持 v-else。

Vue.js循环

用法类似for in循环，所以指令为v-for，(这里切记循环列表项写在循环的单个项目元素上)，支持template模版使用。

用法三种：

item in items

(value, key) in object

(value, key, index) in object

这里有一个特殊的用法：

可以迭代整数：

<div id="app">

  <ul>

    <li v-for="n in 10">

     {{ n }}

    </li>

  </ul>

</div>

<script>

new Vue({

  el: '#app'

})

</script>

输出：

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

Vue.js 计算属性（对比angular和react的优点之一）

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed 默认有getter方法，可以自己定义一个setter方法

Vue.js 样式绑定

v-bind: 可以绑定如下几种：

对象语法

数组语法

Vue.js class绑定：v-bind：class=”{ }”

Vue.js style(内联样式): v-bind:style=”{ }”

示例：

<div id="app12">

        <div v-bind:class="[isActive?active:'',errorClass]">我绑定了不同的class</div>

        <div v-bind:class="{active:isActive,errorClass:hasError}">我绑定了不同的class</div>

        <div v-bind:class="classObject">我绑定了不同的class</div>

        <div v-bind:class="{active:isActive}">我绑定了不同的class</div>

</div>

var app12 = new Vue({

            el:"#app12",

            data:{

                active:"active",

                errorClass:"errorClass",

                isActive:true,

                classObject: {

                    'active': true,

                    'errorClass': true

                },

                hasError:true

            }

        });

 

**注意：

以上从上到下依次为：

u 数组绑定class,数组绑定的class，数组元素是对象的名称，在vue data里要写对象的值即真正的class名才可以

u 多个对象属性绑定class,