投稿日：2021-01-19T23:10:46+09:00

復習の記事1

・vue-routerについての学び
1あくまでもURLはvueがどんなコンポーネントを返すかを決めるものである
2返すページはどんな時も、index.html
3＃以下はidとして考え、実際には#以前がインターネットにつながる事になる。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-19T20:41:58+09:00

改行が含まれる文字列をそのまま表示する方法

困ったこと

改行が含まれている文章がそのまま表示されない。。（改行が空白になる。）

<div>
  {{content)}}
</div>

今日はピクニック。 楽しいな

スタイルを当てよう

test.html

<div class="content">
  {{content)}}
</div>

test.css

.content {
  white-space: pre-wrap; // 要素内のホワイトスペースをどのように扱うか。今回は変更させない。
  word-wrap: break-word; // 日本語の単語をどう扱うか。今回は改行させる。
}

今日はピクニック。
楽しいな

できた

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-19T19:23:39+09:00

[Vue.js] 画像をプレビュー表示する

今回の題

ユーザーがformに入力した画像をプレビュー表示する機能を実装してみようと思います。

デモ

https://jsfiddle.net/kuzira/6eo4k391/37/

実装

1 fileアップロード用のinputを作成。

changeイベントとプレビューを表示するための関数を結びつけ、画像が選択されたら処理が発火するようにする。refを使用してファイルオブジェクトを取得できるように。
<input type="file" ref="image" @change="showPreview">
2 プレビュー用の関数の作成

this.$refs.image.files[0]でユーザーが選択した画像のファイルオブジェクトを取得。
createObjectURLを使用してファイルオブジェクトURLを作成。
methods: {
  showPreview: function() {
    if (this.imageUrl) {
      URL.revokeObjectURL(this.imageUrl) 
    }
    const file = this.$refs.image.files[0]
    this.imageUrl = URL.createObjectURL(file)
    }
}
すでにオブジェクト URL が生成されている場合でも、 createObjectURL() を呼び出す度に、新しいオブジェクト URL が生成されます。必要がなくなったら URL.revokeObjectURL() を呼び出して、それぞれを解放してください。
createObjectURLから引用

だそうなので、２回目以降のアップロードの際は最初のif文で既存のものを解放してあげます。

3 作成したオブジェクトURLを管理するプロパティの作成。
data: {
  imageUrl: null
}
4 プレビューを表示するimgタグを配置

オブジェクトURLを管理するプロパティとsrc属性をバインド。
v-showでオブジェクトURが存在する場合のみ表示するように設定しました。
<img :src="imageUrl" v-show="imageUrl" width="100" height="100">
全体コード
<div id="app">
  <img :src="imageUrl" v-show="imageUrl" width="100" height="100">
  <input type="file" ref="image" @change="showPreview">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    imageUrl: null
  },
  methods: {
    showPreview: function() {
      if (this.imageUrl) {
        URL.revokeObjectURL(this.imageUrl) 
      }
      const file = this.$refs.image.files[0]
      this.imageUrl = URL.createObjectURL(file)
    }
  }
});
</script>
以上！！

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-19T17:49:52+09:00

【Vue.js】slotタグを使ってhtmlタグを親コンポーネントで定義【slot】

参考

Udemy参考動画：https://www.udemy.com/course/vue-js-complete-guide/
講師 : よしぴー(Yoshipi)さん

Vue.jsでslotタグを使ってhtmlタグを親コンポーネントで定義する方法をご紹介します。

通常

子コンポーネント : ChildComponent
//ChildComponent

<template>
  <div>
    <p>{{ title }}</p>
  </div>
</template>


<script>
export default {
  data() {
    return {
      title,
    };
  }
};
</script>
親コンポーネント App.Vue
//App.Vue

<template>
  <div>
    <ChildComponent :title="タイトル"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },  
};
</script>
結果
タイトル
値やプロパティを渡し、タグは子コンポーネントで定義する。

スロット

タグを親コンポーネントで定義できる

対応 : ver2.6.0~

子コンポーネント : ChildComponent
//ChildComponent

<template>
  <div>
    <slot></slot>
  </div>
</template>
親コンポーネント : App.Vue
//App.Vue

<template>
  <div>
    <ChildComponent>
　　　 <template>
          <p>タイトル</p>
      <template>
    </ChildComponent>
  </div>
</template>
結果
タイトル
コンポーネント内のtemplateタグと子コンポーネントのslotタグが対応

デフォルト

slotの数だけtemplateが生成されるため、slotタグを複数置くと同じ内容が連続して表示される

デフォルトの仕様ということでオールバックコンテンツと呼ばれる。

例えば、
子コンポーネント : ChildComponent
//ChildComponent

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>
結果
タイトル
タイトル
タイトル
タイトル
スコープ

インスタンス内（親コンポーネント内）

CSSは例外 : 親コンポーネントのスタイルが優先的に働く

名前付きslot

slot : name属性（子コンポーネント）

template : v-slot（親コンポーネント）

nameの値とv-slotの引数が対応
注意：nameは値、v-slotは引数

子コンポーネント : ChildComponent
//ChildComponent

<template>
  <div>
    <slot name="title"></slot>
    <slot name="name"></slot>
  </div>
</template>
親コンポーネント : App.Vue
//App.Vue

<template>
  <div>
    <ChildComponent>
　　　 <template v-slot:title>
          <p>タイトル</p>
      <template>
      <template v-slot:name>
          <p>太郎</p>
      <template>
    </ChildComponent>
  </div>
</template>
結果
タイトル
太郎

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-19T17:49:52+09:00

【Vue.js】slotタグを使ってhtmlタグを親コンポーネントで定義し、子コンポーネントに渡す【slot】

参考

Udemy参考動画：https://www.udemy.com/course/vue-js-complete-guide/
講師 : よしぴー(Yoshipi)さん

Vue.jsでslotタグを使ってhtmlタグを親コンポーネントで定義する方法をご紹介します。

通常

子コンポーネント : ChildComponent
//ChildComponent

<template>
  <div>
    <p>{{ title }}</p>
  </div>
</template>


<script>
export default {
  data() {
    return {
      title,
    };
  }
};
</script>
親コンポーネント App.Vue
//App.Vue

<template>
  <div>
    <ChildComponent :title="タイトル"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },  
};
</script>
結果
タイトル
値やプロパティを渡し、タグは子コンポーネントで定義する。

スロット

タグを親コンポーネントで定義できる

対応 : ver2.6.0~

子コンポーネント : ChildComponent
//ChildComponent

<template>
  <div>
    <slot></slot>
  </div>
</template>
親コンポーネント : App.Vue
//App.Vue

<template>
  <div>
    <ChildComponent>
　　　 <template>
          <p>タイトル</p>
      <template>
    </ChildComponent>
  </div>
</template>
結果
タイトル
コンポーネント内のtemplateタグと子コンポーネントのslotタグが対応

デフォルト

slotの数だけtemplateが生成されるため、slotタグを複数置くと同じ内容が連続して表示される

デフォルトの仕様ということでオールバックコンテンツと呼ばれる。

例えば、
子コンポーネント : ChildComponent
//ChildComponent

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>
結果
タイトル
タイトル
タイトル
タイトル
スコープ

インスタンス内（親コンポーネント内）

CSSは例外 : 親コンポーネントのスタイルが優先的に働く

名前付きslot

slot : name属性（子コンポーネント）

template : v-slot（親コンポーネント）

nameの値とv-slotの引数が対応
注意：nameは値、v-slotは引数

子コンポーネント : ChildComponent
//ChildComponent

<template>
  <div>
    <slot name="title"></slot>
    <slot name="name"></slot>
  </div>
</template>
親コンポーネント : App.Vue
//App.Vue

<template>
  <div>
    <ChildComponent>
　　　 <template v-slot:title>
          <p>タイトル</p>
      <template>
      <template v-slot:name>
          <p>太郎</p>
      <template>
    </ChildComponent>
  </div>
</template>
結果
タイトル
太郎

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-19T17:32:33+09:00

【Vue.js】基礎知識②

はじめに

引き続き、Vue.jsの基礎知識についてアウトプットをしていきます。
今回は、昨日学んだ構文のオプション構成について記述していきます。

基本的なオプションの構成

全ての Vue アプリケーションは、Vue 関数で新しい Vue インスタンスを作成することによって起動。
practice.js
var app = new Vue({
  // mountする要素
  el: '#app',

  // アプリケーションで使用するデータ
  data: {
    message: 'Vue.js'
  },

  // 算出プロパティ
  computed: {
    computedMessage: function() {
      return this.message + '!'
    }
  }

  // ライフサイクルフック
  created: function() {
    // 行いたい処理
  },

  // アプリケーションで使用するメソッド
  methods: {
    myMethod: function() {
      // 行いたい処理
    }
  }
})
practice.js
var app = new Vue({
  // mountする要素
  el: '#app',
「el」はアプリケーションを紐付ける要素のセレクタ。
practice.js
var app = new Vue({

  // アプリケーションで使用するデータ
  data: {
    message: 'Vue.js'
  },
「data」はアプリケーションで使用するデータであり、オブジェクトや配列も登録可能。
practice.js
var app = new Vue({

  // 算出プロパティ
  computed: {
    computedMessage: function() {
　　　　//何か処理をした結果をデータとして返す
      return this.message + '!'
    }
  }
「computed」は「data」と似たように扱うことのできる、関数によって算出されるデータ。
practice.js
var app = new Vue({

  // ライフサイクルフック
  created: function() {
    // 行いたい処理
  },
ライフサイクルフックとは、予め登録した処理を、Vueインスタンスの特定のタイミングで自動的に呼び出すもの。
createdなど様々なライフサイクルフックがあり、使用できるメソッドが決められている。以下はライフサイクルフックの一覧。

メソッドタイミング

beforeCreate インスタンスが生成され、リアクティブデータの初期化がされる前

created インスタンスが生成され、リアクティブデータの初期化がされた後

beforeMount インスタンスがマウントされる前

mounted インスタンスがマウントされた後

beforeUpdate データが変更され、DOMに適用される前

updated データが変更され、DOMに適用された後

beforeDestroy Vueインスタンスが破棄される前

destroyed Vueインスタンスが破棄された後

errorCaptured 任意の子孫コンポーネントからエラーが捕捉されたとき

※リアクティブとは：何かしらの変更（取得した時や、代入された時など）が瞬時に反映されること。（という個人的なイメージです。。。）
※createdとmountedの違い：DOMが構築されているかされていないか。（mountedの場合は、DOMが作成された直後に呼ばれるため、「el」や「getElementById()」などがメソッド内で使用できる。）
practice.js
var app = new Vue({

  // アプリケーションで使用するメソッド
  methods: {
    myMethod: function() {
      // 行いたい処理
    }
  }
})
「methods」はアプリケーションで使用するメソッド。イベントハンドラなどの実装を行う部分。

メソッド	タイミング
beforeCreate	インスタンスが生成され、リアクティブデータの初期化がされる前
created	インスタンスが生成され、リアクティブデータの初期化がされた後
beforeMount	インスタンスがマウントされる前
mounted	インスタンスがマウントされた後
beforeUpdate	データが変更され、DOMに適用される前
updated	データが変更され、DOMに適用された後
beforeDestroy	Vueインスタンスが破棄される前
destroyed	Vueインスタンスが破棄された後
errorCaptured	任意の子孫コンポーネントからエラーが捕捉されたとき

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-19T16:08:40+09:00

vue.js element ui フォーム送信処理

バリデートが面倒ですわ。

ということで
フォーム送信時の3つの注意点

・バリデートしたい場合は、 el-form-item の prop を必ず設定
・リターンキーで送信されるのを防ぐため@submit.native.prevent="submitForm('vForm')"を設定
・フォームが複数になる場合は、以下のvFormを文字列全置換して使うsFormとかhogeFormとか。

sample.vue

<template>
    <div>

        <el-form :model="vForm" :rules="vFormRules" ref="vForm" @submit.native.prevent="submitForm('vForm')">

<!--            validate したいときは、 必ず el-form-item に prop をつけて name とする　-->
            <el-form-item label="名前" prop="name">
                <el-input v-model="vForm.name"></el-input>
            </el-form-item>

            <el-form-item label="性別" prop="sex">
                <el-radio-group v-model="vForm.sex">
                    <el-radio label="0">女性</el-radio>
                    <el-radio label="1">男性</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <div style="text-align: center;">
                    <el-button type="primary" :loading="loading" @click="submitForm('vForm')">新規会員登録</el-button>
                </div>
            </el-form-item>

        </el-form>
    </div>
</template>

sample.vue

<script>

    export default {

        data () {
            return {

                loading:false,

                vForm: {
                    name: '',
                    sex:'',
                },
                vFormRules: {
                    name: [
                        { required: true,  message: '曜日を入力してください', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true,message: '時間を入力してください', trigger: 'blur' }
                    ],

                },

            };
        },


        methods: {


            //複数のフォームがあっても、送信処理はこれ一つ
            //この中で form名に合わせて処理を分けるか
            submitForm(formName) {

                //送信中はボタンを押せないように
                this.loading = true;

                this.$refs[formName].validate((valid) => {

                    if(valid){

                        console.log("送信準備OK");

                        if(formName == 'vForm'){
                            console.log("vForm を送信します");
                        }

                    } else {
                        console.log("バリデートNG");
                    }

                    //ヴァリデート完了後、ボタンを押せるように
                    this.loading = false;


                });

            }

        },

    }
</script>

その他のバリデート
vFormRules

sample.vue

// trigger: 'change' でもいける
//urlが入力されているか
url: [
    { type: 'url' ,required: true, message: 'URLを入力してください', trigger: 'blur' }
],

//数値が入力されているか
price: [
    { type: 'number',required: true, min: 0, message: '0円以上で、半角数字で入力してください', trigger: 'change' }
],

//簡易チェック amazonのurlが入力されているかどうか
amazon: [
    {pattern:/www.amazon/, message: '欲しい物リストのURLを入力して下さい', trigger: 'blur' }
],

//最低10文字以上で入力してね
body: [
    { required: true, min: 9, message: '10文字以上で入力して下さい', trigger: 'change' }
],

//簡易チェック メールアドレスかどうか
email: [
    { required: true, pattern:/@/,message: 'メールアドレスを入力してください', trigger: 'change' }
],

//8文字以上で入力してね
password: [
    { required: true, min: 7, message: '8文字以上で入力して下さい', trigger: 'change' }
],

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-19T12:37:41+09:00

急に「firebase deploy」が上手く行かなかった時の話

昨日、今制作しているWebサイトの動作を確認するために、firebase deployを実行したところ以下のようなエラーが出ました。

Error: Task 750aaed1c51322d9c96d2b6efc43b4a712c97b958fd8bcc90ce119410b426b4b failed: retries exhausted after 6 attempts

英語は苦手ではないのですが、これは流石に英語力の問題ではない。。。

まぁ、こういう時はエラーメッセージをコピペして検索が一番早いので試したところ、StackOverflowに同じような質問と解決策が提示されていた。

読んでみると、キャッシュの問題らしい。

プロジェクトのフォルダーにある.firebaseにあるhosting.ZGlzdA.cacheを消去すると解決するらしい。

消してみたところ上手く行った！！

時間がかからなくて良かった！！

同じエラーで悩んでいる人もぜひhosting.ZGlzdA.cacheを消去して見て下さい。

Thank you for reading

　 Tweet
Qiitaで続きを読む

20210119のvue.jsに関する記事は8件です。

復習の記事1

改行が含まれる文字列をそのまま表示する方法

困ったこと

スタイルを当てよう

[Vue.js] 画像をプレビュー表示する

今回の題

デモ

実装

1 fileアップロード用のinputを作成。

2 プレビュー用の関数の作成

3 作成したオブジェクトURLを管理するプロパティの作成。

4 プレビューを表示するimgタグを配置

全体コード

【Vue.js】slotタグを使ってhtmlタグを親コンポーネントで定義【slot】

参考

通常

結果

スロット

結果

デフォルト

結果

スコープ

名前付きslot

結果

【Vue.js】slotタグを使ってhtmlタグを親コンポーネントで定義し、子コンポーネントに渡す【slot】

参考

通常

結果

スロット

結果

デフォルト

結果

スコープ

名前付きslot

結果

【Vue.js】基礎知識②

はじめに

基本的なオプションの構成

vue.js element ui フォーム送信処理

急に「firebase deploy」が上手く行かなかった時の話

日付別

タグ一覧