zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    实用产品规划
    产品经理对用户的调研
    产品经理用户研究
    竞品分析方案
    产品竞品分析
    Mybatis Plus
    shiro
    Spring cloud
    Spring Boot
    Redis入门(二)
  • 原文地址:https://www.cnblogs.com/wuhefeng/p/10024505.html
Copyright © 2011-2022 走看看