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メソッドが追加されたもよう。続きを読む
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 | 更新情報をチェックする