vue sample
<template>
<section>
<header class="top_tips">
<span class="num_tip" v-if="fatherComponent == 'home'">{{level}}</span>
<span class="num_tip" v-if="fatherComponent == 'item'">题目{{itemNum}}</span>
</header>
<div v-if="fatherComponent == 'home'" >
<div class="home_logo item_container_style"></div>
<router-link to="item" class="start button_style" ></router-link>
</div>
<div v-if="fatherComponent == 'item'" >
<div class="item_back item_container_style">
<div class="item_list_container" v-if="itemDetail.length > 0">
<header class="item_title">{{itemDetail[itemNum-1].topic_name}}</header>
<ul>
<li v-for="(item, index) in itemDetail[itemNum-1].topic_answer" @click="choosed(index, item.topic_answer_id)" class="item_list">
<span class="option_style" v-bind:class="{'has_choosed':choosedNum==index}">{{chooseType(index)}}</span>
<span class="option_detail">{{item.answer_name}}</span>
</li>
</ul>
</div>
</div>
<span class="next_item button_style" @click="nextItem" v-if="itemNum < itemDetail.length"></span>
<span class="submit_item button_style" v-else @click="submitAnswer"></span>
</div>
</section>
</template> <script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'itemcontainer',
data() {
return {
itemId: null, //题目ID
choosedNum: null, //选中答案索引
choosedId:null //选中答案id
}
},
props:['fatherComponent'],
computed: mapState([
'itemNum', //第几题
'level', //第几周
'itemDetail', //题目详情
'timer', //计时器
]),
methods: {
...mapActions([
'addNum', 'initializeData',
]),
//点击下一题
nextItem(){
if (this.choosedNum !== null) {
this.choosedNum = null;
//保存答案, 题目索引加一,跳到下一题
this.addNum(this.choosedId)
}else{
alert('您还没有选择答案哦')
}
},
//索引0-3对应答案A-B
chooseType: type => {
switch(type){
case 0: return 'A';
case 1: return 'B';
case 2: return 'C';
case 3: return 'D';
}
},
//选中的答案信息
choosed(type,id){
this.choosedNum = type;
this.choosedId = id;
},
//到达最后一题,交卷,请空定时器,跳转分数页面
submitAnswer(){
if (this.choosedNum !== null) {
this.addNum(this.choosedId)
clearInterval(this.timer)
this.$router.push('score')
}else{
alert('您还没有选择答案哦')
}
},
},
created(){
//初始化信息
if(this.fatherComponent == 'home') {
this.initializeData();
document.body.style.backgroundImage = 'url(./static/img/1-1.jpg)';
}
}
}
</script> <style lang="less">
.top_tips{
position: absolute;
height: 7.35rem;
width: 3.25rem;
top: -1.3rem;
right: 1.6rem;
background: url(../images/WechatIMG2.png) no-repeat;
background-size: 100% 100%;
z-index: 10;
.num_tip{
position: absolute;
left: 0.48rem;
bottom: 1.1rem;
height: 0.7rem;
width: 2.5rem;
font-size: 0.6rem;
font-family: '黑体';
font-weight: 600;
color: #a57c50;
text-align: center;
}
}
.item_container_style{
height: 11.625rem;
width: 13.15rem;
background-repeat: no-repeat;
position: absolute;
top: 4.1rem;
left: 1rem;
}
.home_logo{
background-image: url(../images/1-2.png);
background-size: 13.142rem 100%;
background-position: right center;
}
.item_back{
background-image: url(../images/2-1.png);
background-size: 100% 100%;
}
.button_style{
display: block;
height: 2.1rem;
width: 4.35rem;
background-size: 100% 100%;
position: absolute;
top: 16.5rem;
left: 50%;
margin-left: -2.4rem;
background-repeat: no-repeat;
}
.start{
background-image: url(../images/1-4.png);
}
.next_item{
background-image: url(../images/2-2.png);
}
.submit_item{
background-image: url(../images/3-1.png);
}
.item_list_container{
position: absolute;
height: 7.0rem;
width: 8.0rem;
top: 2.4rem;
left: 3rem;
-webkit-font-smoothing: antialiased;
}
.item_title{
font-size: 0.65rem;
color: #00e;
line-height: 0.7rem;
}
.item_list{
font-size: 0;
margin-top: 0.4rem;
width: 10rem;
span{
display: inline-block;
font-size: 0.6rem;
color: #00e;
vertical-align: middle;
}
.option_style{
height: 0.725rem;
width: 0.725rem;
border: 1px solid #fff;
border-radius: 50%;
line-height: 0.725rem;
text-align: center;
margin-right: 0.3rem;
font-size: 0.5rem;
font-family: 'Arial';
}
.has_choosed{
background-color: #ffd400;
color: #575757;
border-color: #ffd400;
}
.option_detail{
width: 7.5rem;
padding-top: 0.11rem;
}
}
</style>
单独来讲, Vue.js 被定义成一个用来开发 Web 界面的前端库,是个非常轻量级的工具。
Vue.js 本身具有响应式编程和组件化的特点。
Vue.js 的组件化理念和 ReactJS 异曲同工——“一切都是组件”,可以将任意封装好的代
第 1章 Vue.js 简介
码注册成标签,例如:Vue.component('example', Example),可以在模板中以 <example></
example> 的形式调用。如果组件抽象得合理,这在很大程度上能减少重复开发,而且配合
Vue.js 的周边工具 vue-loader,我们可以将一个组件的 CSS、HTML 和 js 都写在一个文件里,
做到模块化的开发。
除此之外,Vue.js 也可以和一些周边工具配合起来,例如 vue-router 和 vue-resource,
支持了路由和异步请求,这样就满足了开发单页面应用的基本条件。
作为新兴的前端框架,Vue.js 也抛弃了对 IE8 的支持,在移动端支持到 Android 4.2+ 和 iOS 7+。
另外,在传统的前后端混合(通过后端模板引擎渲染)的
项目中,Vue.js 也会受到一定的限制,Vue 实例只能和后端模板文件混合在一起,获取的数
据也需要依赖于后端的渲染,这在处理一些 JSON 对象和数组的时候会有些麻烦。
理想状态下,我们能直接在前后端分离的新项目中使用 Vue.js 最合适。这能最大程度上
发挥 Vue.js 的优势和特性,熟悉后能极大的提升我们的开发效率以及代码的复用率。尤其是
移动浏览器上,Vue.js 压缩后只有 18KB,而且没有其他的依赖。
第一个特性是数据绑定
第二个特性是组件化
vue sample的更多相关文章
- Vue vs React: Javascript 框架之战
https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc 原文档 正如我们之前提到的,Word ...
- 简简单单的Vue3(插件开发,路由系统,状态管理)
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...
- 简简单单的Vue2(简单语法,生命周期,组件)
既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 简单入手 组件 在上面文章,我们简单的讲了前端框架的工程化,也就是MVVM,还有特别聊 ...
- Vue 2.0 Application Sample
===搭建Demo=== http://blog.csdn.net/wangjiaohome/article/details/51728217 ===单页Application=== http://b ...
- 关于vue指令(directive)
1.指令的注册 指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册: Vue.directive('dirName',function(){ //定义指令 }); 另外一种是局部注册: n ...
- SpringBoot vue
springboot 整合vue就行前后端完全分离,监听器,过滤器,拦截器 https://github.com/ninuxGithub/spring-boot-vue-separateA blog ...
- Vue:如何在地图上添加自定义覆盖物(点)
目录 如何在地图上添加自定义覆盖物(点) 首发日期:2019-1-25 如何在地图上添加自定义覆盖物(点) 此文重点是在地图上标点,所以就省去引入百度地图的步骤了. 先给一下最终的效果. 这个效果主要 ...
- 通过webpack2从0开始配置自己的vue项目 1
PS 阅读者需要node基础.webpack原理知识.vue基础 安装node 这个网上很多教程 打开终端 创建项目 npm init 全局安装: cnpm i webpack webpack-dev ...
- vue axios 与 FormData 结合 提交文件 上传文件
---再利用Vue.axios.FormData做上传文件时,遇到一个问题,后台虽然接收到请求,但是将文件类型识别成了字符串,所以,web端一直报500,结果是自己大意了. 1.因为使用了new F ...
随机推荐
- DTCMS,添加文章时,内容中第一张图片作缩略图,并且等比例缩放图片
DTCMS,添加文章时,内容中第一张图片作缩略图 admin/article/article_edit.aspx.cs 导入: using System.Drawing;using System.Dr ...
- java基础系列(一):Number,Character和String类及操作
这篇文章总结了Java中最基础的类以及常用的方法,主要有:Number,Character,String. 1.Number类 在实际开发的过程中,常常会用到需要使用对象而不是内置的数据类型的情形.所 ...
- .git泄露及利用php弱类型松散比较构造json的payload
一道ctf题,文章搬运到了自己的网站上: http://101.132.137.140:202/archives/2019-11-16
- matlab求取积分
声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 对于Matlab的使用情况常常是这样子的,很多零碎的函数名字很难记忆,经常用过后过一段时间就又忘记了,又得去网 ...
- (1) laravel php artisan list make
php artisan list make Laravel Framework 5.4.36 Usage: command [options] [arguments] Options: -h, --h ...
- php 生成32位随机字符串 用于支付验证 用户注册
//32位随机字符串 function randstrpay($length=32) { $rand=''; $randstr= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ01234567 ...
- Windows 10系统快捷键
虚拟桌面 创建新的虚拟桌面:Win + Ctrl + D 关闭当前虚拟桌面:Win + Ctrl + F4 切换虚拟桌面:Win + Ctrl +左/右 任务视图:Win + Tab Win10常用W ...
- Python函数或者类的时间参数的默认值设为datetime.date.today()引起的问题
定义了函数def main(start_date=datetime.date.today(), end_date=datetime.date.today()): pass 函数在项目启动后, end_ ...
- MySQL(六) 索引
索引与优化 1.选择索引的数据类型 MySQL支持很多数据类型,选择合适的数据类型存储数据对性能有很大的影响.通常来说,可以遵循以下一些指导原则: (1)越小的数据类型通常更好:越小的数据类型通常在磁 ...
- REDIS scan与sunionstore合并多集合数据
实际业务场景: 现需求要将多个KEY的set集合数据合并到一个总集合中,思路:通过scan分批扫描满足条件的KEY,然后用sunionstore分批合并. 注意闭坑:此种解决方案只适用于待合并的集合K ...