Vue数据绑定与挂载详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Zhangzhang15/article/details/126291636

本文介绍了Vue中的数据绑定方法，包括v-bind的单向数据绑定和v-model的双向数据绑定，强调了v-model在输入类标签元素中的应用。同时，详细讲解了Vue实例的两种el挂载方式，分析了它们的使用场景和区别。最后，探讨了Vue数据的两种声明方式，函数式和对象式的data，并指出在组件中data必须是函数形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二、创建Vue实例随后通过v.$mount("#")指定el的值

Vue中有两种绑定方法

单向数据绑定

双向数据绑定

v-bind：单项数据绑定

数据只能从data流向页面（当data数据发生改变页面渲染也会发生改变，但是当页面发生改变data数据并不会发生改变）

v-model：双向数据绑

数据不仅能从data流向页面，还可以从页面流向data（当data数据发生改变页面渲染也会发生改变，当页面value值发生改变data数据也会发生改变）

v-model：value 可以简写为 v-model 因为v-model默认收集的是value值

注意知识点：

v-model指令只能运用在输入类标签元素（例如表单里的：input 单选框多选框多行输入等） 需要有value值 因为除输入类标签元素其余标签例如h1...h6用户无法输入无法捕获用户输入的值所以无法实现双向数据绑定

v-bind和v-model简写：

<body>
    <div id="app">
        <!-- 单向数据绑定：<input type="text" v-bind:value="obj"><br> -->
        <!-- v-bind简写 -->
        单向数据绑定：<input type="text" :value="obj"><br>

        <!-- 双向数据绑定：<input type="text" v-model:value="obj"> -->
        <!-- v-model简写 -->
        双向数据绑定：<input type="text" v-model="obj">
    </div>
</body>

<script src="./vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            obj: "我是铁甲小宝"
        }
    })
</script>

二、Vue el的两种写法

el有两种写法：

1、new Vue的时候配置el属性

2、创建Vue实例随后通过v.$mount("#")指定el的值

一、new Vue的时候配置el属性

<body>
    <div id="app">
        <h1>你好,我是{{name}}</h1>
    </div>
</body>

<script src="./vue.min.js"></script>
<script>
    new Vue({

        // 第一种挂载写法
        el: "#app",

        data: {
            name: "张张"
        }
    })      
</script>

效果图：

二、创建Vue实例随后通过v.$mount("#")指定el的值

<script src="./vue.min.js"></script>
<script>
    // 第二种挂载写法

    const vm = new Vue({

        // 第一种挂载写法
        // el: "#app",

        data: {
            name: "张张"
        }

    })  
    vm.$mount("#app")    
</script>

两种挂载方式的结论：

$mount 为手动挂载，在项目中可用于延时挂载(例如在挂载之前要进行一些其它操作 , 判断等) , 之后要手动挂载上 . new Vue时 , el和 $mount 并没有本质上的不同；

vue对象属于‘未挂载’状态，需要手动指定挂载，在对象后面 .$mount()加上dom元素。简单一句话来概括的话就是生命周期路线的不同，但是没有影响。

三、Vue data的两种写法

data有两种形式

1、函数式

2、对象式

一、函数式

注意：data函数式不能写成箭头函数因为箭头函数没有自己的this 会往全局查找到window

<div id="app">
        <h1>我是{{name}}</h1>
    </div>

<script src="./vue.min.js"></script>
<script>
        new Vue({
            el:"#app",

            // 函数式
            data() {
                // 必须要return出一个
                return {
                    name:"张张"
                }
            },
        })
    </script>

二、对象式

 <script>
        new Vue({
            el: "#app",

            // 对象式
            data: {
                name: "张张张"
            }
        })
    </script>