vue中的v-bind與v-on的使用

（1）實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind v-on</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div class="app">
        <input type="button" v-bind:title="myTitle" value="按鈕1" v-on:click="show">
        <!-- v-bind用來綁定屬性 --><!-- v-on用來綁定點擊事件 --> 
        <input type="button" :title="myTitle" value="按鈕2" v-on:mouseover="show">
        <!-- v-bind:title可以簡寫為:title --><!-- v-on用來綁定鼠標移動事件 --> 
        <input type="button" v-bind:title="myTitle + '后來增加的內容'" value="按鈕3" v-on:mouseout="show">
        <!-- v-bind中引號內容可看做一個js中的表達式，因此可進行連接字符串的操作，寫合法的js表達式-->
    </div>
    <script>
        var vm = new Vue({
            el:'.app',
            data:{
                myTitle:'我是一個title'
            },
            methods:{
                show:function() {
                    alert('你好呀！')
                } //定義了一個方法show，通過v-on綁定到事件中，實現效果
            }
        })
    </script>
</body>
</html>

（2）摘要

　　v-bind用來綁定屬性（v-bind:title="myTitle"），v-on用來綁定事件（v-on:click="show"）。

　　v-bind：綁定的屬性名稱可簡寫為：綁定的屬性名稱。

　　v-on:綁定的事件名稱可簡寫為 @綁定的事件名稱。

　　v-bind中引號內容可看做一個js中的表達式，因此可進行連接字符串的操作，可以寫其他合法的js表達式。

　　在vm中的methods對象中定義方法--show:function() {alert('你好呀！')} 。通過v-on綁定到事件中，實現效果。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue.js學習筆記之v-bind,v-on vue.js的v-bind Vue：v-bind/v-on的縮寫 vue v-bind v-on v-bind和v-on vue v-for v-on v-bind的結合使用 [Vue]Vue語法糖v-bind、v-on vue中v-on和v-bind的區別 Vue中 v-bind和v-on 縮寫學習：vue中v-on和v-bind