前端开发Vue.js强大的组件功能

web前端在公司的开发流程图
团队前端开发 流程
前端界面开发流程
web前端开发的流程图

1.MVVM

说到vue的组件,首先要了解的就是MVVM模式。
M指的是model:数据访问层
V指的是View:UI界面
VM指的是ViewModel:他是view的抽象,负责view和model之间的信息转换,将view的command传送到model

View没有大量代码逻辑。结合WPF、Silverlight绑定机制,MVP演变出了MVVM,充分利用了WPF、Silverlight的优势,将大量代码逻辑、状态转到ViewModel,可以说MVVM是专门为WPF、Silverlight打造的。

View绑定到ViewModel,然后执行一些命令在向它请求一个动作。而反过来,ViewModel跟Model通讯,告诉它更新来响应UI。这样便使得为应用构建UI非常的容易。往一个应用程序上贴一个界面越容易,外观设计师就越容易使用Blend来创建一个漂亮的界面。同时,当UI和功能越来越松耦合的时候,功能的可测试性就越来越强。

MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新。vue.js在数据绑定的API设计上借鉴了angular的指令机制:用户可以通过具有特殊前缀的html 属性来实现数据绑定,也可以使用常见的花括号模板插值,或是在表单元素上使用双向绑定:

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title></title>
        <script src=”http://static.runoob.com/assets/vue/1.0.11/vue.min.js”></script>
    </head>
    <body>
        <div id=”example”>{{ message }}</div>
        <script>
            // 创建根实例
            new vue({
                el: ‘#example’,
                data: {
                    message: ‘hello!’,
                },
            })
        </script>
    </body>
</html>

插值本质上也是指令,只是为了方便模板的书写。在模板的编译过程中,vue.js会为每一处需要动态更新的DOM节点创建一个指令对象。每当一个指令对象观测的数据变化时,它便会对所绑定的目标节点执行相应的DOM操作。基于指令的数据绑定使得具体的DOM操作都被合理地封装在指令定义中,业务代码只需要涉及模板和对数据状态的操作即可,这使得应用的开发效率和可维护性都大大提升。

2.组件系统

在大型的应用中,为了分工、复用和可维护性,我们不可避免地需要将应用抽象为多个相对独立的模块。在较为传统的开发模式中,我们只有在考虑复用时才会将某一部分做成组件;但实际上,应用类 UI 完全可以看作是全部由组件树构成的。注册一个vue.js非常容易:
html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <title>组件</title>
        <script src=”http://static.runoob.com/assets/vue/1.0.11/vue.min.js”></script>
    </head>
    <body>
        <div id=”example”><my-component></my-component></div>
        <script>
            // 定义
            var MyComponent = Vue.extend({
                template: ‘<div>A custom component!</div>’,
            })
            // 注册
            Vue.component(‘my-component’, MyComponent)
            /*
Vue.component(‘my-component’,{
template : ‘<div>My name is vue.</div>’
});
*/
            // 创建根实例
            new Vue({
                el: ‘#example’,
            })
        </script>
    </body>
</html>

Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项,但最核心的是以下几个:

模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下),但也可以显式地声明为双向绑定。
方法(methods):对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,比如created,attached,destroyed等等。在这些钩子函数中,我们可以封装一些自定义的逻辑。和传统的MVC相比,可以理解为 Controller的逻辑被分散到了这些钩子函数中。
私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突,一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
除此之外,同一颗组件树之内的组件之间还可以通过内建的事件API来进行通信。Vue.js提供了完善的定义、复用和嵌套组件的API,让开发者可以像搭积木一样用组件拼出整个应用的界面。
组件大大提高了代码的效率和维护性以及复用率;

标准的前端开发流程
web前端实际开发流程
前端开发 流程
» 本文来自:前端开发者 » 《前端开发Vue.js强大的组件功能》
» 本文链接地址:https://www.rokub.com/7062.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!