Vue 基础

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

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

目录

Vue中有两种绑定方法

v-bind:单项数据绑定 

v-model:双向数据绑

注意知识点:

v-bind和v-model简写:

二、Vue el的两种写法

el有两种写法:

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

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

两种挂载方式的结论:

三、Vue data的两种写法

data有两种形式

一、函数式

二、对象式

data两种方式总结:


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>

data两种方式总结:

1、目前两种写法均可 但是组件里的data必须是函数式 不然会报错  

2、由Vue管理的函数不要写箭头函数 写了箭头函数this就不是Vue实例了


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值