Vue基础汇总

1)双向绑定：

<div id="app">
    <p>{{message}}</p>
    <input v-model="message"/>
</div>

new Vue({
    el:'#app',
    data:{
        message:'Hello vue.js'
    }
})

2)渲染列表

<div id="app">
    <ul>
        <li v-for="todo in todos">{{todo.text}}</li>
    </ul>
</div>

new Vue({
    el:'#app',
    data:{
        todos:[
            {text:'学习vue'},
            {text:'学习Sass'},
            {text:'学习webpack'}
        ]
    }
})

3)处理用户输入

<div id="app">
    <p>{{message}}</p>
    <input v-model='message'/>
    <button type="button" v-on:click="reverseMessage">反转</button>
</div>

new Vue({
    el:'#app',
    data:{
        message:'hello world'
    },
    methods:{
        reverseMessage:function(){
            this.message=this.message.split('').reverse().join('')
        }
    }
})

4)综合小例子：记事本

<div id="app">
    <input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="请记录未完成的计划" />
    <ul>
        <li v-for="todo in todos">
            <span>{{todo.text}}</span>
            <button type="button" v-on:click="removeTodo($index)">X</button>
        </li>
    </ul>
</div>

new Vue({
    el:'#app',
    data:{
        newTodo:'',
        todos:[
            {text:'学习Vue'},
            {text:'学习Sass'},
            {text:'学习webpack'}
        ]
    },
    methods:{
        addTodo:function(){
            var text = this.newTodo.trim();
            if(text){
                this.todos.push({text:text});
                this.newTodo='';
            }
        },
        removeTodo:function(index){
            this.todos.splice(index,1);
        }
    }
})

5)插值

<div id="app">
    <!-- 单次文本插值 -->
    <p>{{*message}}</p>
    <!-- 解析真的html字符串 -->
    <p>{{{raw_html}}}</p>
    <!-- html特性 -->
    <p id="item-{{id}}">html特性</p>
</div>

new Vue({
    el:'#app',
    data:{
        message:'Hello vue.js',
        raw_html:'<span>原始的html</span>',
        id:'1'
    }
})

6)绑定表达式

<div id="app">
    <!-- javascript表达式 -->
    <p>{{number+1}}</p>
    <p>{{ok ? 'Yes' : 'No'}}</p>
    <p>{{message.split('').reverse().join('')}}</p>
    <!-- 过滤器 -->
    <p>{{name | capitalize}}</p>
</div>

new Vue({
    el:'#app',
    data:{
        number:2,
        ok:false,
        message:'123456789',
        name:'brucee lee'
    }
})

7)指令

<div id="app">
    <!-- 参数 -->
    <a v-bind:href="url" v-on:click="dosomething">指令带参数</a>
    <!-- v-bind、v-on缩写 -->
    <a :href="url" @click="dosomething">指令缩写</a>
</div>

new Vue({
    el:'#app',
    data:{
        url:'http://g.pptv.com'
    },
    methods:{
        dosomething:function(){
            alert(this.url);
        }
    }
})

8)计算属性

<div id="app">
    <p>a={{a}},b={{b}}</p>
    <p>{{fullName}}</p>
</div>

new Vue({
    el:'#app',
    data:{
        a:1,
        firstName:'Micro',
        lastName:'Jodon'
    },
    computed:{
        b:function(){
            return this.a + 1;
        },
        /*fullName:function(){
            return this.firstName + ' ' + this.lastName;
        }*/
        fullName:{
            get:function(){
                return this.firstName + ' ' + this.lastName;
            },
            set:function(newValue){
                var names = newValue.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length-1];
            }
        }
    }
})

9)class与style绑定

.static{
     200px;
    margin: 20px auto;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 18px;
}
.class-a{
    background-color: #f00;
}
.class-b{
    color: #fff;
}
.class-c{
    padding: 5px 0;
}

<div id="app">
    <!-- 绑定class:对象语法 -->
    <p class="static" v-bind:class="{'class-a':isA,'class-b':isB}">绑定class</p>
    <p class="static" v-bind:class="classObject">绑定class</p>
    <!-- 绑定class:数组语法 -->
    <p class="static" v-bind:class="[classA,classB,classC]">绑定class</p>
    <p class="static" v-bind:class="[classA,{ 'class-b': isB,'class-c': isC}]">绑定class</p>
    <!-- 绑定style:对象语法 -->
    <p class="static" v-bind:style="styleObject">绑定style</p>
    <!-- 绑定style:数组语法 -->
    <p class="static" v-bind:style="[styleObjectA,styleObjectB]">绑定style</p>
</div>

new Vue({
    el:'#app',
    data:{
        classA:'class-a',
        classB:'class-b',
        classC:'class-c',
        isA:true,
        isB:false,
        isC:true,
        classObject:{
            'class-a':true,
            'class-b':true
        },
        styleObject:{
            color:'red',
            fontSize:'13px',
            backgroundColor:'#00f'
        },
        styleObjectA:{
            color:'green',
            fontSize:'16px'

        },
        styleObjectB:{
            backgroundColor:'#f0f',
            transform:'rotate(7deg)'
        }
    }
})

10)条件渲染

<div id="app">
    <h1 v-if="Math.random() > 0.5">对不起！</h1>
    <h1 v-else>没关系</h1>

    <template v-if="ok">
        <h1>标题</h1>
        <p>段落1</p>
        <p>段落2</p>
    </template>

    <h1 v-show="isShow">Hello!</h1>

    <custom-component v-show="condition"></custom-component>
    <p v-show="!condition">这可能也是一个组件</p>
</div>

// 定义
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
});

// 注册
Vue.component('custom-component', MyComponent);
new Vue({
    el:'#app',
    data:{
        ok:true,
        isShow:false,
        condition:true
    },

})

11)列表渲染

<div id="app">
    <!-- 数组v-for -->
    <ul>
        <template v-for="item in items" track-by="_uid">
            <li>{{ parentMessage }} - {{ $index }} - {{ item.message }}</li>
            <li class="divider"></li>
        </template>
    </ul>
    <!-- 对象v-for -->
    <ul>
        <li v-for="(key,val) in object">{{key}} : {{val}}</li>
    </ul>
    <!-- 值域v-for -->
    <span v-for="n in 10">{{ n }}</span>
</div>

ul{
    list-style: none;
     150px;
}
.divider{
    height: 2px;
    background-color: #00f;
}
span{
    padding: 0 2px;
}

var vm=new Vue({
    el:'#app',
    data:{
        parentMessage:'水果',
        items:[
            { _uid:'001',message:'香蕉'},
            { _uid:'002',message:'橘子'}
        ],
        object:{
            FirstName: 'John',
            LastName: 'Doe',
            Age: 30
        }
    }
});
//变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vm.items.push({message:'苹果'},{message:'梨子'});//推入两项
vm.items.shift();//取出第一项
//非变异方法：filter(), concat(), slice(),可用替换数组来修改原数组
vm.items=vm.items.filter(function (item) {
  return item.message.match(/子/);
})

12)方法与事件处理器

<div id="app">
    <!-- 内联语句处理器 -->
    <button type="button" v-on:click="say('Hello',$event)">提交</button>
    <!-- 事件修饰符 -->
    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

    <!-- 添加事件侦听器时使用 capture 模式 -->
    <div v-on:click.capture="doThis">...</div>

    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>

    <!-- 按键修饰符 -->
    <input v-on:keyup.enter="submit">

</div>

var vm=new Vue({
    el:'#app',
    methods:{
        say:function(msg,event){
            alert(msg+","+event.target.tagName);
             event.preventDefault();
        }
    }
});

13)表单控件绑定

<div id="app">
    <!-- 多行文本 -->
    <span>这是您的评论：</span>
    <p>{{message}}</p>
    <textarea v-model="message" placeholder="请输入您的评论"></textarea>
    <br>
    <!-- 单选框 -->
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br>
    <!-- 多个单选框 -->
    <input type="checkbox" id="jack" value="马云" v-model="checkedNames">
    <label for="jack">马云</label>
    <input type="checkbox" id="john" value="马化腾" v-model="checkedNames">
    <label for="john">马化腾</label>
    <input type="checkbox" id="mike" value="李彦宏" v-model="checkedNames">
    <label for="mike">李彦宏</label>
    <br>
    <span>选中的值: {{ checkedNames | json }}</span>
    <br>
    <!-- 单选钮 -->
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>选中的值: {{ picked }}</span>
    <br>
    <!-- 下拉列表单选 -->
    <select v-model="selected">
      <option selected>湖北</option>
      <option>北京</option>
      <option>上海</option>
    </select>
    <span>选中的值: {{ selected }}</span>
    <br>
    <!-- 下拉列表多选 -->
    <select v-model="selecteds" multiple>
        <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
    </select>
    <br>
    <span>选中的值: {{ selecteds | json }}</span>
    <br>

    <!--绑定动态值到Vue实例-->

    <!-- 选中时为a，未选中时为b -->
    <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>
    <span>选中时的值：{{toggle}}</span>
    <br>

    <input type="radio" v-model="pick" v-bind:value="c">男
    <input type="radio" v-model="pick" v-bind:value="d">女
    <span>选中时的值：{{pick}}</span>

    <!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input v-model="msg" lazy>
    <!-- 设置转换为数值类型 -->
    <input v-model="age" number>
    <!-- 设置延时 -->
    <input v-model="msg" debounce="500">
</div>

var vm=new Vue({
    el:'#app',
    data: {
        checkedNames: [],
        options:[
            {text:'南京',value:'南京'},
            {text:'苏州',value:'苏州'},
            {text:'无锡',value:'无锡'}
        ],
        a:'选中',
        b:'未选中',
        c:'男',
        d:'女'
  }
});

14)css过渡

<div id="app">
    <div v-if="show" transition="expand">Hello1</div>
    <div v-if="show" :transition="transitionName">Hello2</div>
    <button type="button" v-on:click="toggle">过渡效果演示</button>
</div>

        /* 必需 */
.expand-transition {
  transition: all 0.5s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
.fade-transition{
    transition: all 0.5s ease;
    height: 30px;
    padding: 10px;
    background-color: #2df;
    overflow: hidden;
}
.fade-enter, .fade-leave {
  padding: 0 10px;
  opacity: 0.5;
}

var vm=new Vue({
    el:'#app',
    data: {
        show:true,
        transitionName:'fade'
    },
    methods:{
        toggle:function(){
            if(this.show){
                this.show=false;
            }else{
                this.show=true;
            }

        }
    },
    transitions: {
        expand: {
          beforeEnter: function (el) {
            el.textContent = 'beforeEnter'
          },
          enter: function (el) {
            el.textContent = 'enter'
          },
          afterEnter: function (el) {
            el.textContent = 'afterEnter'
          },
          beforeLeave: function (el) {
            el.textContent = 'beforeLeave'
          },
          leave: function (el) {
            el.textContent = 'leave'
          },
          afterLeave: function (el) {
            el.textContent = 'afterLeave'
          }
        }
    }
});

15)css自定义过渡（注：与animats.css配合使用）

<div id="app">
    <div v-show="ok" class="animated" transition="bounce">只有我最摇摆</div>
    <button type="button" v-on:click="toggle">演示过渡效果</button>
</div>

.animated{
     150px;
    background-color: #2df;
    height: 30px;
    padding: 10px;
}

var vm=new Vue({
    el:'#app',
    data: {
        ok:true
    },
    methods:{
        toggle:function(){
            if(this.ok){
                this.ok=false;
            }else{
                this.ok=true;
            }
        }
    },
    transitions: {
        bounce: {
          enterClass: 'bounceInLeft',
          leaveClass: 'bounceOutRight'
        }
    }
});

16)CSS动画（注：与animats.css配合使用）

<div id="app">
    <div v-show="ok" class="animated" transition="bounce">看我变一个</div>
    <button type="button" v-on:click="toggle">演示动画效果</button>
</div>

.animated{
     150px;
    background-color: #2df;
    height: 30px;
    padding: 10px;
}
.bounce-transition {
  display: inline-block; /* 否则 scale 动画不起作用 */
}
.bounce-enter {
  animation: bounce-in .5s;
}
.bounce-leave {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}

var vm=new Vue({
    el:'#app',
    data: {
        ok:true
    },
    methods:{
        toggle:function(){
            if(this.ok){
                this.ok=false;
            }else{
                this.ok=true;
            }
        }
    }
});

17)Javascript过渡

<div id="app">
    <p transition='fade'>什么和什么？</p>
</div>

.fade-transition{
    transition: all 0.5s ease;
    height: 30px;
    padding: 10px;
    background-color: #2df;
    overflow: hidden;
}

var vm=new Vue({
    el:'#app'
});
vm.transition('fade', {
  css: false,
  enter: function (el, done) {
    // 元素已被插入 DOM
    // 在动画结束后调用 done
    $(el)
      .css('opacity', 0)
      .animate({ opacity: 1 }, 1000, done)
  },
  enterCancelled: function (el) {
    $(el).stop()
  },
  leave: function (el, done) {
    // 与 enter 相同
    $(el).animate({ opacity: 0 }, 1000, done)
  },
  leaveCancelled: function (el) {
    $(el).stop()
  }
})

18)渐进过渡

<div id="example-1">
    <input v-model="query">
    <ul>
        <li v-for="item in list | filterBy query" transition="staggered" stagger="100">
            {{item.msg}}
        </li>
    </ul>
</div>

#example-1{
    200px;
    margin:20px auto;
    font-size:14px;
    color:#ff6600;
}
ul {
    padding-left: 0;
    font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 25px;
}
.bounceInLeft, .bounceOutRight {
    opacity: 0;
    height: 0;
}

    var exampleData={
        query: '',
        list: [
            { msg: 'Bruce Lee' },
            { msg: 'Jackie Chan' },
            { msg: 'Chuck Norris' },
            { msg: 'Jet Li' },
            { msg: 'Kung Fury' }
        ]
    };
    var exampleVM = new Vue({
        el:'#example-1',
        data:exampleData,
        transitions:{
            staggered:{
                enterClass:'bounceInLeft',
                leaveClass: 'bounceOutRight'
            }
        }
    });

/*    exampleVM.transition('stagger', {
        stagger: function (index) {
            // 每个过渡项目增加 50ms 延时
            // 但是最大延时限制为 300ms
            return Math.min(300, index * 50)
        }
    })*/

19)组件

<div id="example">
    <my-component></my-component>
</div>

//定义
/*var myComponent=Vue.extend({
    template:'<div>A custom component!</div>'
});*/
//注册
//Vue.component('my-component',myComponent);
//在一个步骤中定义与注册
Vue.component('my-component',{
    template:'<div>A custom component!</div>'
});
//创建根实例
new Vue({
    el:'#example'
});

20)组件局部注册

<div id="example">
    <parent-component></parent-component>
</div>

//定义
/*var Child=Vue.extend({
    template:'<div>A child component!</div>'
});*/
var Parent=Vue.extend({
    template:'<div>A parent component!<my-component></my-component></div>',
    components:{
        // <my-component> 只能用在父组件模板内
        'my-component':{
            template:'<div>A child component!</div>'
        }
    }
});
// 注册父组件
Vue.component('parent-component', Parent);
//创建根实例
new Vue({
    el:'#example'
});

21)使用props传递数据

<div id="example" class="demo">
    <input type="text" v-model="parentMessage"/><br>
    <child v-bind:my-message="parentMessage"></child>
    <!-- 双向绑定 -->
    <child :msg.sync="parentMessage"></child>

    <!-- 单次绑定 -->
    <child :msg.once="parentMessage"></child>
</div>

.demo{
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 25px 35px;
    margin-bottom: 40px;
    font-size: 1.2em;
    line-height: 1.5em;
}

new Vue({
    el:'#example',
    data:{
        parentMessage:'Message from parent'
    },
    components:{
        child:{
            props:['myMessage'],
            template:'<span>{{myMessage}}</span>'
        }
    }
});

22)prop验证

<div id="example" class="demo">
    <child></child>
</div>

.demo{
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 25px 35px;
    margin-bottom: 40px;
    font-size: 1.2em;
    line-height: 1.5em;
}

new Vue({
    el:'#example',
    components:{
        child:{
            props: {
                // 基础类型检测 （`null` 意思是任何类型都可以）
                propA: Number,
                // 多种类型 (1.0.21+)
                propM: [String, Number],
                // 必需且是字符串
                propB: {
                    type: String,
                    required: true
                },
                // 数字，有默认值
                propC: {
                    type: Number,
                    default: 100
                },
                // 对象/数组的默认值应当由一个函数返回
                propD: {
                    type: Object,
                    default: function () {
                        return { msg: 'hello' }
                    }
                },
                // 指定这个 prop 为双向绑定
                // 如果绑定类型不对将抛出一条警告
                propE: {
                    twoWay: true
                },
                // 自定义验证函数
                propF: {
                    validator: function (value) {
                        return value > 10
                    }
                },
                // 转换函数（1.0.12 新增）
                // 在设置值之前转换值
                propG: {
                    coerce: function (val) {
                        return val + ''; // 将值转换为字符串
                    }
                },
                propH: {
                    coerce: function (val) {
                        return JSON.parse(val); // 将 JSON 字符串转换为对象
                    }
                }
            },
            template:'<span>hello world!</span>'
        }
    }
});

23)父子组件通信

<!--子组件模板-->
<template id="child-template">
    <input type="text" v-model="msg"/>
    <button type="button" v-on:click="notify">派发事件</button>
</template>
<!--父组件模板-->
<div id="events-example" class="demo">
<p>Messages:{{ messages | json }}</p>
    <child v-on:child-msg="handleIt"></child>
</div>

.demo{
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 25px 35px;
    margin-bottom: 40px;
    font-size: 1.2em;
    line-height: 1.5em;
}

// 注册子组件,将当前消息派发出去
Vue.component('child',{
    template:'#child-template',
    data:function(){
        return {msg:'hello'}
    },
    methods:{
        notify:function(){
            if(this.msg.trim()){
                this.$dispatch('child-msg',this.msg);
                this.msg='';
            }
        }
    }
});
// 初始化父组件,收到消息时将事件推入一个数组
var parent=new Vue({
    el:'#events-example',
    data:{
        messages:[]
    },
    methods:{
        handleIt:function(msg){
            this.messages.push(msg);
        }
    }
    // 在创建实例时 `events` 选项简单地调用 `$on`
    /*events:{
        'child-msg':function(msg){
            this.messages.push(msg);
        }
    }*/
})

24)自定义指令-基础

<div id="demo" v-demo:hello.a.b="msg"></div>

Vue.directive('demo', {
    bind: function () {
        console.log('demo bound!')
    },
    update: function (value) {
        this.el.innerHTML =
                'name - '       + this.name + '<br>' +
                'expression - ' + this.expression + '<br>' +
                'argument - '   + this.arg + '<br>' +
                'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
                'value - '      + value
    }
});
var demo = new Vue({
    el: '#demo',
    data: {
        msg: 'hello!'
    }
})

25)自定义指令-高级选项

<div id="demo" >
    <!--对象字面量-->
    <div v-demo-1="{ color: 'white', text: 'hello!' }"></div>
    <!--字面修饰符-->
    <div v-demo-2.literal="foo bar baz"></div>
    <!--元素指令-->
    <my-directive></my-directive>
    <!--高级选项-params-->
    <div v-example a="hi"></div>
</div>

Vue.directive('demo-1', function(value){
    console.log(value.color);
    console.log(value.text);
});
Vue.directive('demo-2',function(value){
    console.log(value);
});
Vue.elementDirective('my-directive',{
    bind:function(){
        console.log(this.el);
    }
});
Vue.directive('example',{
    params:['a'],
    bind:function(){
        console.log(this.params.a);
    }
});
Vue.directive('two', {
    twoWay: true,
    bind: function () {
        this.handler = function () {
            // 将数据写回 vm
            // 如果指令这样绑定 v-example="a.b.c"
            // 它将用给定值设置 `vm.a.b.c`
            this.set(this.el.value)
        }.bind(this);
        this.el.addEventListener('input', this.handler);
    },
    unbind: function () {
        this.el.removeEventListener('input', this.handler)
    }
});
vm=new Vue({
    el: '#demo'
});

26)自定义过滤器

<div id="demo" class="demo">
    <!--基础过滤器-->
    <span v-text="message | reverse"></span><br>
    <span v-text="message | wrap 'before' 'after'"></span><br>
    <!--双向过滤器-->
    <input type="text" v-model="money | currencyDisplay"/>
    <p>ModelValue:{{money | currencyDisplay}}</p>
    <!--动态参数-->
    <input v-model="userInput"/>
    <span>{{msg | concat userInput}}</span>
</div>

.demo{
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 25px 35px;
    margin-bottom: 40px;
    font-size: 1.2em;
    line-height: 1.5em;
}

Vue.filter('reverse',function(value){
    return value.split('').reverse().join('');
});
Vue.filter('wrap',function(value,begin,end){
   return begin+' '+value+' '+end;
});
Vue.filter('currencyDisplay',{
    // model -> view
    // 在更新 `<input>` 元素之前格式化值
    read:function(val){
        return '$'+val.toFixed(2)
    },
    // view -> model
    // 在写回数据之前格式化值
    write: function(val, oldVal) {
        var number = +val.replace(/[^d.]/g, '')
        return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
    }
});
Vue.filter('concat',function(value,input){
    return value+input;
})
new Vue({
    el:'#demo',
    data:{
        message:'abc',
        money:123.45,
        msg:'hello',
        userInput:'hi'
    }
});

27)混合

<div id="demo" class="demo">

</div>

.demo{
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 25px 35px;
    margin-bottom: 40px;
    font-size: 1.2em;
    line-height: 1.5em;
}

var myMixin={
    created:function(){
        this.hello();
    },
    methods:{
        hello:function(){
            console.log('hello from mixin!');
        }
    }
};
// 定义一个组件，使用这个混合对象
var Component = Vue.extend({
    mixins: [myMixin]
});
var component = new Component();
new Vue({
    el:'#demo'
});

28)混合-选项合并

<div id="demo" class="demo">

</div>

.demo{
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 25px 35px;
    margin-bottom: 40px;
    font-size: 1.2em;
    line-height: 1.5em;
}

var mixin={
    created:function(){
        console.log('mixin hook called');
    },
    methods: {
        foo: function () {
          console.log('foo');
        },
        conflicting: function () {
          console.log('from mixin');
        }
    }
};
var vm=new Vue({
    el:'#demo',
    mixins:[mixin],
    created:function(){
        console.log('component hook called');
    },
    methods:{
        bar: function () {
          console.log('bar');
        },
        conflicting: function () {
          console.log('from self');
        }
    }
});
vm.foo();
vm.bar();
vm.conflicting();//组件优先