<div id=app>

<div id="app">

上記グローバルメニューのHTML内で認証モジュールAuthを利用するために、Vueインスタンス生成時のdataプロパティにAuthを指定しましょう。


var app = new Vue({
  data: {
    Auth: Auth
  },
  router: router
}).$mount('#app')

<li slot-scope="slotProps" v-if="slotProps.todo.isCompleted" :key="slotProps.todo.id">

<li slot-scope="{ todo }" v-if="todo.isCompleted" :key="todo.id">

$ editor form.vue
$ vue serve form.vue --open

var auth = this.$options.auth

var auth = this.$options.auth // $optionsでVueインスタンス生成時のオプションを参照できます

  describe('false', () => {
    it('disabled属性が付与されていないこと', () => {
      const button = mount(KbnButton)
      expect(button.attributes().disabled).to.be.an('undefined')
    })
  })

  describe('false', () => {
    it('disabled属性が付与されていないこと', () => {
      const button = mount(KbnButton, {
        propsData: { disabled: false }
      })
      expect(button.attributes().disabled).to.be.an('undefined')
    })
  })

Vue.component(コンポーネント名,{
  props: {
    親から受け取る属性名:{
      type: StringやObjectなどのデータ型,
      default: デフォルト値,
      required: 必須かどうかの真偽値,
      validator: バリデーション用の関数
    }
  }
  // ...template内で「親から受け取る属性」が使える
})

https://jsfiddle.net/bha18soe/

https://jsfiddle.net/upd9843j/ 

new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement('my-button', {
      attrs: {
        href: 'https://vuejs.org/'
      },
      props: {
        tag: 'a'
      }
    }, 'anchor')
  },
  components: {
    MyButton: MyButton
  }
})

new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement(MyButton, {
      attrs: {
        href: 'https://vuejs.org/'
      },
      props: {
        tag: 'a'
      }
    }, 'anchor')
  }
})

$ mkdir -p src/ components/{ atoms, molecules, organsms, templates}

$ mkdir -p src/ components/{ atoms, molecules, organisms, templates}

<!-- router-link による ナビゲーション 定義 -->>

<!-- router-link による ナビゲーション 定義 -->

<template>
  <div class="bar">
    <h1 class="header">Barコンポーネント</h1>
    <p>これはBarコンポーネントです。</p>
    <foo/> <!-- Fooコンポーネントの利用。scriptブロックも要注目 -->
  </div>
</template>

<script>
import Foo from './foo'
export default { // FooコンポーネントをBarコンポーネントに登録
  components: {
    Foo
  }
}
</script>

<style scoped>
.bar {
  border: 1px solid red;
  margin: 4px;
  padding: 4px;
}
.header { font-size: 125%; }
</style>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    // fooモジュール
    foo: {
      state: {
        value: 123
      },

      actions: {
        log (ctx) {
          console.log('モジュールfooのステート', ctx.state)
        }
      }
    },

    // barモジュール
    bar: {
      state: {
        message: 'Hello!'
      },

      actions: {
        log (ctx) {
          console.log('モジュールbarのステート', ctx.state)
        }
      }
    }
  }
})

// logアクションを呼び出す
// fooモジュール内のステートと、barモジュール内のステートが出力される
store.dispatch('log')

describe('メールアドレス形式のフォーマット', () => {
    it('validation.email.requiredがvalidであること', () => {

describe('メールアドレス形式のフォーマット', () => {
    it('validation.email.formatがvalidであること', () => {

 // commitが呼ばれていなかチェック

 // commitが呼ばれていないかチェック

<template>
  <p>{{message}}!</p>
<template>
<script>
export default = {
  data () {
    return {
      message: 'こんにちは'
    }
  }
}
</script>
<style scoped>
p {
  color: red;
}
</style>

<template>
  <p>{{message}}!</p>
</template>
<script>
export default = {
  data () {
    return {
      message: 'こんにちは'
    }
  }
}
</script>
<style scoped>
p {
  color: red;
}
</style>

styleはセミコロン("collor: tomato; background: yellow")で

styleはセミコロン("color: tomato;; background: yellow")で

// データに参照できる

// データを参照できる

<!-- v-forで繰り返した各furitをprops（fruits-item）に与えている --> 

<!-- v-forで繰り返した各fruitをprops（fruits-item）に与えている --> 

<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.7.0/dist/vue-router.min.js"></script>

<script src="https://unpkg.com/vue@2.5.17"></script>
<script src="https://unpkg.com/vue-router@3.0.1"></script>

bind! function (el, binding) {

bind: function (el, binding) {

update! function (el, binding) {

update: function (el, binding) {

data! function() {

data: function() {

render! function (createElement) {

render: function (createElement) {

JSON.strinfigy({name: 'Evan You'})

JSON.stringify({name: 'Evan You'})

<template>
  <div class="foo">
    <h1 class="header">Fooコンポーネント</h1> <p>これはFooコンポーネントです。</p>
  </div>
</template>
<style scoped>
.foo { border: solid 1px green; margin: 4px; padding: 4px; }
.header { font-size: 150%; }
</style>

<template>
  <div id="root">
    <h1 class="header">Rootコンポーネント</h1> <p>これはRootコンポーネントです。</p>
    <foo/> <bar/>
  </div>
</template>
<script>
import Foo from './foo'
import Bar from './bar'
export default {
  components: { Foo, Bar }
}
</script>
<style>
#root { border: solid 1px blue; margin: 4px; padding: 4px; }
.header { font-size: 200%; }
p { text-decoration: underline; }
</style>

const merge = require('deepmerge')
const loader = require.resolve('./loader.js') // カレントディレクトリに作成したカ
スタムローダーを読み込む
module.exports = {
  chainWebpack: config => {
    // Vue Loaderの設定をカスタマイズする
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options =>
        merge(options, {
          loaders: {
            // カスタムブロックをインポートしたカスタムローダーで処理する
            docs: loader
          }
      })
    )
    .end()
  }
}

const loader = require.resolve('./loader.js') // カレントディレクトリに作成したカスタムローダーを読み込む

module.exports = {
  chainWebpack: config => {
  // Vue Loaderの設定をカスタマイズする
    config.module
      .rule('docs')
      .resourceQuery(/blockType=docs/)
      .use('docs')
      .loader(loader)
  }
}

import TaskList from './TaskList'

import TaskList from './TaskList.vue'