var vm = new ({ //创建vue实例，接管页面某部分的DOM的渲染，根实力  
    el: '#app', //定义vue实例接管的DOM的标签  
    components: { //定义新的子组件  
        item: item  
    },  
    data: { //存放数据  
        list: [], //遍历的list，调用方式v-for="item in list"  
        inputValue: '', //数据双向绑定，v-model=""  
    }
    template: "", //html标签  
    methods: { //定义函数  
        heanleItemClick: function () {  
            // alert("click");  
        }  
    },
    computed: { //计算属性，缓存机制，相比于方法性能更高  
        fullName: function () {  
            return this.firstName + " " + this.lastName  
        }  
        get:function () {}, //输出  
        set: function (value) {}, //获取  
    },   
    watch: {}, //侦听器   
})  

Vue.prototype.bus = new Vue() //给vue组件的prototype挂载bus属性，每一个vue实例被创建时都会存在bus属性  
//定义新组件，子组件不允许修改父组件传递的内容（单向数据流）  
<item content=""> //使用方式，content="" 传入字符串，:content="" 传入js表达式  
    <p slot="name">hello</p> //插槽  
    <template slot-scope="props"> //作用域插槽，必须用 template ，必须声明从子组件接收的数据存放位置 
        <li>{{props.item}}--hello</li> //子组件显示模板信息  
    </template>  
</item>  
//全局组件  
Vue.component('item',{ //创建模块实例  
    props: [""], //接收传入的值  
Or  props: {
        content: [ Number , String] //校验传入的参数类型  
Or      content: { //校验  
            type: String, //验证传入的参数类型  
            required: true, //必须有传入值  
            default: 'default value', //默认值  
            validator: function (value) { //校验器，校验传入值大于5  
                return (value.length > 5)  
            }  
        }  
    }  
    data: function () { //子组件data只能是函数形式  
        return {  
            content: "this is content"  
        }  
    },  
    methods: {  
        handleClick: function () {  
            this.$emit("sendOut", this.index);  //子组件向外部发送信息    
        }  
    }  
    template: `<div>  //定义实例模板
                Hello world  
                <slot name="name">默认内容</slot> //插槽的使用  
               </div>`,   
})  
//局部组件  
//定义子组件  
var item = {
    item: "<div></div>"
}

//显示隐藏渐变  
<style type="text/css">  
    .fade-enter, .fade-leave-to { //fade-enter开始出现时 //fade-leave-to执行消失时  
        opacity: 0;  
    }  
    .fade-enter-active, .fade-leave-active { //全称存在监控opacity变化  
        transition: opacity 3s;  
    }  
Or    
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
    .active{
        transform-origin: left center;
        animation: bounce-in 1s;
    }
    .leave{
        transform-origin: left center;
        animation: bounce-in 1s reverse;
    }
    //animation-direction: reverse; //动画效果反向      
</style>  
//使用方式  
<transition name="fade"> //必须使用 transition 标签嵌套  
    <div v-if="">hello world</div>  
</transition>  
Or
<transition  
    type="transition" //自定义动画时长元素  
    :duration="5000" //自定义动画时长  
Or  :duration="{enter：5000, leave :10000}"  
    name="fade"  
    appear //刷新时的动画  
    appear-active-class="active"  
    enter-active-class="active"  
    leave-active-class="leave"  
> //自定义css命名规范  
    <div v-if="show">Hello world</div>  
</transition>

npm install fastclick --save