基于Vue.js的后台管理系统组件开发

什么是Vue

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

基本语法介绍

<div id="app">  <!-- 注意：挂载节点必须唯一-->
  <div class="app-title">{{ message }} </div> 
  <div ：class = "[classA,classB]">{{ messageComputed }}</div><!-- 计算属性实例,class绑定-->
  <input type="text" v-model="message"><!-- 双向绑定实例-->
  <div class="app-list">  <!-- 列表渲染实例 -->
      <ul>
          <li v-for="listItem in lists">
              {{ listItem.text }}
          </li>
      </ul>
  </div>
  <input v-on:click="userFun" type="button" > <!-- 也可以用@click="userFun" -->
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello World',
        lists: [
            { text: 'listItem1 text' },
            { text: 'listItem2 text' },
            { text: 'listItem3 text' }
        ],
        className: {
            classA: 'classA',
            classB: 'classB'
        }           
    },
    methods: {
        userFun: function(){ /*这里处理message信息*/
            this.message = this.message.split('').reverse().join('')
        }
    },
    computed: {
        messageComputed: function(){
            return this.message + "-computed"
        }
    },
    wathc：{
        message： function(){
            this.classA = 'classA1' /*监控数据变化*/
        }
    }
});
</script>
复制代码

安装Vue

# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev
复制代码

组件开发

1. 在通过安装步骤操作之后生成的文件夹中找到src目录，新建一个components文件夹专门来管理我们的组件。
2. 在components文件夹中新建一个src文件夹来放置.vue结尾的文件，index.js（组件入口）

/*index.js*/
import Vue from 'vue'
import ChList from './src/list.vue';
export default ChList;
复制代码

/*src:list.vue*/
<template>
    <div class="list">
        <ul class="kskm-list" :data-class='[typeClass]'>
            <li v-for="(item,index) in checkList">
                <span class="layui-inline">
                    <label class="layui-form-label">{{ListItemName1}}：</label>
                    <input type="text" class="layui-input" name="ksname" :value="item.ksname" />
                </span>
                <span class="layui-inline">
                    <label class="layui-form-label">{{ListItemName2}}：</label>
                    <input  type="text" class="layui-input" name="mfz" :value="item.mfz" />
                </span>
                <span class="layui-inline">
                     <i class="iconfont delete" title="删除" @click="removeListItem(item,index)"></i> 
                </span>
            </li>
            <li>
                <span class="layui-inline">
                    <label class="layui-form-label">{{ListItemName1}}：</label>
                    <input type="text" class="layui-input" name="ksname" v-model="checkListItem.ksname" />
                </span>
                <span class="layui-inline">
                    <label class="layui-form-label">{{ListItemName2}}：</label>
                    <input type="text" class="layui-input" name="mfz" v-model="checkListItem.mfz" />
                </span>
            </li>
          </ul>
          <input type="button" class="layui-btn layui-btn-bigadd" value="添加" @click="addListItem">
      </div>
</template>
<script>
    export default{
        name: 'List',
        data () {
            return {
                checkList: [],
                checkListItem: {}
            }
        },
        props: ['inputdata','ListItemName1','ListItemName2'],
        methods: {
            removeListItem: function(item,index) {
                this.checkList.splice(index, 1);
            },
            addListItem: function(){
                this.checkList.push(this.checkListItem);
                this.checkListItem = {};
            }
        },
        created: function() {
            this.checkList = this.inputdata;
        },
         computed: {
            typeClass() {
            return `el-alert-${this.ListItemName1}`;
        }
         }
    }
</script>
复制代码

1. 组件总入口

/*main.js*/
import Vue from 'vue'
import List from './components/ch-list'

new Vue({
  el: '#app',
  components: { List , Radio}
})
复制代码

1. 实际页面中调用组件

<div id="app"> <!-- 挂载点 -->
    <list :inputdata='[{"ksname":"美术学类","mfz":1304},{"ksname":"美术学","mfz":130401},{"ksname":"绘画","mfz":130402},{"ksname":"雕塑","mfz":130403},{"ksname":"摄影","mfz":130404}]' list-item-name1="名称" list-item-name2="分值"><!--solt:这里可以给组件内部的solt传递数据 --></list>
    </div>复制代码