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{
			width: 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;
			width: 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{
		width: 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{
		width: 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{
            width: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)
        }
    });
var 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();//组件优先


Logo

前往低代码交流专区

更多推荐