Vue.js组件化开发实践

Advertisement

Vue.js 是一套构建用户界面的 渐进式框架。它非常容易与其它库或已有项目整合,而无须从头开始重构整个项目;另一方面,Vue 完全有能力驱动采用单文件组件来开发的更为复杂的单页应用。

https://segmentfault.com/a/1190000008591915

目前在我参与开发维护的项目中已经使用上了Vue.js的一些基本功能,下面两幅图来自项目截图。

Vue.js组件化开发实践

Vue.js组件化开发实践

Vue.js基本功能

  • 视图元素响应式
  • 数据双向绑定,解放DOM操作
  • 只关注视图层,渐进式插件

视图元素响应式

//视图
<div id="app">{{msg}}</div>
//JS逻辑
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello world'
  }
})

上图中,我们在视图里声明一个变量msg,它被包在一个双花括号"{{}}"中,以此表明它是一个Vue所管理的视图变量元素。同时,我们在JS中新建一个Vue对象,其中的el对应"#app",表示改Vue对象管辖的视图范围为id是app所对应的区域;data中有一个msg属性,对应视图中的双花括号变量msg。一旦我们新建好这个Vue对象,所有对于该对象data属性中的msg进行操作,会同步反应在视图中的{{msg}}上,这个视图变量元素即具有响应式。

数据双向绑定,解放DOM操作

  • 双向绑定:可以理解为JS逻辑中的数据的更改会实时的反映在视图上;同时任何从视图中过来的数据或者事件,能够实时的反映在逻辑中。
  • 一旦视图和逻辑之间规定好需要绑定的数据和事件,那么业务逻辑就能专注数据处理,而无需手动管理DOM,这样就实现了视图和逻辑各司其职。

一个例子:

输入框中的输入的字符串实时显示在视图上;同时当用户点击视图中的一个按钮时,视图中的字符串反向之后在输出到视图上。

DOM操作

//视图
<div id="app">
    <p id="msg"></p><input id="inputMsg" type="text">
    <p id="gsm"></p><button id="reverseMsg">Reverse</button>
</div>
//逻辑
document.getElementById('inputMsg').addEventListener('input', function({
  document.getElementById('msg').innerText = this.value
}), false)

document.getElementById('reverseMsg').addEventListener('click', function({
  var msg = document.getElementById('msg').innerText
  document.getElementById('gsm').innerText = msg.split('').reverse().join('')
}), false)

Vue处理

//视图
<div id="app">
    <p>{{msg}}</p><input v-model="msg" type="text">
    <p>{{gsm}}</p><button v-on:click="reverseMsg">Reverse</button>
</div>
//逻辑
var vm = new Vue({
    el: '#app',
    data: {
        msg: "",
        gsm: ''
    },
    methods: {
        reverseMsg: function(){
            this.gsm = this.msg.split('').reverse().join('')
        }
    }
})

Vue.js组件

  • 易维护
  • 易复用

组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树。

Vue.js组件化开发实践

一个自定义的按钮

<div id='app'>
  <wds-button></wds-button>
</div>

<template id='template-wds-button'>
  <button class="wds-button">默认按钮</button>
</template>
var wdsButton = {
  template: '#template-wds-button'
}

var vm = new Vue({
  el: '#app',
  components: {
    'wds-button': wdsButton
  }
})
父组件传递数据到子组件: props
<div id='app'>
  <wds-button></wds-button>
  <wds-button type="success" btn-name="成功按钮"></wds-button>
</div>

<template id='template-wds-button'>
  <button v-bind:class="['wds-button', type ? 'wds-button--' + type: '']">{{btnName}}</button>
</template>
var wdsButton = {
    props: {
        btnName: {
            type: String,
            default: '默认按钮'
        },
        type: {
            type: String,
            default: ''
        }
    },
    template: '#template-wds-button'
}

var vm = new Vue({
  el: '#app',
  components: {
    'wds-button': wdsButton
  }
})
was-button 组件描述

Props

参数 说明 类型 可选值 默认值
btnName 按钮名字 String 默认按钮
type 按钮类型 String success/warning/danger
子组件将数据传回父组件:自定义Event
<div id='app'>
  <wds-button v-on:wds-button-click-event="alertButtonName" type="warning" btn-name="警告按钮"></wds-button>
</div>

<template id='template-wds-button'>
  <button class="wds-button" v-bind:class="['wds-button', type ? 'wds-button--' + type: '']" v-on:click="wdsButtonClick">{{btnName}}</button>
</template>
var wdsButton = {
    props: {
        btnName: {
            type: String,
            default: '默认按钮'
        },
        type: {
            type: String,
            default: ''
        }
    },
    methods: {
      wdsButtonClick: function(){
        this.$emit('wds-button-click-event', this.btnName, this.type)
      }
    },
    template: '#template-wds-button'
}

var vm = new Vue({
  el: '#app',
  components: {
    'wds-button': wdsButton
  },
  methods: {
    alertButtonName: function(btnName, type){
      alert(btnName)
    }
  }
})
was-button 组件描述

Props

参数 说明 类型 可选值 默认值
btnName 按钮名字 String 默认按钮
type 按钮类型 String success/warning/danger

events

事件名称 说明 回调参数
wds-button-click-event 点击按钮回调事件 btnName, type

Vue.js单文件组件

  • 组件应该内聚自己的样式(HTML/CSS)和逻辑(JS)
  • 一个组件对应一个文件

文件和组件一一对应: .vue文件

Vue.js组件化开发实践

.vue文件无法直接运行在浏览器上,通过webpack + vue-loader的方式来将Vue组件转化为JS模块。

  • webpack: 前端资源模块化管理打包工具。
  • vue-loader: webpack下处理.vue文件的的插件。

一个例子:

一个页面中有多个按钮,每点击一个按钮弹出toast信息,按钮toast都自定义。代码可以下载这里

Vue.js组件化开发实践

Similar Posts:

  • 前端架构组件化开发系列二 (基于VUE 扩展组件)

    VUE有自己组件扩展功能,可以实例组件引用,也可以在页面直接以组件标签名来引用. 基于VUE扩展组件,正如MVVM模式一样,让数据与DOM之间事件或者渲染操作,我们只关心数据模型层就好.能节省很多代码. 前期要做的准备.VUE 一些基本知识 组件化 data 和props 之间的区别.props通常是用于在标签作为一个传递属性也可以在实例中通过propsData传递.data 可以实例中传递,但不能在标签属性中传递; v-for:针对集合处理 $Index:当前索引,如果有多重嵌套,可以这样 <

  • 【转】Web应用的组件化开发(一)

    原文转自:http://blog.jobbole.com/56161/ 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途径来优化:减少部署成本,提高开发效率. 减少部署成本的方面,业界研究得非常多,比如近几年很流行的"去IOE",就是很典型的,从一些费用较高的高性能产品迁移到开源的易替换的产品集群,又比如使用Linux + Mono来部

  • Web应用的组件化开发(二)

    管控平台 在上一篇中我们提到了组件化的大致思路,这一篇主要讲述在这么做之后,我们需要哪些外围手段去管控整个开发过程.从各种角度看,面对较大规模前端开发团队,都有必要建立这么一个开发阶段的协作平台. 在这个平台上,我们要做哪些事情呢? 1. HTML片段 我们为什么要管理HTML片段?因为有界面要用它们,当这些片段多了之后,需要有个地方来管理起来,可以检索.预览它们,还能看到大致描述. 这应该是整个环节中一个相对很简单的东西,照理说,有目录结构,然后剩下的就是单个的HTML片段文件了,这就可以解决

  • Vue.js组件示例

    一 外部引入文件:(全局注册) //建模版 var mycomponent=Vue.extend( {template:"<div><a href='#'>我爱Javascript!</div>"} ); //注册组件 Vue.component('my-component',mycomponent); 页面引用: <!DOCTYPE html> <html lang="en"> <head>

  • JS组件化验证检测(4)

    测试如下: // Condition 1.1 // Condition 1.2 // Condition 2-1 // Condition 2-2.1 // Condition 3 好了,一个简易版的组件就完成了,通过这种组件化方式可以可方便的在中间插入.删除一个新的条件检测,也可以很容易创建一个分支检测.此处仅作抛砖引玉,考虑更复杂的情况,还有fail.always等事件处理.就让各位自己尝试着完成吧. 作者:Jiang, Jilin 在web开发过程中,我们时常会遇到输入检测的情况.如果只是

  • 深入探讨Vue.js组件和组件通信

    基本是按照官网的 Guide 全部梳理了一遍:http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolist Vue 实例 一个 Vue 应用是由一个 root vue instance 引导启动的,而 Vue instance 是这么创建的: var vm = new Vue({ // optio

  • 【vue】vue组件化开发初体验-示例vue-loader-example学习记录

    来自vue官方示例:https://github.com/vuejs/vue-loader-example 使用了vuejs和webpack,以及一系列webpack加载器,如vue-loader 依葫芦画瓢,试了试,有些具体分析还需要再学习学习,先简单记录下具体的做法,屡屡思绪. 添加github练习源码:https://github.com/dingyiming/learn-Js-vuejs/tree/master/demos/demo-vue-loader-example/demo1 目录

  • 初识ReactJS的组件化开发(九):下拉框的使用方法

    js代码: // 创建组件 var NavBar = React.createClass({ removeNode: function () { ReactDOM.unmountComponentAtNode(document.getElementById("container")) }, loadMovie: function () { ReactDOM.render( <MovieList src="http://localhost/myphp/movies.php

  • 初识ReactJS的组件化开发(三):利用ajax渲染电影列表

    我们使用zepto库来做ajax请求 安装zepto: 1.cd到项目根目录 2.执行 npm install zepto 然后发现我们的项目中就多了 **reactJS的组件生命周期 3个状态: 1.mounting 已经插入真实DOM 2.updating 正在被渲染 3.unmounting 已移除真实Dom 每个一状态都有对应的函数,只要在前面加上componentWill代表"即将进入某状态前调用" 加上componentDid代表"进入了某个状态后调用"

  • 关于组件化开发中常用到的svn,cocoapods代码管理工具错误解决办法(持续更新)

    在使用cocoapods从svn拉取开发组建过程中遇到错误,可以优先从下列操作开始排查. 1.svn cleanup cleanup一遍在update 2.删除xcworkspace文件以及podfile.lock文件.重新update 3.查找podfile文件中是否有标点为中文标点等.