什么是Vue

Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)。

基本語(yǔ)法介紹

<div id="app"> <!-- 注意：掛載節(jié)點(diǎn)必須唯一--><div class="app-title">{{ message }} </div> <div ：class = "[classA,classB]">{{ messageComputed }}</div><!-- 計(jì)算屬性實(shí)例,class綁定--><input type="text" v-model="message"><!-- 雙向綁定實(shí)例--><div class="app-list"> <!-- 列表渲染實(shí)例 --><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' /*監(jiān)控?cái)?shù)據(jù)變化*/}} }); </script> 復(fù)制代碼

安裝Vue

# 全局安裝 vue-cli $ npm install -g vue-cli # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目 $ vue init webpack my-project # 安裝依賴 $ cd my-project $ npm install $ npm run dev 復(fù)制代碼

組件開(kāi)發(fā)

在通過(guò)安裝步驟操作之后生成的文件夾中找到src目錄，新建一個(gè)components文件夾專門(mén)來(lái)管理我們的組件。

在components文件夾中新建一個(gè)src文件夾來(lái)放置.vue結(jié)尾的文件，index.js（組件入口）

/*index.js*/ import Vue from 'vue' import ChList from './src/list.vue'; export default ChList; 復(fù)制代碼/*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> 復(fù)制代碼

組件總?cè)肟?/li>/*main.js*/ import Vue from 'vue' import List from './components/ch-list'new Vue({el: '#app',components: { List , Radio} }) 復(fù)制代碼

實(shí)際頁(yè)面中調(diào)用組件

<div id="app"> <!-- 掛載點(diǎn) --><list :inputdata='[{"ksname":"美術(shù)學(xué)類","mfz":1304},{"ksname":"美術(shù)學(xué)","mfz":130401},{"ksname":"繪畫(huà)","mfz":130402},{"ksname":"雕塑","mfz":130403},{"ksname":"攝影","mfz":130404}]' list-item-name1="名稱" list-item-name2="分值"><!--solt:這里可以給組件內(nèi)部的solt傳遞數(shù)據(jù) --></list></div>復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的基于Vue.js的后台管理系统组件开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。