JavaScriptで初心者が入門としてやったこと3

JavaScript, vue.jsjavascript, vue.js

広告

前回できなかったことを解決しました。

vue.jsを使って、マウスオーバー時にメニュを表示させたいというものでしたが、イベントが発火せずに、動作しないという事がありました。今回解決したので、まとめておきたいと思います。
JavaScriptで初心者が入門としてやったこと2（前回の記事）

今回のコード

HTML

<html>
<head>
<script src="../node_modules/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="sample.css">
<script src="sample.js"></script>

</head>
<body>
  <div id =header >
    <div id =login-area>
      <div id =login @mouseenter="show_menu" @mouseleave="hidden_menu">
      </div>
      <div v-if="status" id =login-menu @mouseenter="show_menu" @mouseleave="hidden_menu"></div>
  </div>
  </div>
</body>
</html>

JavaScript

window.addEventListener("DOMContentLoaded",()=>{
mouseover();
function mouseover (){
var login =new Vue({
  el: '#login-area',
  data: {
    status:false
  },
  methods: {
    show_menu: function(){
      this.status=true;
    },
    hidden_menu: function(){
      this.status=false;
    }
  }
})
}
});

css

#header {
  width: 100%;
height: 50px;
background-color: burlywood;
}
#login-area{
  width: 150px;
height: 200px;
position: relative;
left: 85%;
}
#login-menu{
  background-color: indigo;
width: 200px;
height: 150px;
position: absolute;
top: 50px;
}
#login{
  width: 50px;
height: 50px;
background-color: cadetblue;
position: relative;
left: 90%;
}

変更点

javaScript

window.addEventListener("DOMContentLoaded",()=>{
mouseover();

無名関数で、HTMLを読んだあとに、メインの関数を呼び出す。

el: '#login-area',

該当する,セレクターが共通の親に含むものでなかったため、扱うことができなかったようです。

表示

マウスを重ねるとメニューが表示

わかったこと

今回のメニューをいきなり作るということで、全く知識がありませんでしたが、セレクターを指定して、プロパティの状態によって、条件レンダリングができることを学びました。今後もvue.jsを触ってスキルを付けていきたいと思います。

広告

JavaScript, vue.jsjavascript, vue.js