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