在非构建工具下使用vue
通常项目开发进程中，使用工程化配置下开发项目，但在少数老项目下如jquery项目下也想使用vue.js，可以渐进式地来使用。下面介绍一个简单使用方法：
1、引入文件：
<!-- element-ui 样式 -->
<link rel="stylesheet" href="../../../lib/element-ui/lib/theme-chalk/index.css">
<!-- 处理 ie 浏览器兼容性 待后续验证后作调整 -->
<!--<script src="../../../lib/babel-polyfill/browser.js"></script>-->
<!--<script src="../../../lib/babel-polyfill/polyfill.js"></script>-->
<!-- vue -->
<script src="../../../lib/vue/vue.js"></script>
<!-- element-ui js -->
<script src="../../../lib/element-ui/lib/index.js"></script>
<!-- 异步请求 -->
<script src="../../../lib/axios/dist/axios.js"></script>
<!-- 模块组件 -->
<script src="./courseModal.js"></script>
<style>
html,body {
padding: 0;
margin: 0;
height: 100%;
}
.container {
height: 100%;
background-color: #f5f5f5;
}
.query-container, .data-container {
padding: 20px;
margin-bottom: 10px;
background-color: #fff;
}
.toolbar-container {
margin-bottom: 10px;
}
.data-table-header {
background-color: #f5f5f5;
}
.data-container .el-table .el-button [class*=el-icon-]+span {
margin-left: 1px;
}
.form-container .el-select {
width: 100%;
}
</style>2、绑定内容：
<div id="app" class="container">
<el-main v-loading="isLoading">
<el-row class="query-container">
<el-form class="form-container" :model="queryData" size="mini" label-width='100px' ref='queryForm'>
<el-col :span="6">
<el-form-item label="课程名称" prop="name">
<el-input v-model="queryData.name" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="课程分类" prop="category">
<el-select v-model="queryData.category" value-key="code" clearable>
<el-option v-for="(item, index) in categoryLists"
:key="item.id"
:label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="讲师" prop="lecturer">
<el-select v-model="queryData.lecturer" clearable>
<el-option v-for="(item, index) in lecturerLists"
:key="item.id"
:label="item.name"
:value="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="onSearch()">搜索</el-button>
<el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-row class="data-container">
<el-col class="toolbar-container">
<el-button @click="handleAddCourse" plain size="mini" type="primary" icon="el-icon-plus">新增</el-button>
<el-button disabled plain size="mini" type="primary" icon="el-icon-edit">修改</el-button>
<el-button disabled plain size="mini" type="danger" icon="el-icon-delete">删除</el-button>
<el-button disabled plain size="mini" type="info" icon="el-icon-download">导入</el-button>
<el-button disabled plain size="mini" type="info" icon="el-icon-upload2">导处</el-button>
</el-col>
<el-table size="mini" stripe border :data="courseLists" style="width: 100%">
<el-table-column header-align='center' prop="code" label="课程编号" width="180"></el-table-column>
<el-table-column header-align='center' prop="name" label="课程名称"></el-table-column>
<el-table-column align="center" header-align='center' prop="rank.name" label="课程级别" width="180">
<template slot-scope="scope">
<el-tag v-if="scope.row.rank.code == '1'" type="success">{{scope.row.rank.name}}</el-tag>
<el-tag v-else-if="scope.row.rank.code == '2'" type="warning">{{scope.row.rank.name}}</el-tag>
<el-tag v-else type="danger">{{scope.row.rank.name}}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" header-align='center' prop="category.name" label="课程分类" width="180"></el-table-column>
<el-table-column header-align='center' prop="lecturer" label="讲师" width="180"></el-table-column>
<el-table-column align="right" header-align='center' prop="price" label="售价" width="180"></el-table-column>
<el-table-column fixed="right" label="操作(示例：首行数据)" width="200">
<template slot-scope="scope">
<el-button @click="handleView(scope.$index, scope.row)" type="text" size="mini" icon="el-icon-view">查看</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="mini" icon="el-icon-edit">编辑</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="mini" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row>
<el-col>
<el-pagination
background
@size-change='onSizeChange'
@current-change='onCurrentChange'
:current-page.sync='currentPage'
:page-sizes='[10, 20, 50, 100, total]'
:page-size='10'
layout='total, sizes, prev, pager, next, jumper'
:total='total'>
</el-pagination>
</el-col>
</el-row>
<!-- 模块对话框 -->
<course-modal ref="courseModal" @save-finished='getCourseLists()'></course-modal>
</el-main>
</div>3、js代码块：
const vm = new Vue({
el:'#app',
data() {
return {
isLoading: false,
queryData: {
name: '',
category: {
code: '',
name: ''
},
lecturer: ''
},
search: {
params: {},
offset: 0,
limit: 10,
orderby: ''
},
currentPage: 1,
total: 0,
courseLists: [],
lecturerLists: [],
categoryLists: [],
timer: null
}
},
mounted() {
this.init()
},
methods:{
init() {
this.initOptions()
this.getCourseLists()
},
getCourseLists() {
this.isLoading = true
this.search.params = this.queryData
// 异步接口获取 需要进行封装api 此处做演示
axios.post('../../api/courses.json', this.search)
.then(response => {
// 模拟处理
if (!this.timer) {
this.timer = setTimeout(() => {
this.isLoading = false
this.timer = null
if (response.data.code == '100') {
this.courseLists = response.data.data
this.total = response.data.total
}
},500)
}
}).catch(error => {
this.isLoading = false
console.log(error);
});
},
onSearch() {
this.$refs['queryForm'].validate(valid => {
if (valid) {
this.search.offset = 0
this.currentPage = 1
this.getCourseLists()
} else {
return false
}
})
},
onReset() {
this.$refs.queryForm.resetFields()
},
handleView(index, row) {
this.isLoading = true
// 异步接口获取 需要进行封装api 此处做演示
axios.get('../../api/course.json', {
params: {
id: row.id
}
})
.then((response) => {
if (response.data.code == '100') {
this.isLoading = false
this.$refs.courseModal.$emit('openViewCourseDialog', response.data.data)
}
})
.catch((error) => {
console.log(error);
this.isLoading = false
});
},
handleEdit(index, row) {
this.isLoading = true
// 异步接口获取 需要进行封装api 此处做演示
axios.get('../../api/course.json', {
params: {
id: row.id
}
})
.then((response) => {
if (response.data.code == '100') {
this.isLoading = false
this.$refs.courseModal.$emit('openEditCourseDialog', response.data.data)
}
})
.catch((error) => {
console.log(error);
this.isLoading = false
});
},
handleDelete(index, row) {
this.$confirm('确定删除吗？', '确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.isLoading = true
// 模拟删除 ... 略
if (!this.timer) {
this.timer = setTimeout(() => {
this.isLoading = false
this.timer = null
this.getCourseLists()
this.$message({
message: '删除成功！',
type: 'success'
})
},500)
}
}).catch(() => {})
},
handleAddCourse() {
this.$refs.courseModal.$emit('openAddCourseDialog')
},
onSizeChange(val) {
this.search.limit = val;
this.search.offset = (this.currentPage - 1) * val
this.getCourseLists()
},
onCurrentChange(val) {
this.search.offset = (val - 1) * this.search.limit
this.currentPage = val
this.getCourseLists()
},
initOptions() {
// 异步接口获取 需要进行封装api 此处做演示
axios.get('../../api/lecturer.json')
.then((response) => {
if (response.data.code == '100') {
this.lecturerLists = response.data.data
}
})
.catch((error) => {
console.log(error);
});
axios.get('../../api/categories.json')
.then(response => {
if (response.data.code == '100') {
this.categoryLists = response.data.data
}
})
.catch(error => {
console.log(error);
});
}
}
})3、模块对话框：
/**
* 课程对话框模块
*/
Vue.component('course-modal', {
// 接收参数
props: {
},
// 模板
template: `<el-dialog
:title="dialogProps.title"
:visible.sync="dialogProps.visible"
:close-on-click-modal="false"
width="70%" @open="onDialogOpen('formRef')">
<el-form class="form-container" :model="formModel" size="mini" label-width="100px" ref="formRef" :rules="formRules" >
<el-row>
<el-col :span="8">
<el-form-item label="课程名称" prop="name">
<el-input :disabled="dialogProps.action == 'view'" v-model="formModel.name" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="课程级别" prop="rank.code">
<el-select :disabled="dialogProps.action == 'view'" v-model="formModel.rank" value-key="code" clearable>
<el-option v-for="(item, index) in rankLists"
:key="item.id"
:label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="课程分类" prop="category.code">
<el-select :disabled="dialogProps.action == 'view'" v-model="formModel.category" value-key="code" clearable>
<el-option v-for="(item, index) in categoryLists"
:key="item.id"
:label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="讲师" prop="lecturer">
<el-select :disabled="dialogProps.action == 'view'" v-model="formModel.lecturer" clearable>
<el-option v-for="(item, index) in lecturerLists"
:key="item.id"
:label="item.name"
:value="item.name"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="售价" prop="price">
<el-input :disabled="dialogProps.action == 'view'" v-model="formModel.price" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="描述">
<el-input :disabled="dialogProps.action == 'view'" type="textarea" v-model="formModel.description"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="onDialogClose" plain>取消</el-button>
<el-button v-if="dialogProps.action != 'view'" size="small" type="primary" @click="onSubmit('formRef')">确定</el-button>
</span>
</el-dialog>`,
data() {
return {
formModel: {
code: '',
name: '',
rank: {
code: '',
name: ''
},
category: {
code: '',
name: ''
},
lecturer: '',
price: '',
description: ''
},
lecturerLists: [],
categoryLists: [],
rankLists: [],
dialogProps: {
visible: false,
action: '',
title: ''
},
formRules: {
'name': [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
'rank.code': [
{ required: true, message: '请选择课程级别', trigger: 'change' }
],
'category.code': [
{ required: true, message: '请选择课程分类', trigger: 'change' }
],
'lecturer': [
{ required: true, message: '请选择讲师', trigger: 'change' }
],
'price': [
{ required: true, message: '请输入价格', trigger: 'blur' }
]
}
}
},
// 组件方法
methods: {
initFormModel() {
return {
code: '',
name: '',
rank: {
code: '',
name: ''
},
category: {
code: '',
name: ''
},
lecturer: '',
price: '',
description: ''
}
},
onSubmit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.doSave()
} else {
return false
}
});
},
doSave() {
// 提交保存接口
// ... 略
this.dialogProps.visible = false
this.$emit('save-finished')
this.$message({
message: '操作成功！',
type: 'success'
})
},
onDialogOpen(formName) {
this.$nextTick(() => {
this.$refs[formName].clearValidate()
})
},
onDialogClose() {
this.dialogProps.visible = false
},
initOptions() {
// 异步接口获取 需要进行封装api 此处做演示
axios.get('../../api/lecturer.json')
.then((response) => {
if (response.data.code == '100') {
this.lecturerLists = response.data.data
}
})
.catch((error) => {
console.log(error);
});
axios.get('../../api/categories.json')
.then(response => {
if (response.data.code == '100') {
this.categoryLists = response.data.data
}
})
.catch(error => {
console.log(error);
});
axios.get('../../api/ranks.json')
.then(response => {
if (response.data.code == '100') {
this.rankLists = response.data.data
}
})
.catch(error => {
console.log(error);
});
}
},
mounted() {
this.$nextTick(() => {
this.$on('openViewCourseDialog', function(data) {
this.dialogProps.action = 'view'
this.dialogProps.title = '查看课程'
this.formModel = data
this.initOptions()
this.dialogProps.visible = true
})
this.$on('openAddCourseDialog', function() {
this.dialogProps.action = 'add'
this.dialogProps.title = '添加课程'
this.formModel = this.initFormModel()
this.initOptions()
this.dialogProps.visible = true
})
this.$on('openEditCourseDialog', function(data) {
this.dialogProps.action = 'edit'
this.dialogProps.title = '修改课程'
this.formModel = data
this.initOptions()
this.dialogProps.visible = true
})
})
}
})
具体业务实现及复杂模块需根据具体情况进行变更或封装等。