Vue基本语法与数据绑定（单向，双向）

阿瞒有我良计15

已于 2023-03-31 20:56:31 修改

阅读量434

点赞数 1

分类专栏： # VUE 文章标签： vue.js javascript 前端

于 2023-03-27 17:23:52 首次发布

本文链接：https://blog.csdn.net/qq_56444564/article/details/129797936

版权

VUE 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue的语法

1.插值语法

格式：

{{xxx}},xxx是js表达式，可以直接读取到data中的所有区域

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    插值语法的基本使用：{{val}}
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            val: "今天是2023年3月27日"
        }
    })
</script>
</body>
</html>

2.指令语法

注意： vue中的所有指令都是以“v-”开头的

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<h1>指令语法的使用</h1>

</body>
<div id="app">
    <a v-bind:href="val1">点我跳转，我是百度</a>
    <br>
    <a v-bind:href="val2.url1">点我跳转，我是搜狗</a>
    <br>
    <a v-bind:href="val2.url2">点我跳转,我是bing</a>
    <br>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            val1: "https://www.baidu.com/",
            val2: {
                url1: "https://www.sogou.com/",
                url2: "https://cn.bing.com/?mkt=zh-CN"
            }
        }
    })
</script>
</html>

数据绑定

Vue有两种数据绑定方式：
1. 单向绑定： v-bind 数据只能从data流向⻚面。
2. 双向绑定： v-model数据不仅能从data流向⻚面，也能从⻚面流向data。

单向绑定代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--普通写法：-->
    单向绑定：<input type="text" v-bind:value="name1">
    <br>

    <!--    简便写法-->
    单向绑定：<input type="text" :value="name1">
    <br>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            name1: "今天是2023年3月27日"
        }
    })
</script>
</body>
</html>

使用vue插件改变值看看：

值改变了，数据驱动视图

我们在看看视图能否驱动数据：

可以明显看到单向数据绑定，视图驱动不了数据，但是数据能够驱动视图

现在我们看一下双向绑定：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--普通写法-->
    双向绑定：<input type="text" v-model:value="name1">
    <br>
    <!--简便写法：-->
    双向绑定：<input type="text" v-model="name1">
    <br>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            name1: "我要减肥，我要锻炼"
        }
    })
</script>
</body>
</html>

使用vue插件调试看看：

数据驱动视图：

视图驱动数据：

双向绑定一般都应用在表单类元素上(如:input、select等)
v-model:value可以简写为v-model，因为v-model默认收集的就是value值。

阿瞒有我良计15

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基本语法与数据绑定（单向，双向）

2. 双向绑定： v-model数据不仅能从data流向⻚面，也能从⻚面流向data。可以明显看到单向数据绑定，视图驱动不了数据，但是数据能够驱动视图。1. 单向绑定： v-bind 数据只能从data流向⻚面。注意： vue中的所有指令都是以“v-”开头的。值改变了，数据驱动视图。
复制链接

扫一扫