Vue basics (1)-data binding, events, event modifiers

Data binding

Using new Vue() in vue can realize the two-way binding of data to page elements.

Use the el parameter in Vue to bind the id of the tag to establish an association, the data parameter defines the data that the tag needs to bind, and the methods parameter defines the collection of functions

Use { {field}} in the tag to bind data to the tag;

Use v-model="field" in the tag to realize the two-way binding of the tag to the data model;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./[email protected]@vue/dist/vue.js"></script>
<body>
    <div id="div1">
        <h1>我是{
   
   {name}},拥有{
   
   {star}}个赞</h1>
        <input type="text" v-model="star">
        <button v-on:click="star++">点击加1</button><!--绑定点击事件，简单逻辑可以直接写-->
        <button v-on:click="cancle">点击减1</button><!--绑定点击事件的函数-->
    </div>
    <script>
        let vue = new Vue({
            el: "#div1",//綁定到div元素
            data: {//定义元素中使用的数据
                name: "jhon",
                star: 1
            },
            methods: {//定义元素中使用到的函数
                cancle() {
                    if (this.star > 0) {
                        this.star--
                    } else {
                        alert("不能再减啦！")
                    }
                }
            }
        })
    </script>
</body>

</html>

Events and event modifiers

Use v-on:click="function or simple code logic" on the label to realize the click event.

Provides stop, prevent and other modified attributes for events to organize event bubbling and prevent default behaviors from being triggered;

For example, the following large div and small div have set click events, but the small div click will bubble to the large div and cause it to be triggered twice. You can use stop to prevent the occurrence of bubbling. The default jump behavior occurs when the <a> tag is clicked. You can use prevent to organize the jump behavior.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./[email protected]@vue/dist/vue.js"></script>
<body>
    <div id="div1" style="border: 1px solid blue; padding: 20px;" v-on:click="alert"><!--大div点击触发alert函数-->
        大div
    <div  style="border: 1px solid red; padding: 20px;" v-on:click.stop="alert"><!--小div点击触发alert函数,阻止事件冒泡到上一级div触发第二次alert函数-->
        小div 点击后阻止冒泡到上一级div
        <a href="http://www.baidu.com" v-on:click.prevent>点击后阻止跳转百度</a><!--阻止<a>标签默认的跳转行为-->
    </div>
    </div>
    <script>
        let vue = new Vue({
            el: "#div1",//綁定到div元素
        
            methods: {//定义元素中使用到alert函数
                alert(){
                    alert("hello")
                }
            }
        })
    </script>
</body>
</html>

Vue basics (1)-data binding, events, event modifiers

Data binding

Events and event modifiers

Guess you like