2-5#去哪儿网app#前端组件化

一个页面由很多部分组成 比如轮播，定位等等。

如果没有组件化，则要把所有的代码都写在这个页面的业务逻辑上，就会很多，导致维护困难。

(所以目的是低耦合？

组件可以理解为页面的一个部分/区域，相当于页面由许多组件组成，一个button也可以看成组件。

所以使用组件化进行大型项目开发，可以使代码在后期维护性上得到极大的提高 。

 

分为全局组件和局部组件。下面贴一下局部组件化

组件化：把页面上的一些内容进行封装，其中props用于接收数据，template是模板，即V层中定义的todo-item标签会被template里写的标签替换掉。

原本用的是ul>li  v-for，现在用组件化，将组件封装，代码如下：

<ul>
    <!-- <li v-for="item in list">{{item}}</li> -->
    <!-- 使用了v-for  所以只写一个li就可以  自动遍历 -->
    <todo-item v-bind:content="item" v-for="item in list">
        <!-- 通过for获得item 再通过v-bind 将item传给子组件todo-item -->
    </todo-item>
    <!-- 小横线要加上 -->
    <!-- 这个标签名字todo-item对应的是component方法中的"TodoItem"名字，而不是todo item，即也可以to-item，则下面的名字改为"ToItem" -->
</ul>

// 《局部组件》
var TodoItem = {
    props: ['content'],
    template: "<li>{{content}}</li>"
}

var app = new Vue({
    // vue实例化
    el: '#app',
    //把TodoItem注册到vue中
    components: {
        TodoItem: TodoItem
    },  //与全局组件不同的是
        //记得这里要注册一下

补充：

<!-- jQuery是MVP模式  M模型层(与AJAX有关系) V视图层(DOM 即下面div盒子) P控制器(即JS的逻辑代码) -->
<!-- 而vue是MVVM模式  没有P层 取而代之是ViewModel层 并且不需要关注这层 因为是vue内置的-->