vue中的关键字

最新推荐文章于 2023-08-11 14:58:19 发布

ColdplayYELL

最新推荐文章于 2023-08-11 14:58:19 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_42786016/article/details/115048578

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这些关键字都是作为html页面的标签中的属性

1、v-model

是将标签的value值与vue实例中的data属性值进行绑定。

<!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>
<body>
    <div id='app'>
        <span>
         你好,{{message}}
        </span>
        <input type="text" v-model='message' />
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
        }
    })
</script>
</html>

2、v-on

通过配合具体的事件名，来绑定Vue中定义的函数

<!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>

<body>
    <div id='app'>
        <span>
         你好,{{message}}
        </span>
        <input type="text" v-on:input='changeMessage()' />
    </div>
</body>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
        },
        methods:{
            changeMessage:function(){
                console.log("Hello vue!")
            }
        }
    })
</script>

</html>

补充内容：
1、event.target.value
比如在相应函数里，可以指明使用event内置的参数对象。该对象表示当前事件，可以使用event.target.value获取当前事件对象的value值。
2、this
this表示当前value对象，可以通过this.调用当前对象的属性和方法
3、v-on还可以简写
v-on:input=""=====>@input=""