vue基础语法（2）

1.v-on：绑定vue中的方法，可以用@代替

传递参数的事件，不加参数的方法默认event为参数
加参数的事件默认event作为最后一个参数

2.v-bind：绑定vue中的数据，可以调用vue中的数据，可以用：代替

3.v-model：绑定视图中的数据，改变视图中的数据可以修改vue中的数据

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    简单绑定事件-->
<button @click="hello">点击</button>
<!--    传递参数的事件，不加参数的方法默认event为参数
         加参数的事件默认event作为最后一个参数 -->
<button  @click="hello1(msg)">点击2</button>
<!--    使用v-bind-->
<a :href="url">百度</a>
<!--    使用v-bind 和v-model实现双向绑定-->
<input type="text" :value="msg" v-model="msg">{{msg}}
</div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    var mv=new Vue({
        el:"#app",
        //记得加s
        methods:{
            hello:function () {
              alert("hello");
            },
            hello1:function (data) {
                alert(data)
            }
        },
        data:{
            msg:"hi",
            url:"https://www.baidu.com"
        }

    });
</script>
</html>
测试结果：

 

 

 

 

posted @ 2022-07-07 09:32  zcz666  阅读(24)  评论(0)    收藏  举报