Vue入门（三）

疯狂的格式化

已于 2022-06-24 11:54:33 修改

阅读量56

点赞数

分类专栏： Vue 文章标签：前端 javascript 开发语言 vue.js

于 2022-06-24 10:35:43 首次发布

本文链接：https://blog.csdn.net/m0_57203243/article/details/125439148

版权

Vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue中的属性绑定和双向数据绑定

属性绑定：

使用 v-bind 进行属性绑定，如下面的代码：

使用模板指令后属性等号后面的内容就变成了 JS表达式

    <body>
        <div id="root">
            <!-- 将title属性和data中的数据项title进行绑定 -->
            <div v-bind:title="title">hello world</div>
            <div v-bind:title="'dell lee' + title">hello world</div>
        </div>
        <script>
            new Vue({
                el: "#root",
                data : {
                    title : "this is hello world"
                }
            })
        </script>
    </body>

缩写：

官方说明：v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

    <body>
        <div id="root">
            <div v-bind:title="title">hello world</div><!-- 完整写法 -->
            <div :title="title">hello world</div><!-- 缩写 -->
        </div>
        <script>
            new Vue({
                el: "#root",
                data : {
                    title : "this is hello world"
                }
            })
        </script>
    </body>

双向数据绑定：

官方说明：你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

官方提示：

单向数据绑定：

    <body>
        <div id="root数据">
            <!-- 单向绑定：数据决定页面的显示，而页面无法决定数据中的内容 -->
            <input :value="content">
            <div>{{content}}</div>
        </div>
        <script>
            new Vue({
                el: "#root",
                data : {
                    content : "this is content"
                }
            })
        </script>
    </body>

双向数据绑定：

    <body>
        <div id="root">
            <!-- 双向数据绑定：页面和数据内容同时发生变化 -->
            <input v-model="content">
            <div>{{content}}</div>
        </div>
        <script>
            new Vue({
                el: "#root",
                data : {
                    content : "this is content"
                }
            })
        </script>
    </body>