vue脚手架当中data为什么是函数

最新推荐文章于 2023-07-19 20:18:12 发布
最新推荐文章于 2023-07-19 20:18:12 发布
阅读量309 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDNchaxundaima/article/details/113847391
版权

其实就是提供作用域，vue为我们提供了数据驱动，数据驱动原理是观察者模式，观察者模式需要发布者，data就是充当发布源，它是函数时，保证了只有当前页面使用其中的数据会随之改变，其他地方不受影响。

三岁就很~酷~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue组件为什么data必须是一个函数
11-20
我们需要先复习下原型链的知识，其实这个问题取决于 js ，而并非是 vue 。 function Component(){ this.data = this.data } Component.prototype.data = { name:'jack', age:22, } 首先我们达成一个共识（没有这...
Vue中的data为什么要写成函数形式
qq_51231294的博客
12-03 1236
vue中的data有两种形式的写法，对象形式和函数形式，如果只在一个页面中引入vue.js可以把它写成对象形式 <div id="app"> </div> <script> var app = new Vue({ el: "#app", data: { }, }); </script> 但是如果使用了组件进行开发就必须把data写成函数形式，在脚手架中data也全部是写成函数形式的，如果写成对象形式会直接报错 <script&gt
vue3笔记-脚手架篇
最新发布
qq_43352505的博客
07-19 3187
vue2与vue3的区别 vue项目脚手架 父子通信（props，属性透传，子传父） 跨级通信 动态组件 异步组件 插槽（slot，具名插槽，作用域插槽）生命周期 自定义指令
Vue-cli(vue脚手架)上万字总结，超详细教程
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
深入解析vue脚手架methods,computed,data
书读百遍其意自现
09-29 989
目录 数据 Data Property 方法 methods 计算属性 computed 数据 Data Property 组件的data选项是一个函数. Vue在创建新组件实例的过程中调用此函数. 它应该是一个对象,然后Vue会通过响应系统将其包裹起来,并以$data的形式存储在组件实例中. 为方便起见, 该对象的任意顶级property也直接通过组件实例暴露出来. export default { // data 是一个函数 // data为了存储数据,并将数据放在实
vue脚手架项目的详解
weixin_68658847的博客
02-16 3099
vue脚手架项目的详解
解析vue data不可以使用箭头函数问题
12-11
1 VUE.js 源码解析 注意此处只设计核心代码 这段代码也是UMD实现原理，本文这里不是重点，有兴趣的可以自行探究。 (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ...
详解Vue的组件中data选项为什么必须是函数
01-19
官方解释 data 必须是函数 ...那么 Vue 会停止运行，并在控制台发出警告，告诉你在组件实例中 data 必须是一个函数。但理解这种规则为何存在也是很有益处的，所以让我们先作个弊： <simple></
VUE脚手架重新赋值data中的数据
qq_40319804的博客
02-21 632
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>TestVue !</h2> <ul> <li @click="show">1111111</li> <li>2</li> <li>3</li> <li v-if="
.vue文件怎么使用_vue搭建脚手架项目简单搭建
weixin_39906358的博客
11-25 143
很久没更学习了 就不知道分享什么技术了 简单一个教程（这个也是写了好久了） 有错误欢迎指正 vue搭建脚手架项目教程1. 全局安装vue-cli3 npm install -g vue-cli vue -V // 查看版本2.创建一个名字为vue-demo的项目 vue init webpack vue-demo3.进入项目 cd vue-demo4.启动项目 npm...
Vue脚手架，通过api获取后台数据
Idiot_2018的博客
09-17 4986
情况：api项目，vue项目都在本机运行，vue通过调用接口，获取数据 问题难点：牵涉到跨域问题 vue代码：点击按钮调用regist方法，获取http://192.168.1.233/api/bargain/list数据 methods: { regist:function() { //this.$http.get("http://192.168.1.233/api/regi...
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是一个函数原理(详细易懂)
qq_45473786的博客
03-29 9724
文章目录组件中的data实例data是函数----原理function知识data是函数的原理案例总结举一反三 组件中的data 组件是一个具有单独自身功能模块的封装，这个模块有属于自己的HTML模板，也应该有属于自己的数据data，组件也有自己的方法methods 注意：组件不能直接访问Vue实例中定义的数据。就算可以访问，若将所有的数据都放在Vue实例中，Vue实例就会变得非常臃肿（数据很多）...
Vue之vue中的data为什么是一个函数？
weixin_40736319的博客
04-18 3993
在vue项目中，vue实例的data是长这个样子的 data(){ return { message:'message' } } 为什么在项目中data需要使用return返回数据呢？ 大家知道用组件化来写vue项目,每个.vue文件都是一个个组件。那什么是vue中的组件？ 官网写的很易懂——组件就是一个可复用的vue的实例。 这也就意味着如果你的data是一个普...
vue项目中data数据之间互相访问
热门推荐
lyn1772671980的博客
08-30 5万+
如下代码： &lt;div id="vue_det"&gt; &lt;input type="number" v-model="text"&gt; &lt;div&gt;{{textAdd}}&lt;/div&gt; &lt;/div&gt; &lt;script type="text/j
【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组件中的data函数
桃子的博客
10-04 4365
复习 记录 vue 中的data函数 组件是一个单独功能模块的封装，这个模块有属于自己的HTML模板，也应该有属于自己的数据data vue组件中的数据是不能保存在 vue实例中的data中的。 明确 vue组件中的data 是一个函数 data必须是函数的原因是 组件是会被复用的 。data是函数类型，就会避免发生连锁反应。因为每调用一次函数，都会在函数的栈空间创建一个对象并返回，即使每次调用的是同一个函数，但返回对象的内存地址是不同的 组件是可复用的vue实例，一个组件被创建好之后，就可能被
vue-cli脚手架中使用talkingData埋点的方法
Stiven_Lu的博客
05-10 3566
第一步：在index.html 文件中按照正常引用js文件的方法，引入talkingData文件，如下图。 第二步：正常使用TDAPP.onEvent功能，但需要在方法前面加window，如下图。 注：使用talkingData埋点时候最好加上try.catch判断，否则出问题后会影响代码执行，踩过很多坑，经常莫名出问题，记得有一次因为IP是江苏的都不能用，不知道为什么。     ...
vue对象中data的几种写法
蠢蠢欲动的猫
12-10 3660
4、vue对象中data的几种写法： 1）、直接用{} 一个object，在object里面写上属性（简单明了，直接进行操作） new vue({ el:"", data:{ name:"", age:"" } }) 2)、使用函数返回一个object对象（适用于组件传值，以及在返回之前进行一些其他的操作） 函数的调用者 this 是vue这个对象 console.log(this) ------得到的是vue对象 new vue({
vue脚手架中data，methods，created应该写在哪个文件
06-09
在Vue脚手架中，`data`、`methods`、`created`等选项应该写在`.vue`文件中的`<script>`标签中的`export default`对象中。 例如，一个包含`data`、`methods`和`created`选项的Vue组件的示例代码如下： ``` <!--...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三岁就很~酷~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值