精华内容
下载资源
问答
  • Vue组件中的data

    2020-04-13 20:50:53
    请陛下批阅 <!DOCTYPE html> <html lang="en"> <head>...meta charset="UTF-8">...组件中的data</title> <script src="../../vue/vue-v2.6.11.js"></script>...

    请陛下批阅

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件中的data</title>
        <script src="../../vue/vue-v2.6.11.js"></script>
    </head>
    <body>
    <div id="app">
        <mycom></mycom>
        <mycom2></mycom2>
    </div>
    <template id="tmpl">
        <h3>{{msg}}</h3>
    </template>
    </body>
    <script>
        Vue.component('mycom', {
            template: `<h2>这是组件中的data数据:{{msg}}</h2>`,
            // 组件的data必须定义为一个函数,且返回结果为一个对象
            data: function () {
                return {
                    msg: '我不想知道结果,我只在乎过程!!!'
                }
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {},
            components: {
                mycom2: {
                    template: '#tmpl',
                    data: function () {
                        return {
                            msg: '过节费看见过看风景顾客'
                        }
                    }
                }
            }
        });
    </script>
    </html>
    
    展开全文
  • 主要介绍了Vue组件中的data必须是一个function的原因浅析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue组件就是vue实例,...而在复用时,希望组件中的data应该是相互隔离的. 如果使用 data : { count: 0 } 的形式,则复制的该组件会共享data中的数据,所以要使用: data () { return { count: 0 } } 的形式 参考: ...

    vue组件就是vue实例,可以被复用.
    而在复用时,希望组件中的data应该是相互隔离的.

    如果使用

    data : {
       count: 0
     }
    

    的形式,则复制的该组件会共享data中的数据,所以要使用:

    data () {
      return {
        count: 0
      }
    }
    

    的形式

    参考:
    https://www.cnblogs.com/wangjiachen666/p/9876266.html
    https://blog.csdn.net/admin123404/article/details/100535352

    展开全文
  • Vue组件中的data必须是个函数 最近一直在学习Vue,今天看到一个知识点,感觉有必要记录下,以免后面忘记。 每个Vue组件其实也可以看成时一个Vue实例,它也有生命周期,data,methods等。其中在Vue组件中,data必须是...

    Vue组件中的data必须是个函数

    最近一直在学习Vue,今天看到一个知识点,感觉有必要记录下,以免后面忘记。
    每个Vue组件其实也可以看成时一个Vue实例,它也有生命周期,data,methods等。其中在Vue组件中,data必须是个函数,这是因为:
    组件是可复用的,我们开发好每个组件后,希望它可以在项目中多个地方使用,但又相互不影响。如下面示例:
    my-counter这个组件,我在界面复用三次,在每次复用my-counter组件时,data其实时返回了一个新的对象,当我改变其中任何一个组件的数据时,对于其他的复用组件,是完全没有影响的。

    <div id="app">
        <my-counter></my-counter>  
        <my-counter></my-counter>
        <my-counter></my-counter>  
      </div>
      <template id="myCounter">
        <div>
          <h3>当前数值为:{{counter}}</h3>
          <button @click="increment">+</button>
          <button @click="decrement">-</button>
        </div>
      </template>
    </body>
    <script src="../vue.js"></script>
    <script>
      Vue.component('my-counter',{
        template:"#myCounter",
        data(){
          return{
            counter:0
          }
        },
        methods:{
          increment(){
            this.counter++;
          },
          decrement(){
            this.counter--;
          }
        }
      })
      const app = new Vue({
        el:"#app",
        data:{
    
        },
        methods:{
          
        }
      })
    

    运行结果
    我们将上述代码做一个调整,模拟一个data是一个对象的情况,下面代码中,data指向同一个obj对象,组件在复用的时候,每个复用组件的data都指向同一个对象,当改变其中一个父组组件的data时,其他也会发生变化。

    <div id="app">
        <my-counter></my-counter>  
        <my-counter></my-counter>
        <my-counter></my-counter>  
      </div>
      <template id="myCounter">
        <div>
          <h3>当前数值为:{{counter}}</h3>
          <button @click="increment">+</button>
          <button @click="decrement">-</button>
        </div>
      </template>
    </body>
    <script src="../vue.js"></script>
    <script>
      let obj = {
        counter:0
      }
      Vue.component('my-counter',{
        template:"#myCounter",
        data(){
          return obj
        },
        methods:{
          increment(){
            this.counter++;
          },
          decrement(){
            this.counter--;
          }
        }
      })
    

    在这里插入图片描述

    展开全文
  • 比如直接用{{}}6.2 组件数据存放6.3 Vue组件中的data为什么是函数? 前言 本博客的内容很多都来自官网,现在只是把自己的一些理解写出来给大家一起讨论学习 Vue官网 系列文章目录,Vue学习目录,每一章都有代码...
  • Vue 组件中的data为什么是个函数? 如果说 vue 组件中的 data 变为跟 vue 实例 一样的 这样 对象写法 首先 他的控制台 会进行报错 那么 要想让他不报错 我们就会把它改成 函数返回数据写法 那么 问题来了 为什么 ...
  • 最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象。 首先来了解一下Vue组件的使用理念:在Vue组件使用中,组件复用...
  • 最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象。 首先来了解一下Vue组件的使用理念:在Vue组件使用中,组件...
  • 1、从声明式渲染说起vue文档在声明式渲染这一节给了我们这样一个demo:{{ message }}var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})在这个demo中data是一个对象,...但是在文档上Vue组件基础...
  • Vue组件中的data属性

    2019-05-22 15:49:00
    Vue中的data属性专门用来以对象方式存放数据,它有两种用法。 var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return {a:1,b:2,}}, }) 但是在组件中,只接受第二种用法,即将data...
  • Web前端基础,前端开发教程组件(Component)是对数据和方法的简单封装。C++Builder中,一个组件就是一个从TComponent派生出来的特定对象。组件可以有自己的属性和方法,属性是组件数据的简单...Vue组件中的Data为什...
  • 在面试过程中,vue相关问题是稳最多,所以现在,我们说个比较常见,但是不是特别很好回答面试题:vue组件中data为什么必须是一个函数 简单说: //为什么data函数里面要return一个对象 <script> ...
  • 15.Vue组件中的data

    2019-01-12 15:14:00
    1.组件中展示数据和响应事件: // 1.... 但是组件中的 data 必须是一个方法 data: function(){}或者data(){} // 4. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行; ...
  • vue组件中data的属性值是函数,如下所示export default {data() {// data是一个函数,data: function() {}简写return {// 页面要初始化数据name: 'itclanCoder',};},};而非:如下所示export default {data: {// ...
  • 组件是可复用的Vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后...
  • 面试题:为什么vue组件中的data是一个函数而不是一个对象? JavaScript中的对象是引用类型的数据,当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例中的数据也会发生变化。 而在Vue中,我们更...
  • 组件的本质可以说是一个可复用的vue实例,所以一个自己创建后之后就可以在各个地方多次复用,但组件中的data数据应该是互不影响的。 <div id="app"> <!--现在组件复用了三次--> <cpn></cpn&...
  • Vue 组件中的data数据

    2019-09-21 07:37:50
    <! ...> ...="./lib/vue-2.4.0.js" ...这个是实例中的data的数据 ' }, methods: {} }); script > body > html >   转载于:https://www.cnblogs.com/wanguofeng/p/11244439.html
  • 而不管组件被复用了多少次,组件中的data数据都应该是相互隔离、互不影响的。 如果不用函数,用的是对象形式,那么每个组件的data都是内存在同一个地址当中,如果其中一个数据改变了其他的也会跟着改变。 只有在函数...
  • 如果不用function return 每个组件的data都是内存的同一个地址,那一个数据改变其他也改变了,这当然就不是我们想要的。 用function return 其实就相当于申明了新的变量,相互独立,自然就不会有这样的问题;js在...
  • 1、从声明式渲染说起 vue文档在声明式渲染这一节给了我们这样一个demo: <div id="app"> {{ message }} </div> var app = new Vue({ ... data: { ...在这个demo中data是一个对象,...但是在文档上Vue组件
  • 而这里组件中的data()必须是一个函数,其实应该叫做setData()。 现在我们开始一步步理解: 一、关于js的数据类型 js中的数据可以分为基础数据类型和引用数据类型 1、基础数据类型 如undefinded,null,Number,...
  • 一个组件的 data 选项必须是一个函数,因此...否则,两个实例组件对象的data是一模一样的,个改变也会导致另一个改变,这在实际开发是不符合组件式思想的。 应该如下使用: data() { return { count: 0 } } ...
  • 组件被复用创建一个实例时,会在堆上重新申请一块内存,用于保存拷贝好的data,且在栈上会保存一个指向该新创建实例的指针,那么每个实例可以维护一份被返回对象的独立的拷贝,组件实例之间的 data 属性值不会互相...
  • 文章目录组件中的data实例data是函数----原理function知识data是函数的原理案例总结举一反三 组件中的data 组件是一个具有单独自身功能模块的封装,这个模块有属于自己的HTML模板,也应该有属于自己的数据data,组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,981
精华内容 1,992
关键字:

vue组件中的data

vue 订阅