vue and nuxt 学习练手

汤米粥

已于 2022-08-19 17:17:10 修改

阅读量191

点赞数

分类专栏： vue学习文章标签： vue.js 学习前端

于 2022-08-19 17:09:16 首次发布

本文链接：https://blog.csdn.net/nnmmbb/article/details/126428518

版权

vue学习专栏收录该内容

15 篇文章 1 订阅

订阅专栏

index.vue

<template>
<div>
  <nuxt-logo/>
  <NuxtLogo/>
  
  <Tutorial/>

  <!--a-service 和 aService效果一样-->
  <a-service/><br/>
  <aService/>
</div>

</template>

<script>
import NuxtLogo from '../components/NuxtLogo.vue';
import aService from '../components/customService.vue';
 
export default {
    name: "IndexPage",
    components: { NuxtLogo, aService }
}
</script>

hello.vue

<template>
 <div>
    <Tutorial/>
    <Hello/>
</div>

</template>

<script>

import Hello from '../components/Hello.vue';
import Tutorial from '../components/Tutorial.vue';

 //ES6语法，相当于 new Vue({})
export default {
    name: "IndexPage",
    components: { Hello, Tutorial }
}
</script>

about.vue

<template>
<div>
   <h1>关于我：我开始学习vue and nuxt了。</h1> 
   <h2 v-text = "name"></h2>
   <h1 v-html="aa"></h1>
</div>
</template>

<script>


  //ES6语法，相当于 new Vue({})
export default {
  name: 'AboutPage',
      data(){ return{
          aa:'<a href="#">滴答</a>',
          name: 'aaaaaaaaaa'
      }
      
   }
}
</script>

Test.vue

<template>
<div>

    <!--第三部分-->
    <div>
        <swiper :options="swiperOption">
            <swiper-slide class = "swiper-slide" v-for="(item,index) in bannerList" :key="index">
                <img class = "banner" :src = "item.img"/> 
            </swiper-slide>

              <!--vue-awesome-swiper的6.X版本小圆点不显示问题  http://events.jianshu.io/p/3820c25fc259 -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>

    <h1>aaaaaaaaaaaaaaaaaaaa</h1>


    <!--第一部分内容-->
    <div>
        <span  class="item_main" v-for = "(item,index) in list" >
            {{index}}{{item}} 
        </span>
    </div>

      <!---第二部分内容-->
    <div>
        <div v-for="(item,index) in questions" >
            <span>问：{{item.problem}} by {{item.answer_user}} <img class = "icon_answer" :src="questionIcon(item.answer_tag_url)"/></span>
            <br/>
            <span v-html="`答:${item.content}`"></span>
            <br/><br/>
        </div>
    </div>

    <div class = "to_swiper" @click="goSwiper()">去到swiper</div>

    <a  class = "to_swiper" href = "http://localhost:3077/nwap/vipPage/TestSwiper">去到swiper</a>



</div>
</template>

<script>
import { onMounted } from 'vue';
 
import 'swiper/css/swiper.css';
import {Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import { mapState, mapMutations, mapActions } from "vuex";

//轮播指示器 vue-awesome-swiper的6.X版本小圆点不显示问题  http://events.jianshu.io/p/3820c25fc259
import  { Pagination}  from 'vue-awesome-swiper'; // 这行代码很关键



export default{
    name:"hello",

    head:{
        title:"测试网站"
    },

    components: {
        Swiper,
        SwiperSlide
    },

    data(){
        return {
            list: ['首页','会员','商场','购物车','订单','我的'],
            loading:false,
            questions: [],

            bannerList: [
                {img: "http://www.lemoncome.com/static/img/banner01.png"},
                {img: "http://www.lemoncome.com/static/img/banner02.png"},
                {img: "http://www.lemoncome.com/static/img/企业征信服务.png"}
            ],

            swiperOption: {
                //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                //循环
                loop: true,
                //设定初始化时slide的索引
                initialSlide: 0,
                //自动播放
                autoplay: {
                    delay: 1500,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                //滑动速度
                speed: 2000,
                //滑动方向
                direction: "horizontal",
                //小手掌抓取滑动
                grabCursor: true,
                pagination:{
                    el:'.swiper-pagination',
                    clickable:true,
                }
            },
        
        }
    },

    mounted(){
        this.getQAList();
    },

    propos:{

    },

    computed:{
        ...mapState(['allState']),  //有了这个this.allState.isApp才能用
    },

    methods:{
         openUrl(url) {
            if (!url) return;
            if (this.allState.isApp) {
                //android
                if (this.allState.device === "android") {
                androidApi && androidApi.openUrl(url, "_blank", "");
                } else if (this.allState.device === "ios") {
                //ios
                window.webkit.messageHandlers.JS_MESSAGE_MODEL.postMessage(
                    JSON.stringify({
                    type: "MKForward",
                    data: {
                        type: "nativeWeb",
                        goto: url,
                    },
                    })
                );
                } else {
                console.error("设备类型出错！");
                }
            } else {
                window.open(url);
            }
        },

        async getQAList(){
            this.loading = true
            // this.$toast("加载中...")
            const res = await this.$axios.get(this.$api.API_QA_LIST(1, 100))
            this.questions = res.list
            this.loading = fasle
        },

        questionIcon(url){
            return url ||  require("~/assets/img/vipPage/icon_question.png")
        },

        goSwiper(){
            var url = location.origin+"/nwap/vipPage/TestSwiper"
            alert(`${url}`)
            this.openUrl(url)
        },
      
     }
 
}

</script>

<style>

/** span 元素要inline-block才能设置height生效，要 line-height才能垂直居中如下： https://blog.csdn.net/vhjjbj/article/details/116390193 */
.item_main{
    color: #ff8833;
    text-align: center;
    display: inline-block;
    height: 50px;
    line-height: 50px; 
    width: 100px;
    text-align: center;
    background-color: #f2f2f2;
    font-size:24px
}

.icon_answer{
    width: 30px;
    height: 30px;
    border-radius: 5%;
    /* border: dashed #ff3399 1px; */
}

.banner{
    width: 100%;
    height:300px;
}

.to_swiper{
    width:auto;
    height: 80px;
    font-size: 30px;
}


.swiper-pagination .swiper-pagination-bullet{
    background:#ffffff;
    height: 8px;
    width: 30px;
    border-radius: 0px;  /**默认很大，指示器为圆点**/
    opacity: 1;  /** 透明度**/
}

.swiper-pagination .swiper-pagination-bullet-active{
    background-color: #ff0000;
}
 
 
</style>

TestSwiper.vue

<template>
<div>
   <div>
    <div v-if="banner.length === 1">
       <img :src="banner[0].image">
       
    </div>
    <swiper
      v-else
      :options="swiperOptions"
    >
      <swiper-slide
        v-for="(item, index) in banner"
        :key="index"
        class="banner-slide"
      >
          <img :src="item.image">
      </swiper-slide>

      <!--3、轮播指示器，这里很重要-->
      <div class = "swiper-pagination" slot = "pagination" ></div>
    </swiper>
  </div> 
  <div>hello</div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import { Autoplay,EffectCube} from 'swiper';
import "swiper/css/swiper.css";

//1、轮播指示器 vue-awesome-swiper的6.X版本小圆点不显示问题  http://events.jianshu.io/p/3820c25fc259
import  { Pagination}  from 'vue-awesome-swiper'; // 这行代码很关键

export default {

  name:"testSwiper",

  components: {
    Swiper,
    SwiperSlide
  },
  //放在props可以在其他类里更新数据 push
  // props: {
  //   banner: {
  //     type: Array,
  //     default: () => []
  //   }
  // },
  data() {
    return {

      banner: [
              {image: "http://www.lemoncome.com/static/img/banner01.png"},
              {image: "http://www.lemoncome.com/static/img/banner02.png"},
              {image: "http://www.lemoncome.com/static/img/企业征信服务.png"}
          ],

      //swiper轮播配置
      swiperOptions: {
        autoplay: {
          disableOnInteraction: false,
          delay: 3000,
        },
        loop: true,
        slidesPerView: 1,
        spaceBetween: 15,
        centeredSlides: true,
        //2、轮播指示器，这里很重要
        pagination:{
          el:'.swiper-pagination',
          clickable:true,
        },
         effect: "coverflow", //翻转效果  swiper切换效果 effect --"slide" 位移 -- "fade" 淡入 -- " cube" 3d方块 -- "coverflow" 3d流 -- "flip" 3d翻转
      }
    }
  },
  methods: {
 
  }
}
</script>

<!--如果写成scoped 修改轮播指标器样式的代码就不会生效-->
<style>

.swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    text-align: center;
    opacity: 1;
    background:#ffffff;
    display: inline-block;
  }
  .swiper-pagination-bullet-active {
    background: #ff51d6;
  }
 
</style>

swiper效果图：1