Vue.jsで遊んでみる(1) スタイルのバインド

Vueインスタンス同士の連携ってどうやるんだろうと思って書き始めました。

が本題に入る前に、長くなっちゃいました。

そのわりに内容が薄いです。

jp.vuejs.org

この記事で試したこと
- はじまり
- 箱を動かしてみる
  - Vue.jsを使っていく
  - 横に動かす

この記事で試したこと

Vue.jsを使った、スタイルのバインディング

はじまり

とりあえず「box」を二つ用意してみたよ。

f:id:konoemario:20171108204533p:plain:w300

HTMLはこれだけ。
(もちろんdoctypeやらなんやらはあるけれども省略しているよ。)

index.html

<h1>はじまり</h1>
 <div class="box1">box1</div>
 <div class="box2">box2</div>

スタイルシートは、こんな感じのものを読み込んでいる。
ちなみに、このスタイルシートはもうでてこないだろうから、忘れても大丈夫。

style.css

.box1,.box2{
      width:100px;
      height:100px;
      background:yellow;
      margin:10px;
      text-align:center;
 }
      
.box2{
      background:red;
}

ここからどんなことが起きるんだろう。

箱が爆発するかもしれないし、かわい青い女の子に変化するかもしれない。

箱を動かしてみる

んっだよ、ふざけるな、という方はここでお別れなんだ。

箱を動かしてみたかったんだ。それだけなんだ。
箱をクリックすると右に動くことにしよう。

Vue.jsを使っていく

Vue.jsを簡単に動かすときには、Vue.jsのCDNを読み込んで置くのが一番手っ取り早い。

jp.vuejs.org

ここでは、Vue.jsをCDNやら、なんやらで、なにかしら用意したとして話を進めるよ。

さっそく、app.jsを書いてみた。

app.js

let box1 = new Vue({
    el:'.box1',
})

let box2 = new Vue({
    el:'.box2',
})

こんな感じにVueインスタンスを二つ作ってみる。

いろいろ間違っているかもしれないけれどもそのまま続けるよ。

ちゃんと、バインドできてるかな？と不安に思ったら、こんな感じで簡単なイベントとメソッドで確認しよう。
(もちろん、Chromeの拡張機能であるVueのプラグインのほうが手っ取り早い)

index.html

<h1>Vueインスタンスの確認</h1>
<div class="box1" @click="sayHello">box1</div>
<div class="box2" @click="sayHello">box2</div>

「box1」をクリックしたら、Vueインスタンス(box1)のsayHelloメソッドを呼ぶ
「box2」をクリックしたら、Vueインスタンス(box2)のsayHelloメソッドを呼ぶ

app.jsはこんな感じ。
app.js

let box1 = new Vue({
    el:'.box1',
    methods:{
        sayHello:function(){
            console.log('hello box1');
        }
    }
})

let box2 = new Vue({
    el:'.box2',
    methods:{
        sayHello:function(){
            console.log('hello box2');
        }
    }
})

実行してクリックするとこんな感じになったよ。

f:id:konoemario:20171108215309p:plain:w500

横に動かす

横に動かすにあたっては、cssのスタイルをバインドすることで試してみる。

javascriptを使って、クラスを動的に切り替えるのと何も変わらないけれども、やってみることに意味があるんだよ！

こんな感じにstyle属性にstyleObjectをバインドさせる。 index.html

<h1>スタイルをバインドする</h1>
<div class="box1" @click="sayHello" v-bind:style="styleObject">box1</div>
<div class="box2" @click="sayHello" v-bind:style="styleObject">box2</div>

Vueインスタンスには、dataとしてstyleObjectを定義する。
styleにはcssのtransformをあてていく。

app.js

let box1 = new Vue({
    el:'.box1',
    data: {
        styleObject:{
            transform: 'translateX(0px)'
        },
    methods:{
        sayHello:function(){
            console.log('hello box1');
        }
    }
})

let box2 = new Vue({
    el:'.box2',
    data: {
        styleObject:{
            transform: 'translateX(0px)'
        },
    methods:{
        sayHello:function(){
            console.log('hello box2');
        }
    }
})

translateX(0px)なので、この状態だと何も動かない。
クリックして、0pxの値をかえていくことで、やりたいことが実現できそう。

とりあえず、こんな感じはどうだろうか、試してみた。
translateX()の値にdataで定義している値をそのまま使ってみた。

app.js

let box1 = new Vue({
    el:'.box1',
    data: {
        pointX:0
        styleObject:{
            transform: 'translateX('+this.pointX+'px)'
        },
    methods:{
        //index.htmlもsayHelloからこれにメソッドをかえてるよ！
        addPointX:function(){
            this.pointX++;
            console.log(this.pointX);
        }
    }
})

//box2は省略

が、これだとうまくいかない。
dataの値を他のデータには使えないのだろうか。

なので、transformの値そのものを書き換えることにした。

app.js

let box1 = new Vue({
    el:'.box1',
    data: {
        pointX:0
        styleObject:{
            transform: 'translateX('+this.pointX+'px)'
        },
    methods:{
        //index.htmlもsayHelloからこれにメソッドをかえてるよ！
        moveRight:function(event){
            this.pointX++;
            this.styleObject.transform = convertTranslate(this.pointX);
        },
    }
})

文字列「translateX(value)」を返す関数
function convertTranslate(value)
{
    return  'translate(' + value + 'px)'
}

//box2は省略