BETA

vue.js備忘

投稿日:2020-07-12
最終更新:2020-07-19

最小限のひな形

hello.html

<!DOCTYPE html>  
<html lang="ja">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
    <div id="app">  
      <p>{{ message }}</p>  
    </div>  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script src="./hello.js"></script>  
</body>  
</html>  

hello.js

var app = new Vue({  
  el: '#app',  
  data: {  
      message: "hello vue!"   
  }  
});  

イベント

html

<!DOCTYPE html>  
<html lang="ja">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
    <div id="app">  
    <form>  
        <input type="button" value="click" v-on:click="onclick">  
    </form>  
    <p>time: {{ current }}</p>  
    </div>  

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script src="./method.js"></script>  
</body>  
</html>  

js

var app = new Vue({  
  el: '#app',  
  data: {  
      //current: "aaa"  
      current: new Date().toLocaleString()  
  },  
  methods: {  
    onclick: function(){  
    this.current = new Date().toLocaleString();  
        }  
  }  
});  

イベント発生元のhtml要素のvalueは,以下で取れる(methods部分のみ抜粋)。

methods: {  
     onclick: function(e){  
         console.log(e.target.value);  
         }  
   }    

双方向データバインド

html

<!DOCTYPE html>  
<html lang="ja">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
  <div id="app">  
    <form>  
      <label for="name">namae: </label>  
        <input type="text" id="name" v-model="myName">  
      </form>  
      <p>hello {{ myName }} san</p>  
  </div>  

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script src="./model.js"></script>  
</body>  
</html>  

js

var app = new Vue({  
  el: '#app',  
  data: {  
    myName: 'guest'  
  }  
})  

配列

html

プリミティブ値を含む配列では、単純に $value として値にアクセスできます:

<ul id="tags">  
  <li v-repeat="tags">  
    {{$value}}  
  </li>  
</ul>  

javascript

new Vue({  
  el: '#tags',  
  data: {  
    tags: ['JavaScript', 'MVVM', 'Vue.js']  
  }  
})  

公式のプリミティブ値の配列

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@mihiraTakashiの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう