Vue的data的两种写法

最新推荐文章于 2024-06-21 09:43:57 发布
最新推荐文章于 2024-06-21 09:43:57 发布
阅读量593 收藏
点赞数
分类专栏： Vue.js 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46724415/article/details/121364023
版权
本文介绍了Vue中data属性的两种写法——对象式和函数式。对于初学者，建议从对象式开始练习，而在涉及组件时，由于组件复用性需求，data必须采用函数式以避免数据污染，否则会导致错误。理解这两种方式的区别对于掌握Vue的数据管理至关重要。
摘要由CSDN通过智能技术生成

data有2种写法，对象式和函数式初学vue可以先用对象式练习，用到组件时，data必须使用函数式，否则会报错。

对象式

 new Vue({
    el: '#demo', 
     data: {
       name: 'xiaoming',
       address: '珠海'
     }
   })

函数式

new Vue({
  el: '#root',
  data() {
	return {
	  name: 'xiaoming'
	}
  }
})
仰望天空的小小蜗牛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的data
O_326326的博客
10-04 907
1.data： 数据可以在当前模块中直接使用（不需要加this）； data中的数据命名不要使用$,下划线（_）开头 因为vue解析data以后，会把当前数据挂载到实例对象上 <div id="app"> <h1>{{name}}</h1> </div> let app = new Vue({ el:'#app', data:{ name:"小赵",
Vue前端框架 —— Vue 实例中 el 和 data 的两种写法
weixin_45661229的博客
08-29 1665
在 Vue 2.0 中创建 Vue 实例时，通常情况下与这两个配置项都是按照一种固定的方式写的，像下面这样。除了上面那一种常用写法之外，el 与 data 都分别有另一种写法。el 的另一种写法使用起来会更灵活，data 的另一种写法在组件中使用较为频繁。在原来代码的基础上将创建的 Vue 实例赋值给一个变量，官方推荐使用 "vm" 当做变量名。将 Vue 实例赋值给 vm 之后在控制台中输出一下 vm（ Vue 实例 ）下图就是 vm 的输出结果，输出结果为一个实例对象。展开后会出现很多以美元符号 '..
详解Vue 单文件组件的三种写法
01-19
JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default class Cpn extends Vue{ counter = 0 //data add(){ //methods this.counter += 1 } } TS class写法 @Component export default class Cpn extends Vue{ @Prop(Number) sum : number | undefined; counter = 0; //data add(
Vue简明实用教程(02)——Vue的data属性详解
谷哥的小弟
11-09 9018
我们可在Vue的data属性中定义基本数据类型(字符串、整数等)、数组、对象、对象数组。
Vue配置项data
最新发布
weixin_45134711的博客
06-21 1321
对象式对于根实例或者非复用组件，通常直接提供一个对象字面量作为data的值。在对象式中，data属性是一个普通的对象，并且直接作为组件实例的一个属性// 对象形式 (适用于根实例或非复用组件)new Vue({data: {',count: 0,user: {age: 30},// 其他选项...})data是一个普通的对象，通过对象属性初始化数据优点：语法简洁，直观易懂。可以通过对象字面量的方式一次性定义多个属性，方便管理多个数据。
Vue中data常见的写法：
weixin_54048131的博客
02-11 162
多数据写法： 更多数据写法：
vue 使用 export default
global_coding的博客
05-24 603
vue 使用 export default
vue2基础知识点（1）模板语法、数据绑定、new Vue({data})的两种写法、事件处理
浪头的博客
05-24 829
王元肉==>个人主页 大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。 推荐阅读 文章结构模板语法数据绑定data的两种写法事件处理事件的基本使用事件修饰符键盘事件 模板语法 <!DOCTYPE html> <html lang="en"> <head> <m
vue实现多个玫瑰图的写法 grid布局 实现模拟切换参数
06-05
在Vue中，我们可以借助ECharts或者AntV G2Plot这两个流行的图表库来绘制玫瑰图。 1. **ECharts的玫瑰图实现**： ECharts是一款由百度开源的数据可视化库，支持多种图表类型，包括玫瑰图。在Vue项目中，你需要先...
vue学习笔记vue学习笔记
08-14
在 Vue 中，El 和 data 有两种写法。第一种写法是使用对象式，例如 `Const vm = new Vue({el:'#root',data:{ //data 的第一种写法：对象式 name:'JoJo'}})vm.$mount('#root')`。第二种写法是使用函数式，例如 `new ...
vue2+vue3学习笔记
02-20
`el` 和 `data` 都有两种写法。`el` 可以使用字符串或对象来描述容器，而 `data` 可以使用函数式或对象式来描述数据。 MVVM 模型 MVVM 模型是 Vue 的核心模型，即Model-View-ViewModel。Model 负责处理数据，View ...
vue2+vue3笔记
07-14
十八、el 与 data 的两种写法 Vue 是什么特点：声明式Vue->resource-> awesome vue 和 cookbook 重点关注下面代码，第一个正常输出尚硅谷，第二个原格式输出{{name}}。 十九、MVVM 模型 理解 MVVM原理：把数据丢到...
前端vue本周个人学习成果
04-20
6. **两种写法的对比**：`el和data两种写法.html`对比了Vue实例化时直接在HTML元素上使用`<script>`标签与在JavaScript中创建Vue实例的区别，展示了`new Vue({ el: '#app' })`和在`<script>`中使用`vue-router`的...
data的值 如何初始化vue_Vue相关知识点总结（上）
weixin_34746495的博客
12-30 807
考点一：生命周期 在new Vue()之后。 Vue 会调用_init函数进行初始化，也就是这里的init过程，它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过Object.defineProperty设置setter与getter函数，用来实现「响应式」以及「依赖收集」。vue生命周期总共分为8个阶段创建...
VUE——data配置项详细解析
施益明的博客
11-01 1万+
VUE——data配置项详细解析
vue入门到精通详解介绍（第一部分）data详细介绍
WYT11的博客
08-16 5994
第一章 引入vue脚本在html页面上 基本操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
vue中data的两种写法
热门推荐
brrby
10-27 4万+
vue中的data是写为对象好还是函数好data为对象的写法data为函数的写法组件中访问data组件的data属性是一个对象的情况会访问不到data中的数据组件的data属性必须是一个函数且返回一个对象为什么组件的data属性必须是一个函数且返回一个对象 data为对象的写法 data:{ message: '此时mustache表达式是通过data为对象来获取message的值' } data为函数的写法 data(){ return{ message: '此时mustac
Vue之data选项
玉案轩窗的博客
01-30 3683
前言 本篇是分析new Vue()过程中对于data的处理细节以及响应式原理，主要了解如下两点： Vue实例的data选项具体的逻辑 Vue响应式原理学习 data处理逻辑 下面是Vue实例创建中initState的处理逻辑： initState的处理逻辑是处理组件中选项即props、data、computed、watch、methods，而关于data部分的处理逻辑，具体如下： opts.data ? initData(vm) : observe(vm._data = {}, true); 首先看
vue3生命周期 两种写法
08-24
Vue 3 的生命周期有两种不同的写法：Options API 和 Composition API。 1. Options API：这是 Vue 2.x 中常用的写法，通过在组件选项中定义生命周期钩子函数来实现。常见的生命周期钩子函数包括 `beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount` 和 `unmounted` 等。 示例代码如下： ```javascript export default { beforeCreate() { // 组件实例刚刚被创建，数据观测 (data observer) 和 event/watcher 事件配置之前被调用 }, created() { // 组件实例已经完全创建，数据观测 (data observer) 和 event/watcher 事件配置完成 }, beforeMount() { // 组件挂载之前被调用，相关的 render 函数首次被调用 }, mounted() { // 组件挂载完成后被调用，此时 DOM 已经渲染完毕 }, beforeUpdate() { // 组件更新之前被调用，发生在虚拟 DOM 打补丁之前 }, updated() { // 组件更新完成后被调用，此时 DOM 已经重新渲染 }, beforeUnmount() { // 实例销毁之前调用，在这一步，实例仍然完全可用 }, unmounted() { // 组件销毁后调用，此时实例完全被销毁 } } ``` 2. Composition API：这是 Vue 3 中引入的新特性，可以更灵活地组织组件逻辑。使用 Composition API，我们可以使用 `setup` 函数来定义生命周期钩子函数。 示例代码如下： ```javascript import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue' export default { setup() { onBeforeMount(() => { // 组件挂载之前被调用 }) onMounted(() => { // 组件挂载完成后被调用 }) onBeforeUpdate(() => { // 组件更新之前被调用 }) onUpdated(() => { // 组件更新完成后被调用 }) onBeforeUnmount(() => { // 实例销毁之前调用，在这一步，实例仍然完全可用 }) onUnmounted(() => { // 组件销毁后调用，此时实例完全被销毁 }) } } ``` 这是 Vue 3 中两种常用的生命周期写法。可以根据实际需求选择合适的写法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值