从零开始学VUE之组件化开发(组件数据的存放)

组件数据的存放

  • 组件无法直接访问页面的对象数据
  • 组件对象也有自己的data属性(也可以有Methods方法)
  • 只是这个data属性必须是一个函数
  • 而且这个函数返回一个对象,对象内部保存着数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <cpn></cpn>
</div>
</body>
<template id="cpn">
<div>{{title}}</div>
</template>
<script>
    Vue.component('cpn',{
        template: '#cpn',
        data(){
            return {
                title:'this is data store!'
            }
        }
    });

    const vue = new Vue({
        el: '#app',
        data: {}
    })
</script>
</html>

运行效果

 

 

作者：彼岸舞

时间：2021\06\02

内容关于：VUE

本文属于作者原创,未经允许,禁止转发

posted @ 2021-06-02 14:43  彼岸舞  阅读(97)  评论(0)  编辑  收藏  举报