Vue.js学习笔记-1-组件_vue 操作doom-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38652603/article/details/73938160

1.背景

近期在公司项目中使用了同事开发的一款类Vue.js插件，在这里推荐一下 Yox——一款MVVM js框架。个人感觉用起来更简洁轻快。

因为很多公司的项目中都用到了Vue.js，它的设计也确实可以帮助前端开发者提高开发效率，因此我决定学习一下这个框架。

看了两遍vue.js文档的基本用法部分，在此记录一下个人的粗浅理解。

2.Vue.js的特性

个人理解，Vue.js的核心思想和关键特性，体现在两个方面：组件 & MVVM，接下来分两篇文章介绍一下Vue.js的这两个特性，本文介绍一下Vue.js中的组件。

3.为什么需要组件

组件就是一个数据和方法的封装，每个组件可以实现一个特定的效果（包括实现某种功能或显示某种界面）。比如，在一个单页应用中，可能会有很多地方有弹框提示，那么我们就可以把弹框做成一个组件，不同的弹框传入不同的话术。再比如，有一个多页面的网站，有很多个页面都需要用到一个计算器的功能，那我们就可以把计算器做成一个组件，这样就不用每个页面都单独写一个计算器功能了，而如果我的计算器代码有问题，我只改一份代码就行了。可见，引入组件可以提高代码的复用，并提高代码的可维护性。组件化开发还有很多其他优点，比如，提高代码可读性，开发的逻辑更清晰，易于代码的管理等等。

4.Vue.js中的组件

Vue.js中的组件分为根组件和子组件，这个怎么理解呢？根组件就是一个独立的交互单元。而子组件是基于这个交互单元的功能拆分。还是拿计算器这个小应用举例子，一个计算器就是一个根组件，而其中的数字键就可以设计成数字键子组件，每个数字键都是一个数字键子组件的实例。那么我们如何创建根组件和子组件，以及根组件如何和子组件互动呢？下面介绍一下。

5.Vue.js根组件的创建

引用官方文档里的例子：

<!DOCTYPE html>
<html>
<head>
    <title>vue-demo</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, vue!'
        }
    });
</script>
</html>

我们知道，Vue.js是一款MVVM类型的框架，这种设计模式目的是将视图和数据拆分，因此每个组件都有视图部分（相应的html）和数据部分，我们通过Vue提供的方法将两者绑定。上面的例子创建了一个根组件，通过调用Vue方法创建实例，通过el属性指定根组件的挂载点。data则表示该组件维护的数据。

根组件也是可以复用的，方法就是通过Vue.extend方法创建一个组件构造器。

<!DOCTYPE html>
<html>
<head>
    <title>todo</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app1">
        {{message}}
        <my-component></my-component>
    </div>
    <div id="app2">
        {{message}}
        <my-component></my-component>
    </div>
</body>
<script type="text/javascript">
    var myComponent = {
        template: '<div>I am a component</div>'
    };

    var app = Vue.extend({
        components: {
            'my-component': myComponent
        }
    });

    var app1 = new app({
        el: '#app1',
        data: {
            message: 'app1'
        }
    });

    var app2 = new app({
        el: '#app2',
        data: {
            message: 'app2'
        }
    });

</script>
</html>

上面的代码使用Vue.extend创建了一个Vue实例的构造函数app，然后用app创建了两个Vue实例作为根组件。

6.子组件的注册

子组件的注册有两种方式：全局注册和局部注册。所谓注册其实就是声明一个子组件，让根组件知道它的存在，当然声明的同时会初始化。

子组件的全局注册：

<!DOCTYPE html>
<html>
<head>
    <title>todo</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <my-component></my-component>
    </div>
</body>
<script type="text/javascript">
    Vue.component(
        'my-component',
        {
            template: '<div>I am a component</div>'
        }
    );
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'Hello, vue!'
            };
        }
    });
</script>
</html>

Vue.js子组件全局注册的语法

    Vue.component(
        'my-component',
        {
            template: '<div>I am a component</div>'
        }
    );

其中'my-component'是定义的子组件的名称，第二个参数是子组件对象，实际上，每个子组件就是一个对象。

值得注意的是，需要在初始化根组件之前就进行子组件的全局注册。

一般情况下，比较通用的组件需要全局注册，全局注册的组件在任何地方均可使用。不需要复用的组件，只要进行局部注册即可。

子组件的局部注册：

因为子组件就是一个对象，因此，局部注册只需要声明一个子组件对象即可。

<!DOCTYPE html>
<html>
<head>
    <title>todo</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <my-component></my-component>
    </div>
</body>
<script type="text/javascript">
    var myComponent = {
        template: '<div>I am a component</div>'
    }
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'Hello, vue!'
            };
        },
        components: {
            'my-component': myComponent
        }
    });
</script>
</html>

局部注册的子组件只有父组件可以使用。