How to use vue - 10 common examples

import Vue from 'vue'

import Node from '@/lib/Node'
import Tree from '@/lib/Tree'

import objectToNode from '@/utils/objectToNode'

const vm = new Vue()
vm.opts = {}

const tree = new Tree(vm)

describe('Lib: Node.js', () => {
  it('node constructor arguments', () => {
    expect(() => { new Node() }).toThrowError('Node can not be empty')
    expect(() => { new Node(null, {}) }).toThrowError('Node must has a Tree context!')

    // TODO: whether to check Tree instance?
  })

  it('node\'s specified and auto generated id', () => {
    const node0 = new Node(tree, { id: 10 })
    const node1 = new Node(tree, {})

it('should be able to bind scroll function', async () => {
    const res = Vue.compile('<div></div>')
    const vm = new Vue({
      data () {
        return {
          msg: 'hello'
        }
      },
      directives: {scroll},
      methods: {
        onScroll () {
          // TODO
        }
      },
      render: res.render,
      staticRenderFns: res.staticRenderFns
    })
    vm.$mount()

it('directive with invalid modifiers should be ok', async () => {
    // invalid modifier should be ok
    const res = Vue.compile('')
    const vm = new Vue({
      data () {
        return {
          msg: 'title'
        }
      },
      render: res.render,
      staticRenderFns: res.staticRenderFns
    }).$mount()
    await vm.$nextTick()
    const trigger = vm.$el
    utils.triggerEvent(trigger, 'click')
    await utils.sleep(300)
    const tooltip = document.querySelector('.tooltip')
    expect(tooltip).to.exist
    expect(tooltip.querySelector('.tooltip-inner').innerText).to.equal('title')

[types.SYNC_ADD_TASK] (state, task) {
    const tasksCollection = Vue.prototype.$db.syncTaskCollection
    task = _prepareTask(task)
    tasksCollection.setItem(task.task_id.toString(), task, (err, resp) => {
      if (err) console.error(err)
      Vue.prototype.$bus.$emit('sync/PROCESS_QUEUE', { config: rootStore.state.config }) // process checkout queue
      Logger.info('Request added to sync queue: '+ task.url, { tag: 'sync', context: { label: 'Task ID', value: task.task_ud }})
    }).catch((reason) => {
      console.error(reason) // it doesn't work on SSR
    })
  }
}

import 'nprogress/nprogress.css'
import nprogress from 'nprogress'

import 'animate.css/animate.css'

import bsComponents from './components'

import api from './api'

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))

Vue.config.productionTip = false

Wavas.init()

Vue.swal = Vue.prototype.$swal = swal
Vue.nprogress = Vue.prototype.$nprogress = nprogress
Vue.api = Vue.prototype.$api = api
Vue.store = store

Vue.use(BootstrapVue)
Vue.use(bsComponents)

/* eslint-disable no-new */
const vue = new Vue({
  components: { App },
  router,
  store,
  template: ''
}).$mount('#app')

Vue.eventBus = Vue.prototype.$eventBus = vue

/**
             * When the user logs in, set the whole app to be "authenticated" and initialize it.
             */
            'user:loggedin': function () {
                this.authenticated = true;
                this.init();
            },
        },
    };

    // Register our custom filters…
    Vue.filter('filterSongBy', filterSongBy);
    Vue.filter('caseInsensitiveOrderBy', caseInsensitiveOrderBy);

    // …and the global directives
    Vue.directive('koel-focus', focusDirective);

el.addEventListener('focus', (evt) => {
            if (el.value === '0' || el.value === '0.00') {
                el.dataset.originalValue = el.value;
                el.value = '';
            }
        });

        el.addEventListener('blur', (evt) => {
            if (el.value === '') {
                el.value = el.dataset.originalValue || '0';
            }
        });
    },
});

Vue.directive('click-outside', {
    inserted(el, binding) {
        const handler = (evt) => {
            if (el.contains(evt.target)) {
                return;
            }
            if (binding && typeof binding.value === 'function') {
                binding.value();
            }
        };

        window.addEventListener('click', handler);

        // Store handler to clean up later
        el.dataset.clickoutside = uniqueId();
        store.commit('addDirectiveInstance', { key: el.dataset.clickoutside, value: handler });
    },

'use strict';

var Vue = require('vue');
Vue = 'default' in Vue ? Vue['default'] : Vue;

var version = '2.2.2';

var compatible = (/^2\./).test(Vue.version);
if (!compatible) {
  Vue.util.warn('VueClickaway ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
}



// @SECTION: implementation

var HANDLER = '_vue_clickaway_handler';

function bind(el, binding, vnode) {
  unbind(el);

  var vm = vnode.context;

  var callback = binding.value;
  if (typeof callback !== 'function') {
    if (process.env.NODE_ENV !== 'production') {

if (isNaN(value)) {
    return 'N/A'
  }

  if (!isFinite(value)) {
    return 'Live stream'
  }

  var d = Number(value)
  var h = Math.floor(d / 3600)
  var m = Math.floor(d % 3600 / 60)
  var s = Math.floor(d % 3600 % 60)
  return ((h > 0 ? h + ':' + (m < 10 ? '0' : '') : '') + m + ':' + (s < 10 ? '0' : '') + s)
})

var Player = Vue.component('player', {
  props: ['source'],
  template: '<audio autoplay="" controls="" id="player"></audio>'
})

// FIXME: Add loading animation: http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
var Controls = Vue.component('controls', {
  props: ['playing'],
  computed: {
    stream: function () {
      var stream = this.source ? this.source.stream : ''
      console.log('Stream is: ', stream)
      return stream
    },

    label: function () {
      return this.playing ? 'Pause' : 'Play'

this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const res = await this.userLogin(this.ruleForm);
            this.showMessage('登录成功！');

            // 关联模态框
            Vue.ls.set('BOBLOG_FE_TOKEN', res.data.token);
            this.$store.commit('user/SHOW_USER_MANAGER_MODEL', false);

            // 登录
            const BOBLOG_FE_TOKEN = Vue.ls.get('BOBLOG_FE_TOKEN');
            await this.$store.dispatch('user/getUserInfo', {
              username: BOBLOG_FE_TOKEN
            });

          } else {
            this.showMessage('请完善表单', 'error');
            return false;
          }
        });
      },