Vue.js组件化开发实践-白红宇

Vue.js组件化开发实践

阅读量：6173 次

发布时间：2019-06-21

本文共 3243 字，大约阅读时间需要 10 分钟。

什么是Vue.js

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

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

Vue.js基本功能

视图元素响应式

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

只关注视图层，渐进式插件

视图元素响应式

//视图
    
     {
   {msg}}

//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操作

//视图

//逻辑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处理

//视图
        
     {
   {msg}}
         
     {
   {gsm}}

//逻辑var vm = new Vue({    el: '#app',    data: {        msg: "",        gsm: ''    },    methods: {        reverseMsg: function(){            this.gsm = this.msg.split('').reverse().join('')        }    }})

Vue.js组件

易维护

易复用

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

一个自定义的按钮

var wdsButton = {  template: '#template-wds-button'}var vm = new Vue({  el: '#app',  components: {    'wds-button': wdsButton  }})

父组件传递数据到子组件: `props`

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`

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)    }  }})