質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

231閲覧

vue.js methodsのつかい方について

holic

総合スコア134

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/10/26 16:28

編集2018/10/27 01:42

前提・実現したいこと

metodsの使い方について疑問が出てきたので投稿させてください。
やりたかったことはマウスオーバー、マウスアウトで背景画像がチェンジするという簡単なシステムを作っていました。
まずはソースを記します。

※~~cssは本題と関係ないと思いますので、省きます。~~⇒追記しました。

該当のソースコード

html

1<script src="./js/vue.js"></script> 2<body> 3 4 <div class="wrap bg_jiyu" id="jiyu_bg"> 5 <div id="jiyu_area"> 6 <div class="inner"> 7 <ul class="bt_area"> 8 <li><a @mouseover="bgChenge($event)" @mouseout="bgAlways" value="cov01" href="javascript:void(0)">ボタンその1</a></li> 9 <li><a @mouseover="bgChenge($event)" @mouseout="bgAlways" value="cov02" href="javascript:void(0)">ボタンその2</a></li> 10 <li><a @mouseover="bgChenge($event)" @mouseout="bgAlways" value="cov03" href="javascript:void(0)">ボタンその3</a></li> 11 </ul> 12 </div> 13 </div> 14 <i class="cov_always"></i> 15 <transition name="fade"> 16 <i v-if="currentCheck('cov01')" class="cov01" key="cov01"></i> 17 <i v-if="currentCheck('cov02')" class="cov02" key="cov02"></i> 18 <i v-if="currentCheck('cov03')" class="cov03" key="cov03"></i> 19 </transition> 20 </div><!-- / .wrap --> 21 </div> 22 <!-- / .main-continer --> 23 <script> 24 let jiyu_bg = new Vue({ 25 el: '#jiyu_bg', 26 data: function () { 27 return { 28 msg: '', 29 currentBg: null 30 } 31 }, 32 methods: { 33 bgChenge: function (event) { 34 this.currentBg = event.target.attributes.value.value; 35 //console.log(event.target.attributes.value.value); 36 }, 37 bgAlways: function () { 38 this.currentBg = null; 39 }, 40 currentCheck: function (name) { 41 return this.currentBg === name; 42 } 43 } 44 }) 45 </script> 46</body>

css

1 .bg_jiyu { 2 position: relative; 3 z-index: 1; 4 } 5 6 .bg_jiyu [class^=cov] { 7 /* display: none; */ 8 width: 100%; 9 height: 100%; 10 position: absolute; 11 top: 0; 12 left: 0; 13 z-index: -2; 14 background-size: cover; 15 } 16 17 .bg_jiyu i.cov_always { 18 background-image: url(images/jiyubg00.jpg); 19 } 20 21 /* .bg_jiyu [class^=cov] { 22 display: none; 23 } */ 24 25 .bg_jiyu i.cov1 { 26 background-image: url(images/jiyubg01.jpg); 27 } 28 29 .bg_jiyu i.cov2 { 30 background-image: url(images/jiyubg02.jpg); 31 } 32 33 .bg_jiyu i.cov3 { 34 background-image: url(images/jiyubg03.jpg); 35 } 36 37 .bt_area { 38 position: static; 39 z-index: 10; 40 height: 500px; 41 display: flex; 42 justify-content: space-between; 43 align-items: flex-end; 44 padding-bottom: 40px; 45 } 46 47 .bt_area li a { 48 border: 3px solid #fff; 49 color: #fff; 50 font-size: 3.0rem; 51 font-weight: bold; 52 padding: 20px 30px; 53 transition: 0.4s; 54 } 55 56 @media screen and (max-width: 640px) { 57 .bt_area { 58 flex-direction: column; 59 justify-content: flex-end; 60 align-items: center; 61 } 62 63 .bt_area li { 64 width: 100%; 65 } 66 67 .bt_area li a { 68 display: block; 69 padding: 10px 15px; 70 margin-bottom: 10px; 71 font-size: 1.4rem; 72 text-align: center; 73 } 74 } 75 76 .bt_area li a:hover { 77 background-color: rgba(251, 251, 251, 0.7); 78 } 79 80 /*transition設定*/ 81 .fade-enter-active, 82 .fade-leave-active { 83 transition: all 0.5s ease; 84 } 85 86 /* 表示される時は0から1へ*/ 87 .fade-enter { 88 opacity: 0; 89 } 90 91 .fade-enter-to { 92 opacity: 1; 93 } 94 95 /* 消える時は1から0へ*/ 96 .fade-leave { 97 opacity: 1; 98 } 99 100 .fade-leave-to { 101 opacity: 0; 102 }

分からないところ

上記ソースで目的とする挙動はなんとか出来ておりました、
vue.jsの理解を深めたいためにお聞きしたいです。

その①
メソッド「currentCheck」が発動するのはどうしてでしょうか。
メソッドに3つ登録しました、「bgChenge」「bgAlways」「currentCheck」です。
わたしの理解では、メソッドに登録されているものはイベントがなければ発動しないと思ってました、
「bgChenge」は@mouseoverにより発動します。
「bgAlways」は@mouseoutにより発動します。
上記二つはもちろん理解できました、
しかし「currentCheck」はとくにイベントがないのにもかかわらず、発動します。

currentBgの値が変化することにより発動している?
computedに登録したならば、function記述の中に対応するdata値が存在し、それが変動しているならば発動すると理解してました、
まさしくこの動きをmethodsに登録したものがしてくれております。
これはどうしてでしょうか。

その②

html

1<i v-if="currentCheck('cov01')" class="cov01" key="cov01"></i> 2<i v-if="currentCheck('cov02')" class="cov02" key="cov02"></i> 3<i v-if="currentCheck('cov03')" class="cov03" key="cov03"></i>

上記の記述ですが、『cov01』ばかりになってしまって、あまりスマートには見えません。
他のattr要素(classやkey)にも同じ値が入っているので、attr要素の値を使うことはできないのでしょうか。
以下のような感じです。

html

1<i v-if="currentCheck()" class="cov01" key="cov01"></i> 2<i v-if="currentCheck()" class="cov02" key="cov02"></i> 3<i v-if="currentCheck()" class="cov03" key="cov03"></i>

お手数ではございますが、ただいま、javascript,vueの勉強中でございます、
今後の理解のためにもご教示をお願いします。

補足情報(FW/ツールのバージョンなど)

vue:2.5.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ReactやVueといった最近のUI frameworkはそのdeclarative(宣言的)な性質が便利だということで人気がでています。「どのように」DOMを操作するかは気にせず、「何を」表示するかを指定するだけでよく、また state (Vue ではdataのこと) が変わると自動的に表示が更新される、つまり reactive であるというのも特徴です。

「currentCheck」はとくにイベントがないのにもかかわらず、発動します。

v-if="currentCheck('cov01')"と書いているので、Vueはこの currentCheck('cov01') という expression を実行して該当の要素を表示するかどうかを決定するからです。

Vue はこの currentCheckという method が currentBg に依存しているというのをわかっているので、currentBgの値が変更されると rendering が発生して、再びcurrentCheckが実行されて表示が更新されます。

他のattr要素(classやkey)にも同じ値が入っているので、attr要素の値を使うことはできないのでしょうか。

attr要素ではなくattributeのことだと思いますが、そのようなまわりくどいことは普通しません。
今の場合同じような要素を並列に並べているので、v-forを使うのがいいです。そうすれば、v-forの変数から、今欲しい値('cov**')が作れます。

↓ここもattribute から値を取得してしまっていますが、上と同様の方法でやるのがいいです。

js

1 bgChenge: function (event) { 2 this.currentBg = event.target.attributes.value.value; 3 //console.log(event.target.attributes.value.value); 4 },

今の場合、currentBgは string "cov**"である必要はなく、単に整数値(1,2,3)でいいと思います。あと mouseover ではなく mouseenter でいいと思います。

js

1 bgChenge: function (i) { 2 this.currentBg = i 3 },

html

1... 2<li v-for="i in 3"><a @mouseenter="bgChenge(i)" @mouseout="bgAlways" href="javascript:void(0)">ボタンその{{i}}</a></li> 3... 4<i v-for="i in 3" v-if="currentCheck(i)" :class="'cov' + i" :key="i"></i> 5...

このコードだと class は cov01 ではなく cov1 という形になってるので注意してください。

JSFiddle Demo

投稿2018/10/26 17:50

編集2018/10/26 17:53
karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

holic

2018/10/27 01:48 編集

Karamarimo様 的確なご回答ありがとうございます。すっきりとしました。 上記お知らせしていただいたvue公式記事からも、メソッドである「currentCheck」とプロパティである「currentBg」が依存関係にあるとよく理解しました。 デモページも作成していただきましてありがとうございます、cssの部分は想像で書いていただきまして失礼しました、私のcssも追記いたしました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問