Vue音乐播放器

mixin.js       



export const mixinUse = {
  data() {
    return {
      show: false
    }
  },
  created() {
    this.go()
  },
  methods: {
    go() {
      this.show = !this.show
    }
  },
  mounted() {
    console.log('这是mixin中的mounted()钩子函数,先执行')
  }
}
-----------------------------------------------------------------------------------
hellowWorld.vue    主页面，引用 modelA组件 和 mixin.js




<template>
  <div>
    这是主页面
    <modelA v-show="show"></modelA>
    <div @click="go">点击显示</div>
  </div>
</template>

<script>
  import ModelA from 'components/modela/modela.vue'
  import {mixinUse} from '@/mixin.js'

  export default {
    mixins: [mixinUse],
    components: {
      ModelA
    },
    mounted() {
      console.log('这是主页面的mounted()钩子函数，后执行')
    }
  }
</script>-----------------------------------------------------------------------------------
modelA组件       引用 modelB组件 和 mixin.js




<template>
  <div class="modelA">
    这是model A的内容AAAAAAAAAAA
    <modelB v-show="!show"></modelB>
    <div @click="go" style="margin-top: 20px">点击-显示model'B</div>
  </div>
</template>


<script type="text/ecmascript-6">
  import ModelB from 'components/modelb/modelb.vue'
  import {mixinUse} from '@/mixin.js'

  export default {
    mixins: [mixinUse],
    components: {
      ModelB
    }
  }
</script>

//mixin


const hi = {
  methods: {
    sayHello: function() {
      console.log('hello from mixin!')
    }
  },
  mounted() {
    this.sayHello()
  }
}

-----------------------------------------------------------------------------
//vue instance or component



new Vue({
  el: '#app',
  mixins: [hi],
  methods: {
    sayHello: function() {
      console.log('hello from Vue instance!')
    }
  },
  mounted() {
    this.sayHello()
  }
})
 
// Output in console
> hello from Vue instance!
> hello from Vue instance!

你可能已经注意到这有两个console.log而不是一个——

这是因为第一个函数被调用时，没有被销毁，它只是被重写了。我们在这里调用了两次sayHello()函数。

Vue.mixin({
  mounted() {
    console.log('hello from mixin!')
  }
})
 
new Vue({
  ...
})

main.js中的全局mixin 


Vue.mixin({
  created() {
    if (this.$options['isMixin']) {    // 如果组件中存在isMixin的自定义选项，就往下执行
      console.log('如果组件isMixin选项存在就输出这段文字')
    }
  }
})

---------------------------------------------------------------------------
helloWorld.vue组件


  export default {
    isMixin:{
      a:true   // 这里可以随便写，只要ismixin存在即可
    },
    created() {
      console.log('组件中的console.log')
    },
    mounted() {
      console.log('这是主页面的mounted()生命周期钩子函数，后执行')
    }
  }
</script>


输出结果：
main.js?1c90:19如果组件isMixin选项存在就输出这段文字
HelloWorld.vue?3c12:24组件中的console.log
HelloWorld.vue?3c12:27这是主页面的mounted()生命周期钩子函数，后执行

new Vue({
  customOption: 'foo',      // customOption是实例的初始化选项
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

----------------------------------------------------------------------------------------

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {App},
  author: {
    name: 'wu',
    age: '27'
  },
  created() {
    console.log(this.$options.author, 'this.$options')  
         // => Object {name: "wu", age: "27"} "this.$options"
  }
})

全局自定义指令：Vue.directive('xx', { xx })
获取焦点



// 注册一个全局自定义指令 v-focus，作用：获取焦点

Vue.directive('focus', {

    // inserted钩子函数，作用：当绑定元素插入到 DOM 中
    // 钩子函数参数： el绑定的元素，binding对象(包含name,value,arg等)

  inserted: function (el, binding) {  
    // 聚焦元素
    el.focus()
  }
})


使用： <input v-focus>


 // inserted钩子函数：被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于document 中)。


-----------------------------------------------------------------------

/*简单模式*/
Vue.directive('minLength',function(){
  /*在bind和update阶段触发*/
})

局部自定义指令：组件中接受一个 directives 的选项： (注意：这里是directives，是复数)
改变字体颜色


directives: {
  focus: {
    // 指令的定义---
    inserted: function (el, binding) {}
  }
}
--------------------------------------------------------------------------------------


  export default {
    directives: {   // 局部自定义指令，注意有s
      color: {    // v-name
        inserted: function(el, binding) {  // inserted钩子函数，绑定元素插入DOM中时生效
          el.style = 'color:' + binding.value    // el指令绑定的元素，binding对象，有value等属性
        }
      }
    },
    data() {
      return {
        model: '',
        showOrHide: true,
        color: 'red'
      }
    },
//    mixins: [mixinUse],
    components: {
      ModelA
    },
    isMixin: {
      a: true
    },
    created() {
      console.log('组件中的console.log')
    },
    mounted() {
      console.log('这是主页面的mounted()生命周期钩子函数，后执行')
    },
    methods: {
      xianShi() {
        this.showOrHide = !this.showOrHide
      }
    }
  }




使用： <div v-color="color">v-color指令，绑定元素内的颜色</div>

           data() {
             return {
               color: 'red'
            }

   activated() {
      this.$refs.input2.focus()
    }

tab切换


<template>
  <div class="table">
    <div>这是tab组件页面</div>
    <div>
      <div @click="go('Tab1')">选项一</div>
      <div @click="go('Tab2')">选项二</div>
    </div>
    <component :is="currentTab"></component>    // <component>元素绑定is，让组件共用一个挂载点
  </div>
</template>

<script type="text/ecmascript-6">
  import Tab1 from './tab1.vue'
  import Tab2 from './tab2.vue'
  export default {
    data() {
      return {
        currentTab: 'Tab1'
      }
    },
    components: {
      Tab1,
      Tab2
    },
    methods: {
      go(tab) {
        this.currentTab = tab
      }
    }
  }
</script>