JavaScript vue/dist/vue component Examples

Example #1

File: i18n.spec.js Project: crossjs/generator-x

    it('should update translate correctly', done => {
      Vue.component('comp', {
        template: fragment
      })

      vm = new Vue({
        el,
        template: '<comp></comp>',
        i18n: {
          data () {
            return resources
          }
        }
      })

      vm.$i18n.data = function () {
        return resources2
      }

      vm.$nextTick(() => {
        const { children } = vm.$children[0].$el
        expect(children[0].textContent).to.equal('Alpha')
        expect(children[1].textContent).to.equal('Before Century')
        expect(children[2].textContent).to.equal('Exist')
        expect(children[3].textContent).to.equal('Totally Exist')
        done()
      })
    })

Example #2

File: i18n.spec.js Project: crossjs/generator-x

    it('should translate correctly', () => {
      Vue.component('comp', {
        template: fragment
      })

      vm = new Vue({
        el,
        template: '<comp></comp>',
        i18n: {
          data () {
            return resources
          }
        }
      })

      const { children } = vm.$children[0].$el

      expect(children[0].textContent).to.equal('A')
      expect(children[1].textContent).to.equal('BC')
      expect(children[2].textContent).to.equal('b.not.exist')
      expect(children[3].textContent).to.equal('totally.not.exist')
      expect(children[4].textContent).to.equal('')
    })

Example #3

File: app.js Project: re-fort/TV-kko

const remote = require('electron').remote
const ipcRenderer = require('electron').ipcRenderer
const fs = require('fs')
const path = require('path')
const prefecturesJSON = require('./prefectures.json')
let castsJSON = require('./casts.json')
const moment = require('./util/moment')
const baseDir = remote.app.getAppPath()
const usrImgDir = remote.app.getPath('userData')
let baseImgDir = path.join(baseDir, 'assets')
baseImgDir = path.join(baseImgDir, 'img')

let Vue = require('vue/dist/vue')

Vue.component('modal', {
  template: '#modal-template'
})

new Vue({
  el: '#app',

  data () {
    return {
      extensions: ['.jpg', '.png'],
      defaultImage: 'no_name.png',
      showType: 'user',
      showSubType: '',
      searchType: '',
      activeIndex: -99,
      castQuery: '',
      programQuery: '',

Example #4

File: text-diff.js Project: stewartlord/contrast

Vue.component('text-diff', {
  props: ['file', 'getLeft', 'getRight'],
  data: function () {
    return {
      chunks: [],
      chunkIndex: [],
      lastOffset: {left: 0, right: 0}
    };
  },
  mounted: function () {
    legacy.loadDiff(this, this.getLeft(), this.getRight(), 10);
  },
  methods: {
    refresh: function () {
      this.chunks = []
      this.chunkIndex = [];
      this.lastOffset = {left: 0, right: 0};
      $(this.$el).find('.file-contents, .file-gutter, .river').html("");

      // Load and then update scroll position
      legacy
        .loadDiff(this, this.getLeft(), this.getRight(), 10)
        .then(() => this.scrollY(null, this.scrollTop));
    },
    scrollX: function (event) {
      let target = $(this.$el);
      let left   = target.find('.file-left .file-contents')[0];
      let right  = target.find('.file-right .file-contents')[0];
      let master = left.scrollWidth > right.scrollWidth ? left  : right;
      let slave  = left.scrollWidth > right.scrollWidth ? right : left;

      master.scrollLeft += event.deltaX;
      slave.scrollLeft   = master.scrollLeft;
    },
    scrollY: function (event, scrollTop) {
      legacy.scrollY(this, scrollTop);
      this.scrollTop = scrollTop;
    }
  },
  template: `
    <div class="diff-viewer text-diff">
      <div class="file file-left">
        <div class="file-offset">
          <div class="file-gutter"></div>
          <div class="file-contents"></div>
        </div>
      </div>
      <div class="river"></div>
      <div class="file file-right">
        <div class="file-offset">
          <div class="file-gutter"></div>
          <div class="file-contents"></div>
        </div>
      </div>
    </div>
  `
});

Example #5

File: main.js Project: vuchl/webpack-simple-2.0

import Vue from 'vue/dist/vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

Vue.use(Vuex);
const store = new Vuex.Store({
	state: {
		a: 'happy'
	}
})

const Home = Vue.component('home', {
	template: `
		<span>home</span>
	`
})

const Test = Vue.component('test', {
	template: `
		<span>test</span>
	`
})

Vue.use(VueRouter);

const router = new VueRouter({
	mode: 'history',
	routes: [
		{path: '/', component: Home},
		{path: '/test', component: Test}