vue，vue，vue，vue，vue，

1. vue 的三个特点：
数据双向绑定，组件化，单文件组件

2、vue的基本概念

全局api：  vue.extend, vue.set
实例选项: new Vue()  el,data,compents都是vue实例选项
实例属性和方法： vm.$on,vm.$data  在$都是vue的实例和方法
指令：directive
内置组件：<components></compontents>
<keep-alive></keep-alive> <router-view></router-view>

3、功能接口
v-for = (item,index) in arry;//item 数组的每一项， index：数组的索引；
v-for = (value,key) in obj // value：对象的值，key对象的属性；
数组中不可用的方法：
slice，concat；直接修改数组list[i] = 值，不可以这样直接修改；
Vue.set(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值

// 标签属性和条件渲染
标签属性：  v-bind：href='link";动态绑定；
条件渲染： v-if，v-else，v-show；

// 事件绑定-内置事件绑定，自定义事件绑定
@：click 事件绑定；
自定义事件绑定： 父组件自定义事件   
<my-compented  @my-event='toggle'></my-compented>
子组件触发 my-event 自定义事件；this.$emit('my-event', opation)；
父组件执行toggle 函数；

// 计算属性和数据监听
computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，
         我们computed选项里面的方法读取的是缓存；

// 组件的通信
<p   :is = "动态的组件名"></p> 动态绑定组件

子组件props接受的两种形式：
数组：
     ['first-name','two-name'] ，从父组件传递两个属性值；
     动态展现{{firstName}}
对象：
    {
        'first-name':[number,string]//接受的类型可以是number或者string；
    }

// slot：插槽
父组件插件里面定义的内容放到子组件slot中：
<a-parent>
    <p slot='header'>我是父组件header</p>
    <p slot='footer'>我是父组件footer</p>
</a-parent>
子组件
<b-children>
    <slot name= 'header'></slot>
    <p>it is children content</p>
     <slot name= 'footer'></slot>
</b-children>

//  vue高级功能--过渡和动画
<transition name = 'fade' mode='out-in'>
    // 过渡效果要一定的条件
    多元素过渡：如果标签名相同，我们需要指定一下key，否则没有效果；
    <p v-if = 'ishow' key='1'></p>
    <p v-else key='2'></p>

    <div v-if=''></div> 或者
    <div v-show = ''></div>或者
    <div :is='currentViews'></div>动态组件
</transition>

// 自定义指令：
<input type='text' v-foucus>
directive:{
    foucus: {
        inserted(el,bind){
            el.foucus()
        }
    }
}

4、 环境搭建和常用插件

---- 使用 vue-cli的优势：
    成熟的vue项目架构设计；
    本地测试服务器； 
    集成打包上线方案 webpack

    使用vue-cli的系统要求：
    node.js  (>=4.x);
    git
    一个能使用node的命令行终端 git bash  或者cmd

npm install vue-cli -g :全局安装vue-cli
vue init webpack my-project ：初始化项目
npm install 安装项目依赖

npm run dev：在localhost启动测试服务器；
npm run bulid 生成上线目录（部署）

5. vue-router （设置路由） vue 的插件
 npm install vue-router --save  安装 vue-router

 import VRouter from ‘vue-router’ ： 在入口页引入vue-router；
 Vue.use(VRouter );  Vue.use注册使用vue-router
 引入router，我们需要实例化这个router类，
 let router = new VRouter({ // 定义自己项目的router变量；
})

new Vue({
  el: '#app',
  router:router,
  template: '<APP/>',
  components: {APP}
})