vue 中包含哪些属性和 data实例在component 中和在Vue中

最新推荐文章于 2024-02-08 10:28:07 发布

安果移不动

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量1k

点赞数

分类专栏： # vue

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/87977650

版权

vue 专栏收录该内容

106 篇文章 1 订阅

订阅专栏

属性

    new Vue({
        //绑定元素
        el:'#app',
        //要绑定的数据
        data:{},
        //用来接受外部资料的属性
        props:{},
        // 用来定义在Vue内使用的方法
        methods:{},
        //用来观察Vue 数据的更新
        watch:{},
        //自动为内部数据计算的属性
        computed:{},
        // 提供Vue 实体编译后的样板
        template:{},
        //用来定义子元件
        components:{}
    });

大多数的数据都相同，唯一要注意的就是data属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <style>
        #app{
            margin: 1em;
            font-size: 1.2em;
        }
        .component{
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
 <div id="app">
     {{msg}}
     <hr>
     <my-component></my-component>

 </div>
 <script>
     //register
     Vue.component('my-component',{
         template:'  <div class="component">{{msg}}</div>',
         data:function () {
             return{
                 msg:'A custom component of Vue!'
             }
         }
     });
     //create wa root instance
     new Vue({
         el:'#app',
         data:{
             msg:'A root msg of Vue!'
         }
     });
 </script>
</body>
</html>

安果移不动

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 中包含哪些属性和 data实例在component 中和在Vue中

属性 new Vue({ //绑定元素 el:'#app', //要绑定的数据 data:{}, //用来接受外部资料的属性 props:{}, // 用来定义在Vue内使用的方法 methods:{}, //用来观察Vue 数据的更新 ...
复制链接

扫一扫