什么是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
$ npm install -g vue-cli
$ vue init webpack my-project
$
cd my-project
$ npm install
$ npm run dev
復制代碼組件開發
在通過安裝步驟操作之后生成的文件夾中找到src目錄，新建一個components文件夾專門來管理我們的組件。在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>
復制代碼組件總入口/*main.js*/
import Vue from
'vue'
import List from
'./components/ch-list'new Vue({el:
'#app',components: { List , Radio}
})
復制代碼實際頁面中調用組件<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>
復制代碼
總結
以上是生活随笔為你收集整理的基于Vue.js的后台管理系统组件开发的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
