VUE2.X 开发 组件化应用构建

Vue.js教程 04/04 阅读 14 views次 人气 0
摘要:

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树。

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树。

components.png


代码案例:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta charset="utf-8">
    <title>VUE2.X学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app-7">
        <ol>
        <!--
        现在我们为每个 todo-item 提供 todo 对象
        todo 对象是变量,即其内容可以是动态的。
        我们也需要为每个组件提供一个“key”,稍后再
        作详细解释。
        -->
        <todo-item
              v-for="item in groceryList"
              v-bind:todo="item"
              v-bind:key="item.id"
              ></todo-item>
        </ol>
    </div>
    <script>
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })
       var app7 = new Vue({
           el: '#app-7',
           data: {
               groceryList: [
                  { id: 0, text: '蔬菜' },
                  { id: 1, text: '奶酪' },
                  { id: 2, text: '随便其它什么人吃的东西' }
              ]
           }
       })
    </script>
</body>
</html>


与自定义元素的关系

你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是,还是有几个关键差别:

Web Components 规范已经完成并通过,但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下,Vue 组件不需要任何 polyfill,并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。

Vue 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

虽然 Vue 内部没有使用自定义元素,不过在应用使用自定义元素、或以自定义元素形式发布时,依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。


评论

表情

分享到: