内容纲要
创建好html后
复制以下代码到head标签中
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>在body内写入
<div id="app">
{{ message }}
</div>在body外面的下面写入
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>使用UI组件库
在前继续追加
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>在body任意处粘贴
<el-button>默认按钮</el-button>追加代码
<el-table :data="userListDetail" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>演示下载效果：script标签内容部分
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
mark: 0,
userList: [
"张三",
"李四",
"王五",
"老六"
],
userListDetail: [{
name: "张三",
date: "2024",
address: "长沙"
},
{
name: "张三",
date: "2024",
address: "长沙"
},
{
name: "张三",
date: "2024",
address: "长沙"
}
]
},
methods: {
openMessage() {
this.$message('开始在下啦，稍后一下哦')
var markV2 = setInterval(() => {
this.mark = this.mark + 20;
if (this.mark == 100) {
clearInterval(markV2)
this.$message({
message: '下载成功啦',
type: 'success'
})
}
}, 1000);
}
}
})body标签部分：
<div id="app">
{{ message }}
<p v-for="item in userList">{{item}}</p>
<el-button @click="openMessage">下载</el-button>
<el-table :data="userListDetail" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<el-progress :percentage="mark"></el-progress>
</div>
建立一个新的html
复制以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;">
</el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
},
methods: {
onSubmit() {
this.$message('提交成功')
this.$notify({
title: '提示',
message: this.renderData(),
duration: 0
});
},
renderData() {
var result = "";
Object.keys(this.form).map(item => {
result = result + this.form[item] + ","
})
return result;
}
}
})
</script>
</html>
