Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v-bind を使って、カーソルをテキストに合わせると、現在時刻を表示する例 #Vue.js のチュートリアルを Codepen でやる (初心者向け) #1047

Open
YumaInaura opened this issue Apr 3, 2019 · 0 comments
Open

v-bind を使って、カーソルをテキストに合わせると、現在時刻を表示する例 #Vue.js のチュートリアルを Codepen でやる (初心者向け) #1047

YumaInaura opened this issue Apr 3, 2019 · 0 comments
Labels
qiita twitter

Comments

@YumaInaura
Copy link
Owner

YumaInaura commented Apr 3, 2019 •
edited

Tutorial

Introduction — Vue.js

Codpen

Vue.js Playground

HTML

  • v-bind:title="message という書き方で HTML 的な title 属性の中身を、 js data の message に紐づけているみたいだ。

リストレンダリング — Vue.js

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds
        to see my dynamically bound title!
      </span>
    </div>

        <script src="index.js"></script>
    </body>
</html>

Js

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

View

  • テキストにマウスカーソルを合わせると現在時刻が表示される
  • この現在時刻が動的に更新されていくわけではないようだ
  • 何度カーソルを当てたり外したりしても、値は変わらないようだ
  • 確かにサンプルでもメッセージは「このページをロードした時刻」という表現になっている ( You loaded this page on )

image

image

NOTE

  • 現時点ではぼんやりとしか分からないが v-model という方式もあるらしい。

【Vue】v-bind と v-model の違い - 山崎屋の技術メモ

ざっくり
v-bind は Model の値を HTML コンポーネントに反映（出力）します。HTML コンポーネントの値が変わっても、Model の値は変わりません。Model から HTML への一方通行です。

一方、v-model は Model と View（HTML）の双方向に影響します。 HTML コンポーネントの値に変更があった場合、自動で Model の値を更新します。
@YumaInaura YumaInaura changed the title v-bind を使って、マウスカーソルをテキストに合わせると、現在時刻を表示する例 #Vue.js のチュートリアルを Codepen でやる (初心者向け) v-bind を使って、カーソルをテキストに合わせると、現在時刻を表示する例 #Vue.js のチュートリアルを Codepen でやる (初心者向け) Apr 3, 2019
This was referenced Apr 3, 2019
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
qiita twitter
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@YumaInaura