使用组件时，大多数可以传入到Vue构造器中的选项可以在Vue extend（）
或 Vue.component() 中注册组件时使用，
但是有一个重要的前提：data必须是函数
 .在 var vm = new Vue({

     el：'#app',

     daa:{}

 })中的data是用来存放数据的，是一个对象

 .在Vue.component({})里面

 或在:

 let profile = Vue.extend({

     template:``

 })里面data必须是 一个函数，不能是对象
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../../vue.js"></script>

 </head>

 <body>

 <div id="app">

 <vue-div></vue-div>

 </div>

 </body>

 <script type="text/template" id="vue-div">

     <div>

         <p>{{message}}</p>

     </div>

 </script>

 <script>

     //1.实例化组件(实例化组件要写在vm视图前面，否则报错)

     Vue.component('vue-div',{

         template:'#vue-div',

         // data:{  错误写法，

         //   message:'西门吹雪'   //报错信息：vue.js:597 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions

         // }

         data(){  //正确写法

             return{

                 message:'西门吹雪'

             }

         }

     });

     var vm = new Vue({

         el:'#app',

         data:{}

     });

 </script>

 </html>

Vue的data选项使用注意的更多相关文章

  1. vue单文件组件data选项的函数体获取vue实例对象

    因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent ...

  2. vue组件data函数

    vue组件data通常定义为一个函数并return一个对象,对象中定义的就是组件数据,当然定义数据还有props.computed等方式. data如果直接定义为对象data: {message: ' ...

  3. vue2,vue指令和选项

    vue特点 mvvm框架 响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template,data,computed,watch,methods) vue文档集 ...

  4. Unity 中关于 BuildSetting 中 “Optimize Mesh Data” 选项的“坑”

    Unity 在底层默认希望为你做尽可能多的优化,降低使用门槛,比如 BuildSetting 中的 Optimize Mesh Data 选项就是一个典型的例子. 这个选项到底有什么用呢?文档描述为: ...

  5. vue的data的数据进行指定赋值，用于筛选条件的清空，或者管理系统添加成功后给部分数据赋值为空

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue bug & data type bug

    vue bug & data type bug [Vue warn]: Invalid prop: type check failed for prop "value". ...

  7. [Vue]vue中各选项及钩子函数执行顺序

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...

  8. Vue 组件 data为什么是函数

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  9. VUE：data数据中，能被网页渲染出来的数据类型有哪些

    我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...

随机推荐

  1. Delphi 消息函数 SendMessage函数和 PostMessage的区别

    SendMessage函数 将指定的消息发到窗口.它调用特定窗口的窗口处理函数,并且不会立即返回,直到窗口处理函数处理了这个消息. PostMessage函数 将一个消息放入与创建这个窗口的消息队列相 ...

  2. 【NOI2019模拟2019.6.29】字符串（SA|SAM+主席树）

    Description: 1<=n<=5e4 题解: 考虑\(f\)这个东西应该是怎样算的? 不妨建出SA,然后按height从大到小启发式合并,显然只有相邻的才可能成为最优答案.这样的只 ...

  3. Android API Levels 详解

    Android API Levels 当你开发你的Android应用程序时,了解该平台API变更管理的基本方法和概念是很有帮助的.同样的,知道API级别标识以及该标识如何保障你的应用与实际硬件设备相兼 ...

  4. Django+paramiko实现webshell

    说明 基于 python3.7 + django 2.2.3 实现的 django-webshell,支持颜色显示,支持 tab 命令补全,项目地址:https://github.com/leffss ...

  5. HTTP协议的消息头：Content-Type和Accept的作用 转载https://www.cnblogs.com/lexiaofei/p/7289436.html

    一.背景知识 1.概述 Http报头分为通用报头,请求报头,响应报头和实体报头. 请求方的http报头结构:通用报头|请求报头|实体报头 响应方的http报头结构:通用报头|响应报头|实体报头 Acc ...

  6. C#之winform 猜拳小游戏

    C#之winform 猜拳小游戏 1.建立项目文件 2.进行界面布局 2.1 玩家显示(控件:label) 2.2  显示玩家进行选择的控件(控件:label) 2.3 电脑显示(控件:label) ...

  7. FreeBSD_11-系统管理——{Part_1-xfce 桌面}

    一.首先安装 Xorg 安装 xorg pkg install xorg 清除旧文件(如果已前安装过 xorg) /etc/X11/xorg.conf /usr/local/etc/X11/xorg. ...

  8. java-day19

    获取Stream流方法 根据Collection获取流 根据Map获取流 根据数组获取流 常用方法分为两种:延迟方法和终结方法 逐一处理:forEach 过滤:filter 映射:map 统计个数:c ...

  9. 连接分析算法-HITS-算法

    转自http://blog.csdn.net/Androidlushangderen/article/details/43311943 参考资料:http://blog.csdn.net/hguisu ...

  10. nuxt header 设置

    1. nuxt.config.js 中配置全局 2. 在单页面设置单独