今日もぽつぽつと。
まとめて書いていく方がトータルいいのかもしれないね。
著作権とか、そっちの方も気になる。　もしまずそうならば教えてほしい。
改善はしていきたいと思うから、うん。

keyupメソッド

<div id="app">
    <input type="text" v-on:keyup.enter="pressEnter"/>
</div>

<script>
new Vue({
    el:'#app',
    methods:{
        pressEnter: function(){
           alert("enter key press.")
        }
    }
})
</script>

keyupメソッドで各種キー操作を呼び出せる。
この場合は入力項目でエンターキーを押すとalertが発生するようだ。
書き方はv-onの時と同じ。メソッドチェーンで複数のキーを指定することもできる。

clickメソッドにメソッドチェーンでキーを指定すると、
押しながらクリックしないと反応しないボタンを作ることができる。

deta binding

<div id="app">
    <input type="text" v-model="dataText"/>
    <p>{{ dataText }}</p>
</div>

<script>
new Vue({
    el:'#app',
    data: {
        dataText:''
    }
})
</script>

一番シンプルなデータバインディングは、v-model属性でdataTextを指定すること。
メソッドチェーンで各種操作を行うこともできる。

<div id="app">
    <div v-html="data"></div>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        htmldata:'<h2>testing</h2>'
    }
})
</script>

htmlタグは通常レンダリングされて無害化されるため、
そのまま表示されない。表示する場合はv-htmlを使う。

<div id="app">
    <p v-if="value > 20"> up to 20</p>
    <p v-else-if="value > 10"> up to 10</p>
    <p v-else>under 10</p>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        value: 10
    }
})
</script>

htmlタグの中でif文を使うことができる。
タグの中に条件式を直で書いて、その内容を表示する。
組み合わせに寄っては、
より動的にパラメータによって切り替えるという芸当もできそうだ。