33.Vue组件中的data数据属性

最新推荐文章于 2024-12-24 16:27:45 发布

马彼得

最新推荐文章于 2024-12-24 16:27:45 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/luzhensmart/article/details/84677275

vue 专栏收录该内容

41 篇文章

订阅专栏

本文介绍Vue.js中组件的创建与使用方法，包括如何利用Vue.extend创建组件，组件的注册及引用，以及组件内部数据的定义与展示。同时，演示了通过template标签定义组件HTML结构的技巧。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

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

</head>

<body>

     <!-- 因为在js中拼写这些html容易写错 所以给我们提供了template标签的方式 
          在外部定义template的HTML标签 然后用#temp1 即#id的方式进行引用
     -->
     <template id="tmep1">
               <div>
                    <h2>{{haha}}</h2>
                    <h3>
                         这是外部方式:使用Vue.extend创建的标签h3组件
                    </h3>
                    <span>
                         123
                    </span>
               </div>
     </template>

     <div id="app">
          <!-- 如果要使用组件 直接把组件的名称 以HTML标签的形式 引入到页面中即可
                注意:
                1:组件注册时 我们使用了驼峰命名规则 但引用标签的时候 都变成小写
                 在大写和小写中间加入- 即:myCom -> my-com
                2:如果组件注册时 用的都是小写那么 mycom -> mycom即可
          -->
          <lala></lala>
     </div>


     <script>

         //使用Vue.component('组件的名称',创建出来的组件模板对象)
         Vue.component('lala',{
             //通过template属性 指定了组件要展示的HTML结构
             //注意 不能有同级元素 如果有同级元素 那么必须用另外一个根元素包裹这些个同级元素 如:用div元素包裹
             //错误的方式:template : '<h3>这是使用Vue.extend创建的标签h3组件</h3><span>123</span>'
             template : '#tmep1',
             //1:组件中 也可以有自己的data数据
             //2:组件中的data和vue实例中的data有点不一样,vue实例中的data可以作为一个对象,
             //但是组件中的data必须是一个方法 且该方法还得必须返回一个对象
             //组件中的数据引用和vue实例data中的数据引用方式一样 {{变量名}}
             data : function (params) {
                  return{
                       haha : '这是组件中自定义的数据!'
                  } ;
             }
         });

        var vm = new Vue({
             el : '#app',
             data : {
             msg : '欢迎学习vue'
            }
        }) 

     </script>

</body>

</html>