TZ_16_Vue the v-model and v-on

1.v-model is a two-way binding, it will affect each other view (View) and model (Model).

Since it is a two-way binding, the data must be modified in the view, thus defining a view of the element type. Currently v-model elements that can be used are:

input
select
textarea
checkbox
radio
Components (custom components in Vue)

Substantially except for the last one, the other is the entry form.

For example:

html：

< Body > 
< div the above mentioned id = "App" > 
    <-! Way binding -> 
    < the INPUT of the type = "text" v-Model = "NUM" > 

    < the Button v-ON: the Click = "Tips =" NUM ++ " > + </ Button > 
    < h1 of > 
        I < span V-text = "name" > </ span > < br > 
        ate individual {{num}} 
    </ h1 of > 
    <span v-text="name"></span><br>
    <span v-html="name"></span>

    <h1>开售以下课程</h1>
    <input type="checkbox" value="java" v-model="lessons"/>java<br>
    <input type="checkbox" value="python" v-model="lessons"/>python<br>
    <input type="checkbox" value= "iOS" V-Model = "Lessons" /> iOS < br > 

    < h1 of > You Sell enough </ h1 of > 
　　　<-! the Join () method for all elements in the array into a string. Elements are separated by a specified delimiter -> 
    {{lessons.join ( ",")}}    
</ div > 

< Script the src = "the node_modules / VUE / dist / vue.js" > </ Script > 
< Script > 
    const App =  new new Vue ({ 
        EL: " #app " , // Element 
        Data:Tiger " , 
            NUM: . 1 , 
            Lessons: [] 
        }, 
    }); 

</ Script > 
</ body >

2.v-on instruction for binding events to elements on the page.

　　In addition, the event binding can be abbreviated, for example, v-on:click='add'can be abbreviated as@click='add'

<body>
<div id="app">
    <!--v-on 绑定事件-->
　　<!--单机弹出一个提示框-->
    <button v-on:click="tips">点我</button>
    <br>
　　　<!--单机按钮 但是不触发div的v-on 事件冒泡使用 v-on:click.stop="触发的事件" -->
<div style="height: 100px;width: 100px;background-color: aqua;"  v-on:click="printf('div')">
        <button v-on:click.stop="printf('button')">点我试试</button>
    </div>
     <!--单机超链接 不触发href的地址 使用 v-on:clikc.prenevt="触发的事件"-->
    <a href="http://www.baidu.com" v-on:click.prevent="printf('百度一下')">百度一下</a>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        methods: {
            tips: function () {
                alert("hello");
            },

        created: function () {
            this.name = "你好"
        },
            printf:function (msg) {
                console.log(msg)
            }
        },
    });

</script>
</body>

TZ_16_Vue the v-model and v-on

Guess you like