Tag Archives: Vue

Vueのrouternのヒストリーモードとは通常のハッシュモードとは違い、#なしの普通のURLで１ページアプリを実現する方法。これをサイトのルートで運用するときはマニュアルに書いてある通りなのでハマることはないのだが、サブディレクトリでやろうとすると大変だったので覚書。

ここではサブディレクトリを/homepageとする。

vue.config.js

vue.config.jsを以下のように書く。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/homepage/'
    : '/'
}

module.exports = {

publicPath: process.env.NODE_ENV === 'production'

? '/homepage/'

: '/'

}

router.js

src/router.jsを以下のように書く。

...
export default new Router({
  mode: 'history',
  base: process.env.NODE_ENV === 'development' ? '/' : '/homepage/',
  routes: [
    ... 
  ]
  ..

...

export default new Router({

mode: 'history',

base: process.env.NODE_ENV === 'development' ? '/' : '/homepage/',

routes: [

...

]

.htaccess

public/.htaccessを以下のように書く

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /homepage
RewriteRule ^homepage/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /homepage/index.html [L]
</IfModule>

RewriteEngine On

RewriteBase /homepage

RewriteRule ^homepage/index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /homepage/index.html [L]

</IfModule>

Ubuntuに最新のnodeをインストール

2019年7月4日

admin

node No Comments

ubuntu16.04のaptでインストールするnodeは古くてvue cliを使えなかったので最新にしたい。

しかしすでに３２ビットはnode 8までしかないようだ。
ここを参考にインストール

これは８をインストールする場合。６４ビットUbuntuの場合は最新をインストールできる。

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

1 2	curl -sL https://deb.nodesource.com/setup_8.x \| sudo -E bash - sudo apt-get install -y nodejs

インストール後

$ node –version
v8.16.0
$ npm –version
6.4.1
$ vue –version
3.9.1
$

vueでグローバルな関数をつかう

2019年7月3日

admin

Vue No Comments

Vueはコンポーネントでページを構成するフレームワークなのでグローバルな関数や変数というのは基本的には使わないと思われる。データのやり取りはpropsやeventで行うが、グローバル関数が欲しい場合もある。

Vueにはmixinという仕組みもあるみたいだが、これはVueコンポーネントにフックするために使うようで、プラグインなどにも影響するようなので、もっと普通のグローバルな関数を定義したい。

public/index.htmlにjavascriptを置いてもいいがここではvueらしくimportを使って行う。

まずはsrc/global.jsを新規に作成して、ここにグローバルな関数や変数を書く。

const DEBUGGING = true
export var dtrace;
if (DEBUGGING) {
  dtrace = console.log;
} else {
  dtrace = function() {};
}

const DEBUGGING = true

export var dtrace;

if (DEBUGGING) {

dtrace = console.log;

} else {

dtrace = function() {};

}

ここではdtraceをexportしている。

つぎにコンポーネントでこれをインポートして使う。

...
<script>
import {dtrace} from '@/globalFunction'
</script>

...

import {dtrace} from '@/globalFunction'

</script>

Vueのpropsとdata

2019年6月29日

admin

Vue No Comments

dataとprops

dataはコンポーネントのプライベートなデータ。propsは他のコンポーネント（親）から設定されるデータ。子コンポーネントではpropsを変更できない。

Vueのコンポーネントはツリー状に構築される。親コンポーネントのdataは子コンポーネントに渡され、子ではそれをpropsとして参照する。

以下のコードは親コンポーネントのコード：

<mychild msg="Hello World!" />

1	<mychild msg="Hello World!" />

このコードでは子コンポーネントmychildのpropsであるmsgに”Hello World!”を渡している。mychildではmsgを変更できない。
（注）実際変更はできるがやらないほうがいい。

よってmychildコンポーネントでは自分のデータはdata()で管理する。data()はそのコンポーネントのみのデータなので他のコンポーネントによって変更されることはない。
（注）実際にはできるがやらないほうがいい。

親から子にデータを渡すときはpropsを使うが、逆に子から親へデータを渡すときはイベントを使う。イベントに関しては今回はスルー。

watcherとcomputed

watcher

Vueのコンポーネントではpropsの変更に対応する必要がある。watcherはプロパティを監視し、それが変更されたとき関数を実行する。

以下の例ではmsgやnameが変更されたとき、ログを表示する。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="click">BUTTON</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      name: ""
    }
  },
  methods: {
    click() {
      console.log("click");
      this.name = "newname";
    }
  },
  watch: {
    msg() {
      console.log("watch msg");
    },

    name() {
      console.log("watch name");
    }
  }
};
</script>

<button @click="click">BUTTON</button>

</div>

</template>

export default {

props: {

msg: String

data() {

return {

}

methods: {

click() {

console.log("click");

this.name = "newname";

}

watch: {

msg() {

console.log("watch msg");

name() {

console.log("watch name");

}

};

</script>

watcherはすべてのリアクティブプロパティで利用できる。これにはcomputed、props、data()内のデータも含まれる。date()は自分で設定するので通常は必要ない。

computed

Computedはあるデータから新しいデータを構築する。

以下の例では、nameが変更されると、nameLenが再構築される。nameLenはテンプレート内で{{ nameLen }}のように利用できる。

...
  computed: {
    nameLen() {
      return this.name.length
    }
  }
...

...

computed: {

nameLen() {

return this.name.length

}

...

まとめ

data()はそのコンポーネントでのみ使うプライベートなデータ。
propsは親コンポーネントによって設定されるデータ。
watcherはデータが変更されるとき呼ばれる関数。
computedはデータが変更されたとき、それに依存するデータを設定するための関数。

.vueソース

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    NAME={{name}} LEN={{ nameLen }}
    <button @click="click">BUTTON</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["msg"],
  data() {
    return {
      name: ""
    };
  },
  methods: {
    click() {
      console.log("click");
      this.name = "newname";
    }
  },
  watch: {
    msg() {
      console.log("watch msg");
    },

    name() {
      console.log("watch name");
    }
  },
  computed: {
    nameLen() {
      return this.name.length
    }
  }
};
</script>

<style scoped>
</style>

NAME={{name}} LEN={{ nameLen }}

<button @click="click">BUTTON</button>

</div>

</template>

export default {

props: ["msg"],

data() {

return {

};

methods: {

click() {

console.log("click");

this.name = "newname";

}

watch: {

msg() {

console.log("watch msg");

name() {

console.log("watch name");

}

computed: {

nameLen() {

return this.name.length

}

};

</script>

</style>

ボタンがクリックされるとnameが変更され、nameLenが変更される。