vue.js: JavaScriptメモ

TOP / vue.js

2019年01月14日

Vue CLIを使ってVueの環境を作成する

まずはvue-cliをグローバルにインストール

npm install -g vue-cli

インストール内容を exec $SHELL -l　で反映すればvueコマンドが利用できるので -h オプションでヘルプを表示してみましょう

exec $SHELL -l
vue -h

vue init コマンドでプロジェクトを作成

vue init webpack-simple vue-cli-sample

インストールができたらディレクトリに移動してnpmのインストールと実行を行います

cd vue-cli-sample
npm install
npm run dev

http://localhost:8080/ に移動するとVueプロジェクトが実行されているのを確認できます。

src/App.js のmsgなどを変更するとhttp://localhost:8080/ も変更されるのを確認することができます。

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Vue CLIを使ってVueの環境を作成する'
    }
  }
}
</script>

posted by ねこまんま at 15:32 | vue.js |

2018年01月16日

Nuxt.jsでヘッダー情報を設定

nuxt.config.jsには以下のようにheader情報を設定しておき、

module.exports = {
  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
}

pagesディレクトリ配下のページコンポーネントで以下のようにtitleを設定することで、

<template>
  <h1>Hello world!!!</h1>
</template>
<script>
  export default {
    head () {
        return {
          title: 'ok',
        } 
    }
  }
</script>

以下のようなtitle要素が出力される

<title data-n-head="true">ok - Nuxt.js</title>

タグ：Nuxt.js

posted by ねこまんま at 17:59 | Comment(0) | vue.js |

2016年10月03日

Vue.js 2でcompiledメソッド

Vue.js 2ではLifecycleメソッドのcompiledメソッドが廃止され、変わりにmountedメソッドが追加されたもよう。続きを読む

タグ：vue.js compiled mounted

posted by ねこまんま at 12:21 | Comment(0) | TrackBack(0) | vue.js |

2016年09月27日

vue.jsの基本

vue.jsを最初に触ってから、結構たったのでもう一度復習。続きを読む

タグ：vue.js

posted by ねこまんま at 17:37 | Comment(0) | TrackBack(0) | vue.js |

2014年03月24日

vue.jsファーストインプレッション

Backbone.jsやAngluar.js、Knockout.jsはもう遅い。これからはvue.jsらしいのでとりあえず触ってみた。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
</head>
<body>
<style>
li.done {
    text-decoration: line-through;
}
</style>
<div id="demo">
    <h1>{{title | uppercase}}</h1>
    <ul>
        <li
            v-repeat="todos"
            v-on="click: done = !done"
            class="{{done ? 'done' : ''}}">
            {{content}}
        </li>
    </ul>
</div>
<script>
var demo = new Vue({
    el: '#demo',
    data: {
        title: 'todos',
        todos: [
            {
                done: true,
                content: 'Learn JavaScript'
            },
            {
                done: false,
                content: 'Learn vue.js'
            }
        ]
    }
});
</script>
</body>
</html>

タブパネルを作るとこんな感じ。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
</head>
<body>
<style>
a.active{
    font-weight:bold;
}
</style>
<div  id="tabpanel" v-on="click: tabChange">
	<a href="#tab1" v-class="active:tabSelected=='#tab1'">tab1</a>
	<a href="#tab2" v-class="active:tabSelected=='#tab2'">tab2</a>
	<a href="#tab3" v-class="active:tabSelected=='#tab3'">tab3</a>
	<div id="tab1" v-show="tabSelected=='#tab1'">CSS1</div>
	<div id="tab2" v-show="tabSelected=='#tab2'">CSS2</div>
	<div id="tab3" v-show="tabSelected=='#tab3'">CSS3</div>
</div>
<script>
var demo = new Vue({
    el: '#tabpanel',
    data: {
        tabSelected: '#tab1',
    },
    methods: {
        tabChange: function (e) {
        	console.log(e)
        	if(e.target.nodeName === 'A'){
            this.tabSelected = e.target.getAttribute("href");
            }
            return false
        }
    }
});
</script>
</body>
</html>

タグ：vue.js

posted by ねこまんま at 14:05 | Comment(0) | TrackBack(0) | vue.js |