基於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>複製代碼