Vue的data选项使用注意

使用组件时,大多数可以传入到Vue构造器中的选项可以在Vue extend()
或 Vue.component() 中注册组件时使用,
但是有一个重要的前提:data必须是函数
 1 1.在 var vm = new Vue({
 2     el:'#app',
 3     daa:{}
 4 })中的data是用来存放数据的,是一个对象
 5 
 6 2.在Vue.component({})里面
 7 或在:
 8 let profile = Vue.extend({
 9     template:``
10 })里面data必须是 一个函数,不能是对象
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../../vue.js"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11 <vue-div></vue-div>
12 </div>
13 </body>
14 <script type="text/template" id="vue-div">
15     <div>
16         <p>{{message}}</p>
17     </div>
18 </script>
19 <script>
20     //1.实例化组件(实例化组件要写在vm视图前面,否则报错)
21     Vue.component('vue-div',{
22         template:'#vue-div',
23         // data:{  错误写法,
24         //   message:'西门吹雪'   //报错信息:vue.js:597 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions
25         // }
26         data(){  //正确写法
27             return{
28                 message:'西门吹雪'
29             }
30         }
31     });
32 
33     var vm = new Vue({
34         el:'#app',
35         data:{}
36     });
37 
38 
39 </script>
40 </html>

 

转载于:https://www.cnblogs.com/wuhefeng/p/10024505.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值