Vue.js index.html から json で props を渡す

● Vue.js index.html から json で props を渡す

index.html

<div id="app"
    my-option='{ "styles": { "td":"width" } }'
>

main.js

    const myOption           = JSON.parse(this.$el.getAttribute('my-option'));
No.2002
05/24 18:26

edit

Vue 起動時に html から Vue コンポーネントに変数を渡す

● Vue 起動時に html から Vue コンポーネントに変数を渡す

index.html に 渡したい引数をセット

<div id="app" arg1="hoge" arg2="fuga"></div>></div>

1. まず main.js で引数を受け取る

new Vue({
  render: h => h(App),
).$mount('#app')

↓ このように書き換えます

new Vue({
  render: function(createElement) {
    const arg1 = this.$el.getAttribute('arg1')
    alert( arg1 );
    return createElement(App,
      {
        props: {
          arg1: arg1
        }
      })
  }
}).$mount('#app')

2. 次に App.vue で引数を受け取る

export default {
  name: 'App',
  components: {
    MyComponent ,
  },
  props: {
    arg1: {
      type: String,
      required: true,
    } ,
  },
  created: function () {
    alert( 'App.vue : ' + this.arg1 );
  },
}
No.1969
03/12 09:26

edit

Vue-cli でビルドするときに .js .css ファイルにランダムなハッシュ値をつけないようにする

● Vue-cli でビルドするときに .js .css ファイルにランダムなハッシュ値をつけないようにする

● 1.vue.config.js がなければ新規作成する

touch vue.config.js

● 2. vue.config.js を以下の内容にして保存します

例: sample-app.js のような命名になります。

module.exports = {
  configureWebpack: {
    output: {
      filename: 'sample-[name].js',
      chunkFilename: 'sample-[name].js'
    }
  },
  css: {
    extract: {
      filename: 'sample-[name].css',
      chunkFilename: 'sample-[name].css'
    },
  },
}

● 3. ビルドする

npm run build
No.1964
03/09 11:02

edit

実は簡単なVueの双方向( two way )バインディング

1.子コンポーネントに value という名前の Props を作成する

必ず value という名前で作成しましょう

export default {
  props: {
    value: {
      type: String,
      required: true
    }
  }
}

2.子コンポーネントに computed を作成する

export default {
  computed: {
    inputValue: {
      get() {
        return this.value; 
      },
      set(value) {
        this.$emit('input', value); 
      }
    }
  } ,
}

3.子コンポーネントの input タグに v-modelを指定する

  <input type="text" v-model="inputValue" />

以上です。

4.呼び出し元の親コンポーネントの v-model を指定する

<my-component v-model="item.content.value"></my-component>

引用: https://b1tblog.com/2019/10/17/vue-vscode-addons/

No.1959
03/02 23:49

edit

vue draggable

● vue draggableのインストール

インストール

yarn add vuedraggable

cssがめんどくさい場合は bootstrapも入れておきましょう

yarn add bootstrap-vue

コレクションの操作がめんどくさい場合は lodashも入れておきましょう

yarn add lodash
yarn add @types/lodash

xhr を使用するときは axios も入れておきましょう

yarn add axios

main.js に 以下も追加します

import Axios from 'axios'
Vue.use(Axios)

● TypeScript用 ファイルの作成

mkdir src/types
vi src/types/vuedraggable.d.ts

src/types/vuedraggable.d.ts

declare module 'vuedraggable'

● 片方のリストからもう片方のリストコピーをさせる

コピーをさせたいリストを次のように変更します

    <draggable
      group="items"
    >

    <draggable 
      :group="{ name: 'items', pull: 'clone', put: false }"
    >
No.1958
03/05 22:32

edit

vue.js で ng-container のように非表示なタグを使用する

● templateを使用します

<template v-if="data == 'aaa' ">
   <img src="cool-img" alt="awesome">
   <h1>AAA</h1>
   <p>Cool Text AAA</p>
</template>
<template v-else-if="data == 'bbb' ">
   <img src="cool-img" alt="awesome">
   <h1>BBB</h1>
   <p>Cool Text BBB</p>
</template>

● テンプレートで switch を使用したいときはこちらを使います

https://www.npmjs.com/package/v-switch-case

No.1947
03/02 15:01

edit

vue.js 3 + TypeScript 環境を作成する

1. Vue CLI をインストールします

npm install --global @vue/cli

一度ターミナルを再起動してから

バージョンの確認

vue -V
@vue/cli 4.5.11

2. 新規のプロジェクトを作成し、続いて "Manually select features" を選択します

vue create my-project-name

Typescript を利用するために Manually select features を選択します。

3. ローカルサーバー起動

cd my-project-name
npm run serve

4. ビルド

dist フォルダにビルド結果が出力されます

npm run build

5. ローカルファイルを表示した場合画面が真っ白になる場合は相対パスを指定します

vue 2 の場合は

vue.config.js

module.exports = {
    publicPath: './'
}

vue 3 の場合は 

vue.config.js

module.exports = {
    baseUrl: './'
}
No.1946
03/02 13:12

edit

vue.js の v-if を使った時の「Cannot read property ..... of undefined"」エラーに対処する

● vue.js の「Cannot read property ..... of undefined"」エラーに対処する

これはオブジェクトが undefined なのに、オブジェクトのメンバ変数にアクセスしようとした時によくおこります。
次のようにあらかじめ存在チェックを入れて回避しましょう。

{{ props.row.client.tel }}

  ↓ ( v-if を使って props.row.client の存在を確認する )

<span v-if="props.row.client">{{ props.row.client.tel }}</span>

● オブジェクトの中身がある場合の v-if

(例: projects の中身が3つ以上ある場合 )

<li v-if="props.row.projects.length > 2">

 ↓ エラーが出る場合はこのように書き換えます

<li v-if="props.row.projects && props.row.projects.length > 2">

参考 : https://bit.ly/2NPKyWB

No.1770
07/03 11:28

edit

vue.js で便利なフィルター

● pluck

よくある結果セットから、特定のカラムだけ取り出して配列にします。

new Vue({
  el: '#app',
  data: {
    key: 'name',
    users: [
      {id: 1, name: 'sato', age: 33},
      {id: 2, name: 'suzuki', age: 26},
      {id: 3, name: 'yamada', age: 40},
    ]
  },
  filters: {
    pluck(users, key) {
      return users.map(user => user[key])
    }
  }
})

引用 : https://iwb.jp/vuejs-custom-filter-sample-list/

また、そのままカンマ区切りで出力する場合は次のように .join(', ') します。
 

{{ props.row.tantos | pluck('name').join(', ') }}

● 時間のフォーマット

  filters: {
    /**
     * @param {Date} value    - Date オブジェクト
     * @param {string} format - 変換したいフォーマット
     */
    moment(value, format) {
      return moment(value).format(format);
    }
  }
No.1745
02/06 15:13

edit

Nuxt.js による静的サイト制作

● yarn のインストール

npm install -g yarn

● nuxt.js サイトの新規作成

プロジェクト名を mysite としています。

yarn create nuxt-app mysite

● サイトの起動

cd mysite
yarn dev

http://localhost:3000/
でサイトにアクセスできるようになります。

● ページの追加

pages ディレクトリの中に works ディレクトリを作成して 1001.vue を次の内容で保存します。

<template>
  <div>
アイウエオ
  </div>
</template>

http://localhost:3000/works/1001
でアクセスできるようになります。

● 静的サイトを htmlに書き出し

yarn generate

dist/ ディレクトリが作成されてそこに書き出されます。

No.1688
02/04 10:46

edit

vue.js で エスケープしない記法 「 v-html=メソッド() 」「v-html=パラメータ名」

● vue.js で エスケープしない記法 「v-html=メソッド名()」

<div v-html="my_calc(props.row.sum_no)"></div>

  ↑

props.row.sum_no を my_calc メソッドを通した結果を エスケープせずに表示します

● vue.js で エスケープしない記法 「v-html=パラメータ名」

<span v-html="rawHtml"></span>

  ↑

この span のコンテンツは rawHtml プロパティの値に置き換えられ、プレーンな HTML として解釈されます。
No.1463
06/30 23:16

edit

vue.js の wysiwygエディタ

● vue-html-editor

http://haixing-hu.github.io/vue-html-editor/

jQueryのsummer note の vue.js移植版

● toast-ui.vue-editor

https://github.com/nhnent/toast-ui.vue-editor

添付ファイル1
No.1399
12/21 11:04

edit

添付ファイル

vue.js レンダリング前 のテンプレートや変数を見せないようにする

・cssを作成する

[v-cloak] {
  display: none;
}

・見せたくない要素に v-cloak をつける

<div v-cloak>

これだけでレンダリング前は非表示にして、レンダリング後に自動的に表示されるようになります。

No.1340
11/01 10:31

edit

transition-groupでリストにtransitionアニメーションをつける

● transition-groupでリストでデータを作成、削除した時に、transitionアニメーションをつける

・アニメーションさせたいリスト全体を<transition-group>タグで囲います

<transition-group>
    <div v-for="v,i in data_loop" :key="v.id">
        (% v.tanto_name %)
    </div>
</transition-group>

 ↓ これはレンダリングするとこのようになります

<span>
<div>担当者A</div>
<div>担当者B</div>
<div>担当者C</div>
</span>

transition-group タグspan タグ に変わります

任意のタグにするには

<transition-group>

 ↓

<transition-group tag="div">

とします。(div タグになります)

・アニメーション用のCSSを用意する

.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}
.v-enter, .v-leave-to {
  opacity: 0;
}

以上で vue.js のデータを削除した時にアニメーションがつけられます。 簡単ですね。

拡張は色々できます。

公式ドキュメント参照
https://jp.vuejs.org/v2/guide/transitions.html

No.1339
11/01 10:19

edit

Vue.js で 数字に3桁ごとにカンマをつけるフィルター「number_format」を作成する

● Vue.js でフィルターを作成する

数字に3桁ごとにカンマをつけるフィルター「number_format」を作成する

Vue.filter('number_format', function (value) {
    if (! value) { return false; }
    return value.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' );
});

● Vue.js で使用する

よくあるテンプレートのフィルターと同じ書き方で使えます。

{{ props.row.price_with_shipping_no|number_format }}
{{ 123456789 | number_format }}
No.1335
10/30 17:22

edit