<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,而且没有其他的依赖。

第一个特性是数据绑定
第二个特性是组件化

index.html: 整个项目的入口文件
main.js: 整个项目的逻辑主文件
Vue实例: vue的实例化对象
包含: el / tem / com
temp: 模板中可以写html / 调用其他组件
<App/>:
代表模板要执行的组件文件,跟App.vue中的name属性有关
comp:
组件组中要包含需要调用的组件名,例如上面模板调用了<App/>,那么组件组中就一定要包含App组件
import:
import用于导入需要依赖的文件,例如上方组件组中,
想要引入App组件,那么首先要使用import引入这个组件文件
import .. from ..: import 后面是自己起的名字,from后面是组件的名字
 

vue sample的更多相关文章

  1. Vue vs React: Javascript 框架之战

    https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc    原文档 正如我们之前提到的,Word ...

  2. 简简单单的Vue3(插件开发,路由系统,状态管理)

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...

  3. 简简单单的Vue2(简单语法,生命周期,组件)

    既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 简单入手 组件 在上面文章,我们简单的讲了前端框架的工程化,也就是MVVM,还有特别聊 ...

  4. Vue 2.0 Application Sample

    ===搭建Demo=== http://blog.csdn.net/wangjiaohome/article/details/51728217 ===单页Application=== http://b ...

  5. 关于vue指令(directive)

    1.指令的注册 指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册: Vue.directive('dirName',function(){ //定义指令 }); 另外一种是局部注册: n ...

  6. SpringBoot vue

    springboot 整合vue就行前后端完全分离,监听器,过滤器,拦截器 https://github.com/ninuxGithub/spring-boot-vue-separateA blog ...

  7. Vue:如何在地图上添加自定义覆盖物(点)

    目录 如何在地图上添加自定义覆盖物(点) 首发日期:2019-1-25 如何在地图上添加自定义覆盖物(点) 此文重点是在地图上标点,所以就省去引入百度地图的步骤了. 先给一下最终的效果. 这个效果主要 ...

  8. 通过webpack2从0开始配置自己的vue项目 1

    PS 阅读者需要node基础.webpack原理知识.vue基础 安装node 这个网上很多教程 打开终端 创建项目 npm init 全局安装: cnpm i webpack webpack-dev ...

  9. vue axios 与 FormData 结合 提交文件 上传文件

    ---再利用Vue.axios.FormData做上传文件时,遇到一个问题,后台虽然接收到请求,但是将文件类型识别成了字符串,所以,web端一直报500,结果是自己大意了. 1.因为使用了new  F ...

随机推荐

  1. npm的问题【解决】

    1.解决npm下载慢的问题,使用该命令 npm install --registry=https://registry.npm.taobao.org 好处:比起cnpm官网解释的,这个更好,使用cnp ...

  2. Flutter TextField 文本输入框的基本属性及详解

    TextField 文本输入框 源码分析: const TextField({ Key key, this.controller, // 控制正在编辑文本 this.focusNode, // 获取键 ...

  3. 【CUDA开发】CUDA编程接口(一)------一十八般武器

    子曰:工欲善其事,必先利其器.我们要把显卡作为通用并行处理器来做并行算法处理,就得知道CUDA给我提供了什么样的接口,就得了解CUDA作为通用高性能计算平台上的一十八般武器.(如果你想自己开发驱动,自 ...

  4. 阿里云RocketMQ的消费者简单实现

    业务场景之类的请看另一篇生产者的实现: package com.ttt.eee; import com.aliyun.openservices.ons.api.Action; import com.a ...

  5. Java面试题代码篇

    1.统计字符串中的各种字符的个数并对其排序 package JavaMianSiTest; public class TongJIZiFu { public static void main(Stri ...

  6. 矩阵拿宝物--Codeforces 1201D - Treasure Hunting Codeforces Round #577 (Div. 2)

    网上题解比较少,自己比较弱研究了半天(已经过了),希望对找题解的人有帮助 题目链接:https://codeforc.es/contest/1201/problem/D 题意: 给你一个矩形,起始点在 ...

  7. Centos7.3安装jdk和maven

    安装jdk和maven             通过winscp上传jdk             解压                 tar -zxvf jdk-8u91-linux-x64.ta ...

  8. 20191011-构建我们公司自己的自动化接口测试框架-TestData的数据准备

    创建excel测试数据准备,excel的第一个sheet存储测试集,后面分别为测试用例和断言结果表 测试集构成如下: 按列分别为测试序号,测试用例说明,对应的sheetname,测试用例是否允许,测试 ...

  9. flask使用tablib导出excel数据表

    在网页中常常有导出数据的需求,尤其是一下管理类平台.在flask中要导出excel数据表,通常可以使用xlwt库,创建文件并逐行写入数据,但是使用起来总是感觉很麻烦.tablib库相对操作更加方便. ...

  10. 【数据结构】洛谷2019 OI春令营 - 普及组 作业

    [P3662][USACO17FEB]Why Did the Cow Cross the Road II S 求解连续的k个数的最大值,利用前缀和维护即可. #include<bits/stdc ...