Vue.js学习笔记-1-组件

来源：互联网发布：linux查系统版本编辑：程序博客网时间：2024/06/06 22:45

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>

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

阅读全文

0 0