【Vue】单向绑定、双向绑定及事件绑定

【Vue】单向绑定、双向绑定及事件绑定

单向绑定

<div id="app">
    <div v-bind:style="msg">单向绑定</div>
    <!-- 简写 -->
    <div :style="msg">单向绑定2</div>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'color:red;'
        }
    })
</script>

---

双向绑定

<div id="app">
    {{keyword}}
    <br/>
    <input type="text" :value="keyword"/>
    <br/>
    <input type="text" v-model="keyword"/>    
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            keyword:"hello,world"
        }
    })
</script>

---

事件绑定

<div id="app">
    <button v-on:click="show()">事件绑定1</button>
    <!-- 简写 -->
    <button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            show() {
                console.log("show.....")
            }
        }
    })
</script>