2020-09-10 vue学习笔记————组件化应用构建

组件化应用构建

在实际运用过程中，一款应用的代码有成千上万行，这样不利于日常的维护。所以这里引用组件化的概念，以下概念摘自vue.js官网。
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

如何定义组件：

Vue.component('zhong', {
        template: '<div>这是zhong部<a>logo</a></div>'
})

component
• n.成分；部件；组成部分
• adj.构成的
• 网络组件；元件；构件

template
• n.模板；样板；型板；模框
• 网络范本；模板文件；模板模式

在组件中如何定义属性：
使用props:[ ] 的形式来定义属性，若要使用属性，则直接在template里绑定即可
HTML

<div class="app">
        <tou name="sssss"> </tou>
        <zhong></zhong>
        <dibu></dibu>
</div>

JS：

Vue.component('tou', {
        props:["name"],
        template: '<div>这是头部<a>{{name}}</a></div>'
    })

运行效果：

下面来写一个小案例：
Html：

<div class="app">

        <ol>
            <todo-item txt="item.shixiang" v-for="(item, index) in todos" ></todo-item>
            //1.因为todos有多组数据，这一用了一个v-for循环指令
            //2.这里可理解为一个自定义标签（注：与自定义标签有一定区别）
        </ol>

</div>

JS：

Vue.component("todo-item",{
        props:['txt'],
        template:"<li>{{txt}}</li>"
    })

    new Vue({
        el:".app",
        data:{
        //data为一个对象
            todos:[
            //todos为这个对象的属性
                {shixiang:"chifan"},
                {shixiang:"shuijiao"},
                {shixiang:"kandianshi"},
                {shixiang:"buxuexi"}
            ]
        }
});

运行结果：

由此可见，组件内容通过template来渲染，用props来定义组件属性