Vue data的两种编写形式

于 2023-03-30 14:45:37 发布
阅读量262 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48546501/article/details/129857436
版权

Vue data的两种编写形式

一、对象式
data：{

}

二、函数式
data（）{

}

组件中data的形式必须是函数式，否则会报错

之所以组件中data使用函数式是因为：
Vue中的组件可能需要复用，当两个页面同时使用该组件，如果使用的是对象式，两个页面都指向一个data对象，当一个页面该组件修改了data的数据，另一个页面该组件的data也会被更改。
使用函数式就不会产生此问题

成虚员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue前端框架 —— Vue 实例中 el 和 data 的两种写法
weixin_45661229的博客
08-29 1634
在 Vue 2.0 中创建 Vue 实例时，通常情况下与这两个配置项都是按照一种固定的方式写的，像下面这样。除了上面那一种常用写法之外，el 与 data 都分别有另一种写法。el 的另一种写法使用起来会更灵活，data 的另一种写法在组件中使用较为频繁。在原来代码的基础上将创建的 Vue 实例赋值给一个变量，官方推荐使用 "vm" 当做变量名。将 Vue 实例赋值给 vm 之后在控制台中输出一下 vm（ Vue 实例 ）下图就是 vm 的输出结果，输出结果为一个实例对象。展开后会出现很多以美元符号 '..
Vue | 05.Vue基础 - data数据对象
xyx-Eshang的博客
09-27 1268
文章目录1.概述2.实践 1.概述 Vue中用到的数据定义在data中 data中可以写复杂类型的数据，如对象、数组等 2.实践 在js中定义Vue对象，并在data数据对象中定义几个复杂数据类型的数据： <script type="text/javascript"> new Vue({ el: "#app", data: { message: "hello world", person: {
vue当中的数据绑定、el和data的两种写法
m0_68997646的博客
10-22 1349
vue当中的数据绑定、el和data的两种写法
Vue 3.0 选项 Data
2201_75866484的博客
03-29 756
(例如 plus：() => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以。
vue获取/设置input的内容与双向数据绑定
安之ccy的博客
04-28 1万+
单向操作：获取/设置input内容 <div id="app"> <input type="text" v-bind:value="value" v-on:input="changeValue"> <!--输入即改变value值--> <p>{{ value }}</p> <!--用于显示当前value值--> </div> <script src="https://cdn.jsdelivr.net/
vue以组件或者插件的形式实现throttle或者debounce
10-16
在这篇文章中，我们将探讨如何在Vue中以组件或插件的形式实现这两种功能。 首先，我们来看一下如何通过指令来实现`throttle`和`debounce`。在Vue中，我们可以自定义指令（`v-directive`）来扩展其行为。以下是一个...
vscode快速生成vue模板
08-12
这种功能使得开发者可以快速输入预设的Vue组件结构，节省了手动编写模板的时间，提高了开发效率。下面我们将详细讨论如何在VSCode中设置和使用这些代码片段。 首先，代码片段是VSCode的一种特性，允许用户定义自己...
vue项目前端埋点的实现
10-17
本文将深入探讨两种常见的前端埋点技术：命令式埋点和声明式埋点，并结合Vue的自定义指令和路由拦截器来实现数据统计。 首先，我们了解前端埋点的基本概念。埋点方案大致分为三种类型： 1. **代码埋点**：开发者在...
vue 实现用户登录方式的切换功能
10-15
首先，我们需要在Vue组件的数据（data）选项中定义一个标识符`loginWay`，用于存储当前登录方式的状态。这里，我们设`loginWay`为`true`表示用户选择的是短信登录，而`false`则表示密码登录。如下所示： ```...
vue弹窗插件实战代码
10-18
Vue 弹窗插件是一种常用于移动端开发的交互元素，用于显示临时通知、确认对话框或者加载提示等。本文将详细介绍如何实现一个简单的 Vue 弹窗插件，并将其转化为全局可调用的插件形式。 首先，我们创建基础的 Vue ...
[乐意黎原创] Vue中data定义的三种方式和区别
打杂人
03-06 1万+
在 Vue中，定义data时，经常有好几种写法，一不小心会混淆，这里彻底详述一下，以便记分清 。 一、在vue中，定义data可以有三种写法。 1. 第一种写法，对象。 var app = new Vue({ 　　el: '#app', 　　data: { 　　　　mess: 'aerchi' 　　} }) 2. 第二种写法，data 是一个 函数。 var app = new V...
Vue - el和data的两种写法
qq_39123467的博客
10-11 182
Vue - e和data的两种写法
Vue学习：el 与data的两种写法
weixin_47295886的博客
12-05 352
el的两种写法：直接配置、使用v.$mount()指定 data的两种写法：对象式、函数式 组件的时候必须用函数式 否则报错 vue管理的函数千万不要写成箭头函数，一旦写箭头函数，this就不是vue实例了，而是window 目前Vue管理的函数有data
【VueJS】实例中data属性的三种写法及区别
热门推荐
'Ablaze 的专栏
01-03 1万+
data属性的三种写法1、__<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ isLogin: false } }) </script>2、__<script type="text/javascript"> var a
Vue 中el和data的两种写法
weixin_44141172的博客
11-15 481
Vue实例中el绑定的两种写法： 直接使用el标签去指定容器的id <body> <!-- 准备好一个容器 --> <div id="root"> </div> <script type="text/javascript"> /* 开发环境提示关闭 */ Vue.config.productionTip = false /* new一个Vue */
vue中data定义数字类型_Vue 的几种数据类型处理方式
weixin_39612720的博客
12-20 6198
第一种数据处理在table的tr中，有些做为父级，有些做为子级，区别是用class来区分，点击父级的按钮，子级会隐藏和显示切换。{{item.title}}改变{{child.title}}var example1 = new Vue({el: "#example1",data: {data: [{id: "row_1",title: 'row1',children: [{title: 'row1...
让你30分钟快速掌握vue 3
jinmu520的博客
10-26 807
经过了漫长的迭代，Vue 3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript 进行了大规模的重构，带来了Composition API RFC版本，类似React Hook 一样的写Vue，可以自定义自己的hook ，让使用者更加的灵活，接下来总结一下vue 3.0 带来的部分新特性。 setup() ref() reactive() isRef() toRefs() computed() watch() LifeCycle Hooks(新的生命周期) Templa
vue+element ui中的tableData中的数据格式
taotie_的博客
01-05 8253
tableData接收的是一个数组，数组中的元素是一个个的键值对。 如图： tableData接收从后端返回的值，遍历一维数组，就是说， tabelData=member，那么从纵向而言，就是遍历数组的个数， tableData从member中，取出下标为0的所有数据，分别放在一个个label中。 如果是传入recruit或者follow的数据，都是不行的。 ...
vue中data定义数字类型_Vue中data数据的第2种定义方式
weixin_39846289的博客
12-20 2626
从vue.js的框架安装开始讲起，讲解vue中用到的常用的语法、数据绑定、指令、条件语句、循环语句、样式绑定、事件处理、监听、表单相关以及和后台数据库的交互。学完本课程可以做一些基本的实战项目学习Axios的使用学习vue的基础语法学习vue和后台数据库的交互00-课程说明【Vue起步】201-第一个Vue页面02-VUE.JS框架的引入和安装03-Vue.js起步-属性的定义和使用04-Vue....
监听vue数据 vue
最新发布
07-15
Vue实现数据监听的方式主要有两种：Object.defineProperty和Proxy。在较低版本的浏览器中，Vue使用Object.defineProperty来实现数据监听。它通过重写对象属性的getter和setter来实现依赖追踪和更新通知。在较新版本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值