Vue.js は html テンプレートとロジック、スタイルを vue ファイルの形で１つのコンポーネントにまとめることができます。
今回はこの単一ファイルコンポーネントを使った簡単なサンプルプログラムを作ってみようと思います。
インストール
Vue.js 本体をはじめ、Webpack など補助的なツールをインストールしていきます。
npm init npm install vue npm install --save-dev vue-loader vue-template-compiler npm install --save-dev webpack webpack-cli npm install --save-dev babel-core babel-loader babel-preset-env
webpack.config.js, .babelrc は次のようにしました。
webpack.config.js
module.exports = {
entry: './src/js/app.js',
output: {
path: __dirname,
filename: './js/bundle.js'
},
module: {
rules: [{
test: /\.vue$/,
include: /src/,
loader: 'vue-loader',
},
{
test: /\.js$/,
include: /src/,
loader: 'babel-loader'
},
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}
};
.babelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions"]
},
"modules": false
}]
]
}
これで「webpack –watch」コマンドなどで src フォルダ内の js, vue ファイルを自動変換できるようになります。変換後は js フォルダに bundle.js としてまとめられるようにセットしてあります。
HTML とメインスクリプトの用意
Vue.js 公式ドキュメントの例にならってクリックすると数字が増えるカウンターを作っていきます。テンプレートは vue ファイルに書くのでここでは最低限 <div id="app"> と <counter> タグがあれば動作します。
bundle.js へのリンクは body の最下部に置きます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<counter></counter>
</div>
<script src="js/bundle.js"></script>
</body>
</html>
メインスクリプトとなる app.js はこのようにしました。
src/js/app.js
import Vue from 'vue';
import counter from './components/counter.vue';
new Vue({
el: '#app',
data: {},
components: {
"counter": counter
}
});
import でこれから作るカウンター用のコンポーネントを読み込んでいます。Vue のコンストラクタで components としてカウンター用のコンポーネントを指定します。
キーに当たる "counter" は要素名を意味しています。つまり index.html の <counter> の箇所にこのコンポーネントが挿入されます。
Vueコンポーネントの作成
js/components となるようにフォルダを作り、counter.vue ファイルを用意します。
js/components/counter.vue
<template>
<div>
<p>Count: {{ counter }}</p>
<p><button v-on:click="increment">Button</button></p>
</div>
</template>
<script>
module.exports = {
data: function () {
return {
counter: 0
}
},
methods: {
increment: function() {
this.counter++;
}
}
}
</script>
ボタンを押すと increment() メソッドが呼ばれ、カウントが１増えます。data の値とテンプレートは連動しているので変数の値を変更すれば {{ counter }} の値も自動的に変化します。
１つのファイルにビューとロジックを書くことができ、ひと目で何をやっているのかがわかります。
Similar Posts:
- [JS]Reactのインストールと周辺ツール(Babel, Webpack)の導入方法
- [JS]Babelとwebpackを使いES6用のスクリプトを古いブラウザに対応させる
- [PHP, JS]jQueryのAjaxによるPHP、Javascript間の送受信(JSON)
- [PHP]Twigテンプレートの実践的な構成と作り方
- [PHP]GDで作った画像をファイル化せずに直接<img>タグで表示する
- [PHP]CakePHP 3のインストールと初期設定
- [JS, jQuery]ページ内に他のページをiframeのように埋め込む
- [JS]TinyMCEでレスポンシブな独自のダイアログを使う(Bootstrap)
